html5實作微信打飛機遊戲_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;
flivver1" /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 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> switch(type){
case 1: return new flivverObj(100,50,30,flivver1,getSudu());
case 2:
return new flivverObj(500,70,90,flivver2,getSudu()); return new flivverObj(1000,110,170,flivver3,getSudu());
}
}
function cartridge(x,y){
this.x = x;
this. = y;
}

function gameover(){
window.clearTimeout(fps);
//$('#dotu').fadeOut();
$(( '.content').css('position','relative');
$('.content').append('');
$('#sil').html('你').hide(). fadeIn(1000,function(){
$(this).html('你屎').hide().fadeIn(1000,function(){
$(this).html('你屎了
' 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/mg('./assets/mg('. cartridge.png');

var boo1 = newImg('./assets/boo1.png');
var over = newImg('./assets/over.png');
//
dotu.update = function(){

dotu.setTimes();
// 設定背景
dotu.setBg();
// 設定小飛機
dotu.setBg();
// 設定小飛機
dotu.setFlivver();
// 畫自己
dotu.setMe();
// 子彈
dotu.cartridge();


cx. 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,0Image(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].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,
}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].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 cartridges.splice(i, 1);
continue;
}


cartridges[i].y -= 20;

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].y && cartridges[i].y -flivver[j].height
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 newHmg(src){🎜 > var obj = new Image(); obj.src = src; return obj;} //setInterval(h.update, 1000/65); 複製程式碼程式碼如下:

http://www.w3 .org/1999 /xhtml">

; ;

回到部落格首頁

滑鼠X：
滑鼠Y：
小飛機數：
子彈數：
打中:
產生飛機時間: