HTML5實作經典坦克大戰坦克亂走還能發出一個子彈_html5教學技巧

複製代碼

代碼如下:

tank.html

 <br> <br> <br><meta charset="utf-8"> <br> <br> <br><h1 id="hmtl-經典的坦克大戰">hmtl5-經典的坦克大戰</h1> <br><!--坦克大戰的戰場--> <br><canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> <br><span id="aa">資料 <br><!--把tankGames.js引進到本頁--> <br><script type="text/javascript" src="tank.js"></script> <br><script type="text/javascript"> <br />//得到畫布<br />var canvas1=document.getElementById("tankMap"); <br />//得到繪圖上下文(你可以理解是畫筆) <br />var cxt =canvas1.getContext("2d"); <br />//我的坦克hero <br />//方向<br />var hero=new Hero(140,140,​​0,heroColor); <br />//定義一顆空子彈<br />var heroBullet=null; <br />//定義敵人的坦克(敵人的坦克有多少?思路: 是單一單一的定義，還是放在數組中?) <br />var enemyTanks=new Array() ; <br />//先死後活，定3個，後面我們把敵人坦克的數量，作出變數<br />//0->上, 1->右, 2->下3->左<br />for(var i=0;i<3;i ){ <br />//創建一個坦克<br />var enemyTank=new EnemyTank((i 1)*50,0,2,enmeyColor); <br />/ /把這個坦克放入陣列<br />enemyTanks[i]=enemyTank; <br />} <br />//先呼叫一次<br />flashTankMap(); <br />//專門寫一個函數，用於定時刷新我們的作戰區，把要在作戰區出現的元素(自己坦克，敵人坦克，子彈，炸彈， <br />//障礙物...)->遊戲思想<br />function flashTankMap(){ <br /> //把畫布清理<br />cxt.clearRect(0,0,400,300); <br />//我的坦克<br />drawTank(hero); <br />//畫出自己的子彈<br />//子彈飛效果是怎麼出現的?[答： 首先我們應該每隔一定時間(setInterval)就去刷新作戰區,如果在刷新的時候，子彈坐標變換了，給人的感覺就是子彈在飛!] <br />drawHeroBullet (); <br />//敵人的坦克<br />//畫出所有敵人坦克<br />for(var i=0;i<3;i ){ <br />drawTank(enemyTanks[i]); <br />} <br />} <br />//這是一個接受使用者按鍵函數<br />function getCommand(){ <br />//我怎麼知道，玩家按下的是什麼鍵<br />//說明當按下鍵後事件--->event物件----->事件處理函數() <br />var code=event.keyCode;//對應字母的ascii碼->我們看碼表<br />switch( code){ <br />case 87://上<br />hero.moveUp(); <br />break; <br />case 68: <br />hero.moveRight(); <br />break; <br />case 83: <br />hero.moveDown(); <br />break; <br />case 65: <br />hero.moveLeft(); <br />break; <br />case 74: <br />hero.shotEnemy() ; <br />break; <br />} <br />//觸發這個函數flashTankMap(); <br />flashTankMap(); <br />//重新繪製所有的敵人的坦克.你可以在這裡寫程式(思想,我們乾脆些一個函數，專門用於定時刷新我們的畫布[作戰區]) <br />} <br />//每隔100毫秒去刷新一次作戰區<br />window.setInterval("flashTankMap()" ,100); <br /></script> <br> <br></span>

tank.js

複製程式碼

程式碼如下:

<pre name="code" class="javascript">//為了程式方便，我們定義兩個顏色陣列<br>var heroColor=new Array("#BA9658","#FEF26E"); <br>var enmeyColor=new Array("#00A2B5","#00FEFE"); <br>//其它的敵人坦克，這裡的擴充性，還是不錯的. <br>//子彈類<br>function Bullet(x,y,direct,speed){ <br>this.x=x; <br>this.y =y; <br>this.direct=direct; <br>this.speed=speed; <br>this.timer=null; <br>this.isLive=true; <br>this.run=function run() { <br>//在該表這個子彈的座標時，我們先判斷子彈是否已經到邊界<br>if(this.x=400||this.y=300){ <br>//子彈要停止. <br>window.clearInterval(this.timer); <br>//子彈死亡<br>this.isLive=false; <br> }else{ <br>//這個可以去修改座標<br>switch(this.direct){ <br>case 0: <br>this.y-=this.speed; <br>break; <br>case 1: <br>this.x =this.speed; <br>break; <br>case 2: <br>this.y =this.speed; <br>break; <br>case 3: <br>this <br>break; <br>case 3: <br>this .x-=this.speed; <br>break; <br>} <br>} <br>document.getElementById("aa").innerText="子彈x=" this.x " 子彈y=" this. y; <br>} <br>} <br>//這是一個Tank類別<br>function Tank(x,y,direct,color){ <br>this.x=x; <br>this.y =y; <br>this.speed=1; <br>this.direct=direct; <br>//一個坦克，需要兩個顏色. <br>this.color=color; <br>//上移<br>this.moveUp=function(){ <br>this.y-=this.speed; <br>this.direct=0; <br>} <br>//向右<br>this.moveRight=this.moveRight= function(){ <br>this.x =this.speed; <br>this.direct=1; <br>} <br>//下移<br>this.moveDown=function(){ <br>this .y =this.speed; <br>this.direct=2; <br>} <br>//左<br>this.moveLeft=function(){ <br>this.x-=this.speed; <br>this.direct=3; <br>} <br>} <br>//定義一個Hero類<br>//x 表示坦克的橫坐標, y 表示縱坐標, direct 方向<br>function Hero( x,y,direct,color){ <br>//下面兩句話的作用是透過物件冒充，達到繼承的效果<br>this.tank=Tank; <br>this.tank(x,y,direct ,color); <br>//增加一個函數，射擊敵人坦克. <br>this.shotEnemy=function(){ <br>//創建子彈, 子彈的位置應該和hero有關係，並且和hero的方向有關.!!! <br>//this.x 就是當前hero的橫座標,這裡我們簡單的處理(細化) <br>switch(this.direct){ <br>case 0: <br>heroBullet= new Bullet(this.x 9,this.y,this.direct,1); <br>break; <br>case 1: <br>heroBullet=new Bullet(this.x 30,this.y 9,this. direct,1); <br>break; <br>case 2: <br>heroBullet=new Bullet(this.x 9,this.y 30,this.direct,1); <br>break; <br>case 3: //右邊<br>heroBullet=new Bullet(this.x,this.y 9,this.direct,1); <br>break; <br>} <br>//呼叫我們的子彈run, 50是老師多次測試得到的一個結論. <br>var timer=window.setInterval("heroBullet.run()",50); <br>//把這個timer賦給這個子彈(js物件是引用傳遞! ) <br>heroBullet.timer=timer; <br>} <br>} <br>//定義一個EnemyTank類別<br>function EnemyTank (x,y,direct,color){ <br>//也透過物件冒充，來繼承Tank <br>this.tank=Tank; <br>this.tank(x,y,direct,color); <br>} <br>//畫出自己的子彈,多說一句，你也可以把函數封裝到Hero類別<br>function drawHeroBullet(){ <br>//這裡，我們加入了一句話，但是要知道這裡加，是需要對整個程式有把握<br>if(heroBullet !=null&&heroBullet.isLive){ <br>cxt.fillStyle="#FEF26E"; <br>cxt.fillRect(heroBullet.x,heroBullet.y,2,2); <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>} <br>) //繪製坦克<br>function drawTank(tank){ <br>//考慮方向<br>switch(tank.direct){ <br>case 0: //上<br>case 2:// 下<br>//畫出自己的坦克，使用前面的繪圖技術<br>//設定顏色<br>cxt.fillStyle=tank.color[0]; <br>//韓老師使用先死--->後活(初學者最好用這個方法) <br>//先畫出左面的長方形<br>cxt.fillRect(tank.x,tank.y,5,30); <br>//畫出右邊的矩形(這時請大家思路->一定要一個參照點) <br>cxt.fillRect(tank.x 15,tank.y,5,30); <br>//畫出中間矩形<br>cxt. fillRect(tank.x 6,tank.y 5,8,20); //畫出坦克車的蓋子cxt.fillStyle=tank.color[1]; cxt.arc(tank. x 10,tank.y 15,4,0,360,true); cxt.fill(); //畫出砲筒(直線) cxt.strokeStyle=tank.color[1]; //設定線條的寬度cxt.lineWidth=1.5; cxt.beginPath(); cxt.moveTo(tank.x 10,tank.y 15); if( tank.direct==0){ cxt.lineTo(tank.x 10,tank.y); }else if(tank.direct==2){ cxt.lineTo(tank.x 10,tank.y 30); } cxt.closePath(); cxt.stroke(); break; case 1: //右與左casease 3: //畫出自己的坦克，使用前面的繪圖技術//設定顏色cxt.fillStyle=tank.color[0]; //Han 先生は、最初に die --->live Later を使用します (初心者はこのメソッドを使用するのが最適です) <br>//最初に左側に長方形を描画します <br>cxt.fillRect(tank.x, Tank.y,30 ,5); <br>//右側に長方形を描画します (この時点で考えてください -> 参照点があるはずです) <br>cxt.fillRect(tank.x, Tank.y 15,30, 5); <br>//中央の長方形を描画します<br>cxt.fillRect(tank.x 5, Tank.y 6,20,8); <br>//タンクのカバーを描画します<br>cxt. fillStyle=tank.color[1]; <br>cxt.arc(tank.x 15,tank.y 10,4,0,360,true); <br>cxt.fill(); (直線) <br>cxt.strokingStyle=tank.color[1]; <br>//線の幅を設定します<br>cxt.lineWidth=1.5; <br>cxt.beginPath(); cxt.moveTo(tank. x 15,tank.y 10); <br>//右へ<br>if(tank.direct==1){ <br>cxt.lineTo(tank.x 30,tank. y 10); <br> }else if(tank.direct==3){ //Left<br>cxt.lineTo(tank.x,tank.y 10); <br>} <br>cxt.closePath( ); <br>cxt .ストローク(); <br>ブレーク <br>} <br>} <br><br> <br><pre class="brush:php;toolbar:false">