所有程式碼如下：
<html> <head> <title>簡單遊戲（js練習）</title> <style> .wrapper{ width:600px;height:400px;background:#000;color:#fff; margin:50px auto; position:relative; } .airplane{ width:64px;height:64px;background:url(airplane.png);position:absolute; bottom:0;left:270px; } .target{ width:48px;height:48px;background:url(target.png);position:absolute; top:0; } .none{ width:0;height:0; display:none; } .bullet{ width:2px;height:5px;background:#fff;position:absolute; } .amount{ background:#999; width:60px;height:30px; position:absolute; left:0;bottom:0px; z-index:1; opacity:0.6; color:#fff; font-size:16px; text-align:center; line-height:30px; padding:0;margin:0; } .stop{ background:#333; width:200px;height:80px; position:absolute; left:200;bottom:160px; z-index:1; opacity:0.6; color:#fff; font-size:30px; text-align:center; line-height:80px; padding:0;margin:0; display:none; } </style> </head> <body> <div class="wrapper"> <div class="airplane" style="left:270px;bottom:0;"></div> <div class="stop">Game over</div> <p class="amount">0</p> </div> <script type="text/javascript"> var wrapper = document.getElementsByClassName("wrapper")[0]; var $amount = document.getElementsByClassName("amount")[0]; var $stop = document.getElementsByClassName("stop")[0]; var wrapper_width = 600,wrapper_height = 400; var arr_bullet = [];//子彈集合 var $airplane = document.getElementsByClassName("airplane")[0]; var airplane = new Airplane($airplane,64,64,50); var game = new Game(1); game.init(); setInterval(function(){ game.addLevel(); },30000); function Game(level){ this.beginTime = new Date().getTime(), this.level = level || 1, this.speed = 2000/ this.level, this.timer_target = null, this.addLevel = function(){ this.level++; this.speed = 2000 / this.level; clearInterval(this.timer_target); this.timer_target = setInterval(function(){ var _x = Math.random() * 1000 * 0.6; var target = new Target(_x); target.init(); },this.speed); }, this.init = function(){ var _this = this; airplane.init();//初始化大飛機 this.timer_target = setInterval(function(){ var _x = Math.random() * 1000 * 0.6; var target = new Target(_x); target.init(); },_this.speed); }, this.over = function (){ document.getElementsByClassName("target").className = "none"; arr_bullet=[]; arr_target=[]; clearInterval(this.timer_target); $stop.style.display = "block"; } } //我方飛機 function Airplane(dom,width,height,speed){ this.width = width||64, this.height = height||64, this.speed = speed||50, this.dom = dom||document.getElementsByClassName("airplane")[0], this.postion_x = wrapper_width/2 - this.width/2, this.postion_y = wrapper_height - this.height, this.init = function(){ var _this = this; document.onkeydown= function (e) { switch(e.which){ case 37: //left _this.move_left(); break; case 65: //left _this.move_left(); break; case 39: //right _this.move_right(); break; case 68: //right _this.move_right(); break; default: break; } } //發射子彈 setInterval(function(){ //var bullet1 = new Bullet(_this.postion_x,10); var bullet2 = new Bullet(_this.postion_x + _this.width/2 + 1,10); //var bullet3 = new Bullet(_this.postion_x + _this.width,10); //bullet1.init(); bullet2.init(); //bullet3.init(); },500); }, this.move_left = function(){ if(!this.postion_x || this.postion_x - this.speed < 0){ this.dom.style.left = 0; this.postion_x = 0; } else{ this.dom.style.left = this.postion_x-speed + "px"; this.postion_x = this.postion_x - speed; } }, this.move_right = function(){ var _right = wrapper_width - this.postion_x - this.width; if(_right - this.speed < 0){ this.dom.style.left = wrapper_width - this.width; this.postion_x = wrapper_width - this.width; } else{ this.dom.style.left = this.postion_x + this.speed + "px"; this.postion_x = this.postion_x + this.speed; } } } //我方飛機發射的子彈 function Bullet(x,speed){ this.speed = speed||10, this.width = 2, this.height = 5, this.y = 0, this.x = x||10, this.dom = null, this.timer_move = null, this.init = function(){ this.dom = document.createElement("div"); this.dom.className = "bullet"; this.dom.style.left = this.x + "px"; this.dom.style.top = wrapper_height - this.height - 30 +"px"; this.y = wrapper_height - this.height - 30; wrapper.appendChild(this.dom); this.move(); arr_bullet.push(this); }, //子彈移動 this.move = function(){ var _this = this; _this.timer_move = setInterval(function(){ if(_this.y <= _this.height){ _this.remove(); } else{ _this.dom.style.top = _this.y - _this.speed + "px"; _this.y -= _this.speed; _this.impactCheck(); } },200); }, //移除子彈 this.remove = function(){ //移除子彈移動的定時器 clearInterval(this.timer_move); //移除dom元素 if(this.dom.remove) this.dom.remove(); else wrapper.removeChild(this.dom); //從子彈數組裡移除 var _index = arr_bullet.indexOf(this); if (_index > -1) arr_bullet.splice(_index, 1); }, //碰撞檢測（檢測是否擊中敵機） this.impactCheck = function (){ for(var i = 0;i < arr_target.length;i++){ var _target_x1 = arr_target[i].x, _target_x2 = arr_target[i].x + 64, _target_y1 = arr_target[i].y, _target_y2 = arr_target[i].y + 64; var _x = this.x,_y = this.y; if(_x >= _target_x1 && _x <= _target_x2 && _y >= _target_y1 && _y <= _target_y2)// { arr_target[i].remove(); $amount.innerText = parseInt($amount.innerText) + 1; } } } } </script> <script> var arr_target = []; //目標（敵機） function Target(x,speed){ this.speed = speed||10, this.width = 48, this.height = 48, this.y = 0, this.x = x||10, this.dom = null, this.timer_move = null, this.init = function(){ this.dom = document.createElement("div"); this.dom.className = "target"; this.dom.style.left = this.x + "px"; wrapper.appendChild(this.dom); this.move(); arr_target.push(this); }, this.move = function(){ var _this = this; _this.timer_move = setInterval(function(){ if(_this.y >= wrapper_height){ _this.remove(); } else{ _this.dom.style.top = _this.y + _this.speed + "px"; _this.y += _this.speed; _this.impactCheck(); } },200); }, //碰撞檢測（檢測是否碰撞到我方飛機） this.impactCheck = function (){ var _airplane_x1 = airplane.postion_x, _airplane_x2 = airplane.postion_x + 64, _airplane_y1 = airplane.postion_y, _airplane_y2 = airplane.postion_y + 64; var _x1 = this.x + 10 ,_y1 = this.y - 20,_x2 = this.x + this.width - 10,_y2 = this.y + this.height; if(((_x1 >= _airplane_x1 && _x1 <= _airplane_x2)|| _x2 >= _airplane_x1 && _x2 <= _airplane_x2 ) && ((_y1 >= _airplane_y1 && _y1 <= _airplane_y2)|| _y2 >= _airplane_y1 && _y2 <= _airplane_y2 ))// { game.over(); } }, //移除敵機（被擊落） this.remove = function(){ //移除敵機移動的定時器 clearInterval(this.timer_move); //移除dom元素 if(this.dom.remove) this.dom.remove(); else wrapper.removeChild(this.dom); //從敵機數組裡移除 var _index = arr_target.indexOf(this); if (_index > -1) arr_target.splice(_index, 1); } } </script> </body></html>airplane.png
target.png
兩個飛機的png圖片，放到此html檔案同一目錄即可。
最新評論