首頁 > 開發者 > JavaScript
今天閑來無事，於是就打算教一個初學javascript的女童鞋寫點東西，因此為了兼顧趣味性與簡易程度，果斷想到了的打飛機小遊戲。。 本來想用html5做的，但是畢竟人家才初學，連jquery都還不會，所以最終還是決定用原生的javascript。雖說相對於園內的高手們而言代碼算不上優雅，效率算不上高，不過對於初學者來練手還是足以。。 三個檔案，main.js(主函數)，entity.js(實體類與工廠類)，util.js(工具類)，基本原理就是把位置資訊儲存在對象裡面，然後在setInterval裡面統一對所有對象進行更新顯示。程式所用到的飛機與子彈圖片都是從上截屏得來的。 index.html: 複製代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>打飛機</title><script type="text/javascript" src="js/util.js"></script><script type="text/javascript" src="js/entity.js"></script><script type="text/javascript" src="js/main.js"></script><script type="text/javascript"> window.onload=function(){ Main.init(); Util.g("startBtn").onclick=function(){ Main.start(); this.style.display="none"; }}</script></head><body><div id="parent" style=" margin: 0 auto; width:350px; height:480px; background-color:#c3c9c9; position: relative; overflow:hidden;"> <div style=" position:absolute; left:5px; top:5px;">積分:<span id="score">0</span></div> <button style=" position:absolute; left:150px; top:240px; display:block;" id="startBtn"> 點擊開始 </button> </div></body></html>複製代碼 main.js: 複製代碼// JavaScript Documentvar Main={ init:function(){ Util.init(); }, _totalEnemies:8, start:function(){ //初始化敵機 enemyPlaneFactory.creatEnemyPlane(this._totalEnemies); //初始化自己 selfPlane.init(); //初始化子彈 bulletFactory.creatBullet(100); //開始渲染畫面 this._render(); //開始射擊子彈 this._startShoot(); //初始化鍵盤事件響應 this._initEvent(); }, //渲染定時器 _render_t:null, _render:function(){ this._render_t=setInterval(function(){ var enemys=enemyPlaneFactory.enemys; for(var i in enemys){ var enemy=enemys[i]; enemy.move(0,enemy.speed); if(enemy.x+enemy.e.width>selfPlane.x+10 &&enemy.x<selfPlane.x+selfPlane.e.width-10 &&enemy.y+enemy.e.height>selfPlane.y+selfPlane.e.height/2 &&enemy.y<selfPlane.y+selfPlane.e.height){ enemy.isDied=true; clearInterval(Main._render_t); clearInterval(Main._startShoot_t); var b=window.confirm("對不起，您已經掛了，是否重玩?") if(b){ window.location.reload(); } } if(enemy.y>Util.windowHeight||enemy.isDied){ enemy.restore(); } } var bullets=bulletFactory.bullets; for(var i in bullets){ var bullet=bullets[i]; bullet.move(0,-bullet.speed); for(var i in enemys){ var enemy=enemys[i]; //判斷子彈是否擊中敵機，如果擊中則隱藏子彈，殺死敵機,增加積分.. if(bullet.y>10 &&bullet.x>enemy.x &&bullet.x<enemy.x+enemy.e.width &&bullet.y<enemy.y+enemy.e.height){ enemy.isDied=true; bullet.e.style.top=-bullet.e.height; selfPlane.score+=50; Util.scoreSpan.innerHTML=selfPlane.score+""; } } } },1000/15); }, //射擊定時器 _startShoot_t:null, _startShoot:function(){ var i=0; var bullets=bulletFactory.bullets; var bulletsCount=bullets.length; this._startShoot_t=setInterval(function(){ if(i>=bulletsCount){ i=0; } var bullet=bullets[i]; bullet.moveTo(selfPlane.x+selfPlane.e.width/2-bullet.e.width/2,selfPlane.y-bullet.e.height-3); i++; },300); }, keyMove:10, _initEvent:function(){ window.onkeydown=function(e){ /* 37:左 38:上 39:右 40:下 */ var keynum; var left=37,up=38,right=39,down=40; if(window.event){// IE keynum = e.keyCode }else if(e.which) {// Netscape/Firefox/Opera keynum = e.which } switch(keynum){ case left: selfPlane.move(-Main.keyMove,0); break; case up: selfPlane.move(0,-Main.keyMove); break; case right: selfPlane.move(Main.keyMove,0); break; case down: selfPlane.move(0,Main.keyMove); break; default: break; } //console.log(keynum); } } }複製代碼 entity.js: 複製代碼//自身的對象var selfPlane={ x:0, y:0, score:0, e:null, init:function(){ this.x=(Util.windowWidth-Util.selfPlaneElement.width)/2;//相對於父表單的x位移(css:left) this.y=Util.windowHeight-Util.selfPlaneElement.height;//相對於父表單的y位移(css:top) this.e=Util.selfPlaneElement;//對應的dom元素 Util.selfPlaneElement.style.left=this.x+"px"; Util.selfPlaneElement.style.top=this.y+"px"; Util.parentElement.appendChild(this.e); }, move:function(moveX,moveY){ var x=this.x+moveX; var y=this.y+moveY; if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){ return ; } if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){ return ; } this.x=x; this.y=y; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px"; }, moveTo:function(x,y){ if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){ return ; } if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){ return ; } this.x=x; this.y=y; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px"; }} //敵機的類var enemyPlane=function(x,y,speed){ this.x=x; this.y=y; this.e=Util.enemyPlaneElement.cloneNode(true); this.e.style.left=x; this.e.style.top=y; this.e.style.display="none"; Util.parentElement.appendChild(this.e); this.e.style.display="block"; this.speed=speed; this.isDied=false;}//prototype:原型enemyPlane.prototype.move=function(moveX,moveY){ this.x+=moveX; this.y+=moveY; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px";}//敵人複活enemyPlane.prototype.restore=function(){ this.x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width); this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height; this.speed=2+Math.random()*4; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px"; this.isDied=false;}//敵機工廠var enemyPlaneFactory={ enemys:[], creatEnemyPlane:function(n){ for(var i=0;i<n;i++){ //0~1 乘以視窗寬度，得到的就是從0~視窗寬度的一個隨機x值 var x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width); var y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height; var speed=2+Math.random()*4; var ep=new enemyPlane(x,y,speed); this.enemys.push(ep); } }}//子彈var bullet=function(x,y,speed){ this.x=x; this.y=y; this.speed=speed; this.e=Util.bulletElement.cloneNode(true); this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px"; Util.parentElement.appendChild(this.e); this.isUsed=false;} bullet.prototype.move=function(moveX,moveY){ this.x+=moveX; this.y+=moveY; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px";}bullet.prototype.moveTo=function(X,Y){ this.x=X; this.y=Y; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px";} //子彈恢複bullet.prototype.restore=function(){ this.x=Main.self this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height; this.speed=2+Math.random()*4; this.e.style.left=this.x+"px"; this.e.style.top=this.y+"px";}//子彈工廠var bulletFactory={ bullets:[], creatBullet:function(n){ for(var i=0;i<n;i++){ var b=new bullet(0,-Util.bulletElement.height,20); this.bullets.push(b); } }}複製代碼 util.js: 複製代碼// JavaScript Documentvar Util={ windowWidth:350, windowHeight:480, selfPlaneElement:null, enemyPlaneElement:null, bulletElement:null, parentElement:null, scoreSpan:null, g:function(id){ return document.getElementById(id); }, init:function(){ this.parentElement=this.g("parent"); this.selfPlaneElement=this._loadImg("images/self.gif"); this.enemyPlaneElement=this._loadImg("images/boss.gif"); this.bulletElement=this._loadImg("images/bullet.jpg"); this.scoreSpan=this.g("score"); }, _loadImg:function(src){ var e=document.createElement("img"); e.style.position="absolute"; e.src=src; return e; }}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
