<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>飛機大戰</title> <style> #did{ width:500px;height:500px; background:url("./images/bg2.png") no-repeat 0px -1036px; position:relative;overflow:hidden;} #gid{position:absolute;top:350px;left:100px;} #p0,#p1,#p2,#p3,#p4,#e1,#e2,#e3,#boom{position:absolute;} </style> </head> <body> <h2>JavaScript實例:飛機大戰</h2> <div id="did"> <img id="p0" src="./images/eshot.png" style="display:none;"/> <img id="p1" src="./images/eshot.png" style="display:none;"/> <img id="p2" src="./images/eshot.png" style="display:none;"/> <img id="p3" src="./images/eshot.png" style="display:none;"/> <img id="p4" src="./images/eshot.png" style="display:none;"/> <img id="e1" src="./images/e1.png" style="display:none;"/> <img id="e2" src="./images/e2.png" style="display:none;"/> <img id="e3" src="./images/e3.png" style="display:none;"/> <img id="boom" src="./images/boom.gif" style="display:none;"/> <img id="gid" src="./images/me.png"/> </div> <script type="text/javascript"> var btop=-1036; var m=0,b=0; var did = document.getElementById("did"); var gid = document.getElementById("gid"); var boom = document.getElementById("boom"); window.document.onkeydown = function(ent){ //獲取兼容的事件對象 var event = ent || window.event; //alert(event.keyCode); //根據鍵盤值執行對應操作 switch(event.keyCode){ case 37: //左方向鍵 gid.style.left = Math.max(0,gid.offsetLeft-5)+"px"; break; case 38: //上方向鍵 gid.style.top = Math.max(0,gid.offsetTop-5)+"px"; break; case 39: //右方向鍵 gid.style.left = Math.min(450,gid.offsetLeft+5)+"px"; break; case 40: //下方向鍵 gid.style.top = Math.min(440,gid.offsetTop+5)+"px"; break; case 32: //空格鍵 shoot(gid.offsetLeft+51,gid.offsetTop); //發射炮彈 break; } } //發射炮彈方法 function shoot(x,y){ //遍歷所有炮彈 for(var i=0;i<5;i++){ var p = document.getElementById("p"+i); //判斷炮彈是否可用 if(p.style.display=="none"){ p.style.top = y+"px"; p.style.left = x+"px"; p.style.display = "block"; return; } } } //碰撞檢測函數 function doCheckP(p,e){ //獲取檢測坐標 var x1 = e.offsetLeft+3; var x2 = e.offsetLeft+93; var y1 = e.offsetTop+35; var y2 = e.offsetTop+59; var x = p.offsetLeft+1; var y = p.offsetTop; //判斷是否有像素重疊 if(x>x1 && x<x2 && y>y1 && y<y2){ return true; } return false; } //游戲主線程 function running(){ //負責移動可見炮彈 for(var i=0;i<5;i++){ var p = document.getElementById("p"+i); //判斷炮彈是否可用 if(p.style.display=="block"){ p.style.top = p.offsetTop-5+"px"; //回收出了屏幕的炮彈 if(p.offsetTop<-10){ p.style.display = "none"; } //碰撞檢測 //遍歷所有敵機 for(var j=1;j<=3;j++){ var e = document.getElementById("e"+j); //判斷是否可見 if(e.style.display=="block"){ if(doCheckP(p,e)){ //設置爆炸位置 boom.style.top = p.offsetTop-170+"px"; boom.style.left = p.offsetLeft-200+"px"; boom.style.display ="block"; b=0; //隱藏敵機和炮彈 p.style.display = "none"; e.style.display = "none"; } } } } } //隨機設置出現敵機 var n = Math.ceil(Math.random()*10000)%20; if(n==5){ for(var i=1;i<=3;i++){ var e = document.getElementById("e"+i); //判斷而是否可用 if(e.style.display=="none"){ e.style.display="block"; e.style.top=-85+"px"; e.style.left=Math.ceil(Math.random()*10000)%400+"px"; break; } } } //負責移動可見飛機 for(var i=1;i<=3;i++){ var e = document.getElementById("e"+i); //判斷而是否可用 if(e.style.display=="block"){ e.style.top = e.offsetTop+4+"px"; //判斷是否出界 if(e.offsetTop>500){ e.style.display = "none"; } } } //控制爆炸時間 if(b>=0){ b++; } if(b>10){ boom.style.display ="none"; b=-1; } //負責無縫滾動背景圖片 m+=2; did.style.backgroundPosition="0px "+(btop+m)+"px"; if(m>768){ m=0; } setTimeout("running()",33); } running(); </script> </body> </html>