點此下載源碼,可用Chrome打開觀看。javascript
圖例:html
代碼:java
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>飛越河谷的戰機1.12 19.3.16 11:26 by:逆火狂飆 horn19782016@163.com</title> <style> *{ margin:1px; padding:1px; } #canvas{ background:#ffffff; } #controls{ float:left; } </style> </head> <body onload="init()"> <table border="0px"> <tr> <td width="50px"valign="top"> <div id="controls"> <input id='animateBtn' type='button' value='運動'/> </div> </td> <td width="100%" align="center"> <canvas id="canvas" width="1200px" height="562px" > 出現文字表示你的瀏覽器不支持HTML5 </canvas> </td> </tr> </table> <div> </div> </body> </html> <script type="text/javascript"> <!-- var paused=true; animateBtn.onclick=function(e){ paused=! paused; if(paused){ animateBtn.value="運動"; }else{ animateBtn.value="暫停"; window.requestAnimationFrame(animate); } } var ctx; // 繪圖環境 var bg; // 背景 var lastTime=0; // 上次時間,用以計算FPS var fps=0; // Frame per second var myPlane; // 己方飛機 var myShellMng; // 己方子彈管理類 var enemyPlaneMng; // 敵方飛機管理者 var explosionMng; // 爆炸管理者 function init(){ // 建立背景對象 bg=new Background(); // 初始化CTX var canvas=document.getElementById('canvas'); canvas.width=bg.width*6; canvas.height=bg.height*4; ctx=canvas.getContext('2d'); // +new Date=new Date().getTime(); lastTime=+new Date; // 建立本機對象 myPlane=new MyPlane(ctx.canvas.width/2,canvas.height-100); // 本機子彈管理者 myShellMng=new MyShellMng(); // 敵機管理者 enemyPlaneMng=new EnemyPlaneMng(); // 爆炸管理者 explosionMng=new ExplosionMng(); // 響應鍵盤按下事件 canvas.addEventListener('keydown', doKeyDown, true); window.addEventListener('keydown', doKeyDown, true); // 響應鍵盤彈起事件 canvas.addEventListener('keyup', doKeyUp, true); window.addEventListener('keyup', doKeyUp, true); canvas.focus(); }; //------------------------------------ // 響應鍵盤按下事件 //------------------------------------ function doKeyDown(e) { var keyID = e.keyCode ? e.keyCode :e.which; if(keyID === 38 || keyID === 87) { // up arrow and W myPlane.toUp=true; e.preventDefault(); } if(keyID === 40 || keyID === 83) { // down arrow and S myPlane.toDown=true; e.preventDefault(); } if(keyID === 39 || keyID === 68) { // right arrow and D myPlane.toRight=true; e.preventDefault(); } if(keyID === 37 || keyID === 65) { // left arrow and A myPlane.toLeft=true; e.preventDefault(); } if(keyID === 32 ) { // SpaceBar // 按下和彈起必須成對出現,不然畫面會僵 myPlane.shoot(); e.preventDefault(); } } //------------------------------------ // 響應鍵盤彈起事件 //------------------------------------ function doKeyUp(e) { var keyID = e.keyCode ? e.keyCode :e.which; if(keyID === 38 || keyID === 87) { // up arrow and W myPlane.toUp=false; e.preventDefault(); } if(keyID === 40 || keyID === 83) { // down arrow and S myPlane.toDown=false; e.preventDefault(); } if(keyID === 39 || keyID === 68) { // right arrow and D myPlane.toRight=false; e.preventDefault(); } if(keyID === 37 || keyID === 65) { // left arrow and A myPlane.toLeft=false; e.preventDefault(); } if(keyID === 32 ) { // SpaceBar // 按下和彈起必須成對出現,不然畫面會僵 e.preventDefault(); } } // 更新各對象狀態 function update(){ myPlane.move(); myShellMng.move(); // 判斷敵機和本機是否相撞 enemyPlaneMng.isCrashed(myPlane); // 敵機移動 enemyPlaneMng.move(); // 判斷本方子彈是否與敵機相撞 myShellMng.probeCrashedEnemyPlane(); } // 在CTX畫出各個對象 function draw(){ // 清屏 ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // 畫背景 fps=calculateFps(new Date); bg.setOffset(fps); var bgImg=bg.getImage(); ctx.drawImage(bgImg,0,bg.height-bg.Offset,bg.width,bg.Offset,0,0,ctx.canvas.width,4*bg.Offset); ctx.drawImage(bgImg,0,0,bg.width,bg.height-bg.Offset,0,4*bg.Offset,canvas.width,canvas.height-4*bg.Offset); // 畫己方飛機 myPlane.paint(ctx); // 畫己方子彈 myShellMng.paint(ctx); // 畫敵機 enemyPlaneMng.paint(ctx); // 畫爆炸 explosionMng.paint(ctx); } // 計算FPS function calculateFps(now){ var retval=1000/(now-lastTime); lastTime=now; return retval; } // 播放 function animate(){ if(!paused){ update(); draw(); } window.requestAnimationFrame(animate); } //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>點類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Point=function(x,y){ this.x=x; this.y=y; } Point.prototype={ x:0, // 橫座標 y:0, // 縱座標 } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<點類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>背景類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Background=function(){ this.width=104; this.height=156; this.files=['bgBlue.jpg','bgRiver.jpg','bgSky.jpg','bgVolcano.jpg']; this.Offset=0; this.velocity=40; } Background.prototype={ width:104, // 背景圖片原始寬度 height:156, // 背景圖片原始高度 files:[], // 圖片數組 Offset:0, // 偏移值 velocity:40, // 背景移動速度 loopValue:0, // 循環累加值,用來肯定時哪一張圖片 getImage:function(){ this.loopValue++; if(this.loopValue>=3999){ this.loopValue=0; } var index=Math.floor(this.loopValue/1000); var img=new Image(); img.src=this.files[index]; return img; }, setOffset:function(fps){ this.Offset=this.Offset<this.height?this.Offset+this.velocity/fps:0; }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<背景類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>我方戰機類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MyPlane=function(x,y){ Point.apply(this,arguments); this.types=[ {width:56,height:41,file:'m1.png'}, {width:56,height:41,file:'m2.png'}, {width:80,height:54,file:'m3.png'}, {width:109,height:83,file:'m4.png'}, {width:109,height:81,file:'m5.png'}, {width:109,height:91,file:'m6.png'}, ]; } MyPlane.prototype={ files:[], // 存儲圖片的數組 step:4, // 每次移動多遠 toLeft:false, // 是否向左移動 toRight:false, // 是否向右移動 toUp:false, // 是否向上移動 toDown:false, // 是否向下移動 level:5, // 等級 destroyed:false, // 是否被擊毀或撞毀 paint:function(ctx){ if(this.destroyed==false){ var img=new Image(); var index=this.level; img.src=this.types[index].file; ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2); // 標出this,x,this.y所在位置 //var img2=new Image(); //img2.src="shoot.png"; //ctx.drawImage(img2,this.x-5.5,this.y-5.5); } }, // 獲得飛機的左上角 getLeftUpPoint:function(){ var index=this.level; var p=new Point(this.x-this.types[index].width/2,this.y-this.types[index].height/2); return p; }, // 獲得飛機的右上角 getRightUpPoint:function(){ var index=this.level; var p=new Point(this.x+this.types[index].width/2,this.y-this.types[index].height/2); return p; }, // 獲得飛機的左下角 getLeftDownPoint:function(){ var index=this.level; var p=new Point(this.x-this.types[index].width/2,this.y+this.types[index].height/2); return p; }, // 獲得飛機的右下角 getRightDownPoint:function(){ var index=this.level; var p=new Point(this.x+this.types[index].width/2,this.y+this.types[index].height/2); return p; }, move:function(){ // 加入邊界判斷 2019年3月13日19點16分 var type=this.types[this.level].file; if(this.x<0){ this.x=0; this.toLeft=false; } if(this.x>ctx.canvas.width){ this.x=ctx.canvas.width; this.toRight=false; } if(this.y<0){ this.y=0; this.toUp=false; } if(this.y>ctx.canvas.height){ this.y=ctx.canvas.height; this.toDown=false; } // 運動 if(this.toLeft==true && this.destroyed==false){ this.x-=this.step; } if(this.toRight==true && this.destroyed==false){ this.x+=this.step; } if(this.toUp==true && this.destroyed==false){ this.y-=this.step; } if(this.toDown==true && this.destroyed==false){ this.y+=this.step; } }, // 本機開炮 shoot:function(){ if(this.destroyed==false){ //myShells.push(new MyShell(this.x,this.y)); var shells=myShellMng.fetch(this.getShellNum()); var offset=24; for(var i=0;i<shells.length;i++){ var s=shells[i]; s.x=this.x-offset/2+i*offset/shells.length; s.y=this.y; } } }, // 根據等級取得炮彈數量 getShellNum:function(){ if(this.level==0){ return 1; } else if(this.level==1){ return 1; } else if(this.level==2){ return 2; } else if(this.level==3){ return 2; } else if(this.level==4){ return 3; } else if(this.level==5){ return 3; } else if(this.level==6){ return 4; } else if(this.level==7){ return 4; } else{ return 5; } }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<我方戰機類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>我方炮彈類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MyShell=function(x,y){ Point.apply(this,arguments); this.types=[ {width:11,height:11,file:'shell0.png'}, {width:11,height:11,file:'shell1.png'}, {width:11,height:11,file:'shell2.png'}, {width:11,height:11,file:'shell3.png'}, {width:11,height:11,file:'shell4.png'}, {width:11,height:11,file:'shell5.png'}, {width:11,height:11,file:'shell6.png'}, {width:18,height:18,file:'shell7.png'}, ]; } MyShell.prototype={ types:[], // 炮彈型號 destroyed:false,// 是否被敵機撞毀 visible:true, // 是否在CTX顯示範圍內 level:3, // 等級,用以決定炮彈型號 paint:function(ctx){ if(this.visible==false){ return; } if(this.destroyed==false){ // 沒被擊毀顯示炮彈型號 var img=new Image(); var index=this.level; img.src=this.types[index].file; ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2); } }, move:function(){ // 設置越界不可見 if(this.x<0){ this.visible=false; } if(this.x>ctx.canvas.width){ this.visible=false; } if(this.y<0){ this.visible=false; } if(this.y>ctx.canvas.height){ this.visible=false; } if(this.visible==true && this.destroyed==false){ this.y-=4; } }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<我方炮彈類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>我方炮彈管理者類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>19.3.16 MyShellMng=function(){ shells=new Array(); } MyShellMng.prototype={ shells:[], // 己方炮彈對象數組 paint:function(ctx){ for(var i=0;i<this.shells.length;i++){ var s=this.shells[i]; s.paint(ctx); } }, // 取出子彈,count爲個數 fetch:function(count){ var retval=new Array(); console.log("原有己方炮彈數量=",this.shells.length); // 先取原有的炮彈 for(var i=0;i<this.shells.length;i++){ var s=this.shells[i]; if(s.visible==false || s.destroyed==true){ s.destroyed=false; s.visible=true; if(retval.length<count){ retval.push(s); } } } // 不足再建立新的炮彈 while(retval.length<count){ var s=new MyShell(0,0); this.shells.push(s); retval.push(s); } console.log("現有己方炮彈數量=",this.shells.length); return retval; }, // 移動炮彈 move:function(){ for(var i=0;i<this.shells.length;i++){ var s=this.shells[i]; s.move(); } }, // 判斷炮彈是否撞到敵機 probeCrashedEnemyPlane:function(){ for(var i=0;i<this.shells.length;i++){ var s=this.shells[i]; if(s.visible==true && s.destroyed==false){ if(enemyPlaneMng.isShooted(s)==true){ s.destroyed=true; return; } } } }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<我方炮彈管理者類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>敵方飛機類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> EnemyPlane=function(x,y,level){ Point.apply(this,arguments); this.level=level; this.types=[ {width:117,height:64,file:'e0.png'}, {width:117,height:64,file:'e1.png'}, {width:100,height:77,file:'e2.png'}, {width:117,height:85,file:'e3.png'}, {width:117,height:93,file:'e4.png'}, {width:117,height:93,file:'e5.png'}, {width:117,height:96,file:'e6.png'}, {width:117,height:99,file:'e7.png'}, ]; } EnemyPlane.prototype={ types:[], // 飛機型號數組 destroyed:false, // 是否被擊毀 level:7, // 等級,用此取飛機型號 visible:true, // 是否在ctx顯示範圍內 paint:function(ctx){ // 不可見則不顯示 if(this.visible==false){ return; } if(this.destroyed==false){ // 沒被擊毀顯示飛機型號 var img=new Image(); var index=this.level; img.src=this.types[index].file; ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2); // 標出本機下x,y座標 //var img2=new Image(); //img2.src="shoot.png"; //ctx.drawImage(img2,this.x-5.5,this.y-5.5); } }, // 判斷以x,y爲座標的點是否進入敵機四角範圍內 isWithinLimits:function(x,y){ var index=this.level; var left=this.x-this.types[index].width/2; var top=this.y-this.types[index].height/2; var width=this.types[index].width; var height=this.types[index].height; if(left<x && x<left+width && top<y && y<top+height){ return true; }else{ return false; } }, // 敵機飛行 move:function(){ // 設置越界不可見 if(this.x<0){ this.visible=false; } if(this.x>ctx.canvas.width){ this.visible=false; } if(this.y<0){ this.visible=false; } if(this.y>ctx.canvas.height){ this.visible=false; } if(this.visible){ this.y+=2; } }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<敵方飛機類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>敵方飛機管理類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> EnemyPlaneMng=function(x,y){ Point.apply(this,arguments); this.planes=new Array(); this.planes.push(new EnemyPlane(ctx.canvas.width/2,20,0)); //this.planes.push(new EnemyPlane(ctx.canvas.width/2-80,20,1)); //this.planes.push(new EnemyPlane(ctx.canvas.width/2+80,20,3)); } EnemyPlaneMng.prototype={ planes:[], // 獲得lowerLimit到upperlimit(包括端點值)的隨機整數 getRndBetween:function (lowerLimit,upperLimit){ return Math.floor(Math.random()*(upperLimit-lowerLimit+1))+lowerLimit; }, // 從新裝載飛機 reload:function(){ var count=this.getAlivePlaneCount(); if(count==0){ var i=this.getRndBetween(0,this.planes.length-1); var plane=this.planes[i]; plane.visible=true; plane.destroyed=false plane.x=ctx.canvas.width/2+this.getRndBetween(-100,100); plane.y=this.getRndBetween(20,30); plane.level=this.getRndBetween(0,7); } }, // 獲得屏幕上飛機活着的飛機數目 getAlivePlaneCount:function(){ var retval=0; for(var i=0;i<this.planes.length;i++){ var plane=this.planes[i]; if(plane.visible==true && plane.destroyed==false){ retval++; } } return retval; }, paint:function(ctx){ for(var i=0;i<this.planes.length;i++){ var plane=this.planes[i]; plane.paint(ctx); } }, move:function(){ for(var i=0;i<this.planes.length;i++){ var plane=this.planes[i]; plane.move(); } }, isShooted:function(shell){ if(shell.destroyed==true){ return false; } for(var i=0;i<this.planes.length;i++){ var plane=this.planes[i]; if(plane.visible==true && plane.destroyed==false){ if(plane.isWithinLimits(shell.x,shell.y)){ plane.destroyed=true; shell.destroyed=true; // 製造爆炸 explosionMng.fire(shell.x,shell.y); // 敵機重載 enemyPlaneMng.reload(); return true; } } } return false; }, // 看主角飛機是否與敵機相撞 isCrashed:function(rolePlane){ if(rolePlane.destroyed==true){ return false; } // 獲得本機四角座標 var p1=rolePlane.getLeftUpPoint(); var p2=rolePlane.getRightUpPoint(); var p3=rolePlane.getLeftDownPoint(); var p4=rolePlane.getRightDownPoint(); for(var i=0;i<this.planes.length;i++){ var ep=this.planes[i]; if(ep.visible==true && ep.destroyed==false){ if(ep.isWithinLimits(p1.x,p1.y) || ep.isWithinLimits(p2.x,p2.y) || ep.isWithinLimits(p3.x,p3.y) || ep.isWithinLimits(p4.x,p4.y)){ ep.destroyed=true;// 敵機撞毀 explosionMng.fire(ep.x,ep.y);// 製造爆炸 // 本機撞毀後不用敵機重載 //enemyPlaneMng.reload(); rolePlane.destroyed=true;// 本機撞毀 explosionMng.fire(rolePlane.x,rolePlane.y);// 製造爆炸 // 遊戲結束 return true; } } } return false; }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<敵方飛機管理類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>爆炸類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Explosion=function(x,y){ Point.apply(this,arguments); this.types=[ {width:105,height:100,file:'explosion0.png'}, {width:105,height:100,file:'explosion1.png'}, {width:105,height:100,file:'explosion2.png'}, {width:105,height:100,file:'explosion3.png'}, {width:105,height:100,file:'explosion4.png'}, {width:105,height:100,file:'explosion5.png'}, ]; } Explosion.prototype={ types:[], // 爆炸圖片 destroyTime:0, // 被摧毀時間 paint:function(ctx){ var index=Math.floor(this.destroyTime); if(index<this.types.length){ this.destroyTime+=0.05; var img=new Image(); img.src=this.types[index].file; ctx.drawImage(img,this.x-this.types[index].width/2,this.y-this.types[index].height/2); } }, // 看這個爆炸對象是否使用過 isUsed:function(){ return this.destroyTime>=this.types.length; }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<爆炸類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>爆炸管理類定義開始>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ExplosionMng=function(x,y){ exps=new Array(); } ExplosionMng.prototype={ exps:[], // 爆炸數組 paint:function(ctx){ for(var i=0;i<exps.length;i++){ var e=exps[i]; e.paint(ctx); } }, // 製做一次爆炸,使用這種方式,可最大程度利用現有對象,而不是建立一堆用不上的變量 fire:function(x,y){ var exp=null; for(var i=0;i<exps.length;i++){ var e=exps[i]; //console.log('e.isUsed=',e.isUsed()) if(e.isUsed()==true){ exp=e; exp.x=x; exp.y=y; exp.destroyTime=0; //console.log('使用一個原有對象',exp) break; } } if(exp==null){ exp=new Explosion(x,y); exps.push(exp); //console.log('建立一個新對象',exp) } //console.log('爆炸對象個數=',exps.length) }, } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<爆炸管理類定義結束<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< //--> </script>
2019年3月16日12點37分shell