這篇文章主要介紹了html5實(shí)現(xiàn)微信打飛機(jī)游戲,需要的朋友可以參考下

html5實(shí)現(xiàn)微信的打飛機(jī)游戲,利用這個(gè)小游戲?qū)W習(xí)一個(gè)HTML5吧，這是開發(fā)WEB的一個(gè)方向

代碼如下:

// 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");

// 用于記錄游戲的時(shí)間，越到后面越快

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;

}

// 飛機(jī)的對(duì)象

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

// 隨機(jī)的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;

}

// 獲取飛機(jī)

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};

// 用于存放小飛機(jī)

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();

// 設(shè)置背景

dotu.setBg();

// 設(shè)置小飛機(jī)

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個(gè)檔位

if(time1 == 1000){

time1 = 0;

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

}

}

/**

* 設(shè)置移動(dòng)的背景

*/

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(){

// 生成飛機(jī)

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;

// 如果超出屏幕將該小飛機(jī)刪除

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

flivver.splice(a, 1);

}

// 將小飛機(jī)畫到畫布上

// 小飛機(jī)死亡

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;

// 將小飛機(jī)畫到畫布上

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

// 子彈碰到飛機(jī)的情況

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('打中了編號(hào)' + j);

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

flivver[j].hp -= 80;

}else{

flivver[j].over = 40;

jifen += 50000;

}

// 子彈消失

cartridges.splice(i, 1);

break;

}

}

}

}

// 綁定鼠標(biāo)事件

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 >

<head>

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

<title>打飛機(jī) - 多途</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="/">回到博客首頁(yè)</a></div>

<div class="info">

鼠標(biāo)X：<span id="sbX"></span>

鼠標(biāo)Y：<span id="sbY"></span>

小飛機(jī)數(shù):<span id="fjs"></span>

子彈數(shù):<span id="zds"></span>

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

生成飛機(jī)時(shí)間:<span id="scfj"></span>

</div>

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

</body>

</html>