这篇文章主要介绍了html5实现微信打飞机游戏,需要的朋友可以参考下

html5实现微信的打飞机游戏,利用这个小游戏学习一个HTML5吧，这是开发WEB的一个方向

代码如下:

// JavaScript Document

var c = document.getElementById("dotu");

var cxt = c.getContext("2d");

var img = newImg("./assets/bg_01.jpg");

var fps;

cxt.drawImage(img,0,0,480,800);

var flivverLog = 0;

var flivver1 = newImg("./assets/flivver.png");

var flivver2 = newImg("./assets/flivver2.png");

var flivver3 = newImg("./assets/flivver3.png");

// 用于记录游戏的时间，越到后面越快

var time1 = 0;

var time2 = 80;

// 积分

var jifen = 0;

function getSudu(){

var number = parseInt(Math.random()*10);

if(number < 5 && number > 0){

return number;

}

return 1;

}

// 飞机的对象

function flivverObj(hp,ewidth,eheight,eimg,esudu){

// 随机的X

this.x = parseInt(Math.random()*460+1);

this.y = 0;

// 血量

this.hp = hp;

// 挨打

this.hit = 0;

// 是否死亡

this.over = 0;

this.width = ewidth;

this.height = eheight;

this.img = eimg;

this.sudu = esudu;

}

// 获取飞机

function getFlivver(type){

switch(type){

case 1:

return new flivverObj(100,50,30,flivver1,getSudu());

case 2:

return new flivverObj(500,70,90,flivver2,getSudu());

case 3:

return new flivverObj(1000,110,170,flivver3,getSudu());

}

}

function cartridge(x,y){

this.x = x;

this.y = y;

}

function gameover(){

window.clearTimeout(fps);

//$('#dotu').fadeOut();

$('.content').css('position','relative');

$('.content').append('<span style="position:absolute; top:5px; left:2px; font-size:150px; color:#cc0000; text-align:center" id="sil"></span>');

$('#sil').html('你').hide().fadeIn(1000,function(){

$(this).html('你屎').hide().fadeIn(1000,function(){

$(this).html('<a href="javascript：location.reload();" style="color:#cc0000" title="重新开始">你屎了</a>

' + jifen + ' 分').hide().fadeIn();

});

});

}

(function(cxt){

var dotu = {nums:0};

// 用于存放小飞机

var flivver = new Array();

var flivverImg = newImg("./assets/flivver.png");

// 自己

var me = {x:240,y:750};

var meImg = newImg('assets/me.png');

// 子弹

var cartridges = new Array();

var cartridgeImg = newImg('./assets/cartridge.png');

var boo1 = newImg('./assets/boo1.png');

var over = newImg('./assets/over.png');

//

dotu.update = function(){

dotu.setTimes();

// 设置背景

dotu.setBg();

// 设置小飞机

dotu.setFlivver();

// 画自己

dotu.setMe();

// 子弹

dotu.cartridge();

cxt.font = "italic 20px 微软雅黑";

cxt.strokeText("积分：" + jifen, 10, 30);

$('#fjs').html(flivver.length);

$('#zds').html(cartridges.length);

$('#scfj').html("1000/" + time2 + " 毫秒");

}

dotu.setTimes = function(){

time1++ ;

// 100 秒 1个档位

if(time1 == 1000){

time1 = 0;

time2 = (time2 == 20) ? 20 : time2 - 20;

}

}

/**

* 设置移动的背景

*/

dotu.setBg = function(){

dotu.nums++;

if(dotu.nums == 800){

dotu.nums = 0;

}

// 画布的背景

cxt.drawImage(img,0,dotu.nums,480,800);

cxt.drawImage(img,0,dotu.nums - 800,480,800);

}

dotu.setFlivver = function(){

// 生成飞机

if(dotu.nums % time2 == 0){

flivverLog++;

if(flivverLog % 6 == 0){

flivver.push(getFlivver(2));

}else if(flivverLog % 13 == 0){

flivver.push(getFlivver(3));

}else{

flivver.push(getFlivver(1));

}

}

for(a in flivver){

flivver[a].y += flivver[a].sudu;

// 如果超出屏幕将该小飞机删除

if(flivver[a].y > 780){

flivver.splice(a, 1);

}

// 将小飞机画到画布上

// 小飞机死亡

if(flivver[a].over > 0){

flivver[a].over --;

if(flivver[a].over > 20){

cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);

}else if(flivver[a].over > 2){

cxt.drawImage(over,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,40,43);

}else{

flivver.splice(a, 1);

}

}else{

cxt.drawImage(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,flivver[a].height);

// 判断自己是否死亡

if( me.x > (flivver[a].x - flivver[a].width + 20) && (me.x) <(flivver[a].x + flivver[a].width - 20) && (me.y) < (flivver[a].y + flivver[a].height + 20) && (me.y + 72) > (flivver[a].y - 20)){

gameover();

}

if(flivver[a].hit > 0){

cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);

//cxt.drawImage(boo1,flivver[a].x + 5 ,flivver[a].y,41,39);

flivver[a].hit--;

}

}

}

}

// 更新自己的距离

dotu.setMe = function(){

cxt.drawImage(meImg,me.x,me.y,64,72);

}

// 更新子弹方法

dotu.cartridge = function(){

if(dotu.nums % 10 == 0){

cartridges.push(new cartridge(me.x + 30,me.y));

}

for(i in cartridges){

// 飞到顶部就将OBJ删除掉

if(cartridges[i].y < 0){

cartridges.splice(i, 1);

continue;

}

cartridges[i].y -= 20;

// 将小飞机画到画布上

cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);

// 子弹碰到飞机的情况

for(j in flivver){

if(flivver[j].over > 0){

continue;

}

if(cartridges[i].x > flivver[j].x && cartridges[i].x < flivver[j].x+ flivver[j].width && cartridges[i].y > flivver[j].y && cartridges[i].y -flivver[j].height < flivver[j].y){

flivver[j].hit = 10;

$('#isdz').html('打中了编号' + j);

if(flivver[j].hp > 1){

flivver[j].hp -= 80;

}else{

flivver[j].over = 40;

jifen += 50000;

}

// 子弹消失

cartridges.splice(i, 1);

break;

}

}

}

}

// 绑定鼠标事件

c.addEventListener('mousemove', function onMouseMove(evt) {

me.x = evt.layerX - $('#dotu').offset().left - 32;

me.y = evt.layerY - 36 ;

$('#sbX').html(me.x);

$('#sbY').html(me.y);

});

fps = setInterval(dotu.update, 1000/100);

}(cxt))

function newImg(src){

var obj = new Image();

obj.src = src;

return obj;

}

//setInterval(h.update, 1000/65);

代码如下:

<!DOCTYPE html>

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>打飞机 - 多途</title>

<script type="text/javascript" src="./jquery.min.1.7.1.js"></script>

<style>

body{padding:0; margin:0; text-align:center}

.content{border:1px #000 solid; width:480px; margin:0 auto; height:800px; display:block; font-size:72px;}

.info,.blog{border:1px #000 solid; position:fixed; top:5px; right:5px; width:150px; text-align:left}

.blog{ left:10px; background:#000; text-align:center; width:100px}

.blog a{ color: #FFF; text-decoration:none; font-size:15px; }

</style>

</head>

<body>

<div class="content"><canvas id="dotu" width="480" height="800"></canvas></div>

<div class="blog"><a href="/">回到博客首页</a></div>

<div class="info">

鼠标X：<span id="sbX"></span>

鼠标Y：<span id="sbY"></span>

小飞机数:<span id="fjs"></span>

子弹数:<span id="zds"></span>

打中:<span id="isdz"></span>

生成飞机时间:<span id="scfj"></span>

</div>

<script type="text/javascript" src="./dotu_game.js"></script>

</body>

</html>