ホームページ > 記事 > ウェブフロントエンド > HTML5 は古典的な戦車戦を実現し、戦車が動き回って Bullet_html5 チュートリアル スキルを発射できます。
HTML5 は古典的な戦車戦を実現し、戦車が動き回って Bullet_html5 チュートリアル スキルを発射できます。
- WBOYオリジナル
- 2016-05-16 15:48:462380ブラウズ
コードをコピー
コードは次のとおりです:tank.html
<!DOCTYPE html> <br><head> ><meta charset="utf-8"/> <br></head> <br><h1>hmtl5-クラシック タンク バトル< ; /h1> <br><--戦車戦の戦場--> <br><canvas id="tankMap" width="400px" height="300px" style="background-color:black "> ;</canvas> <br><span id="aa">data</span> <br><!--tankGames.js をこのページに紹介します--> <br>< script type="text/javascript" src="tank.js"></script> <br><script type="text/javascript"> <br>//canvas<br>var Canvas1= document.getElementById("tankMap"); <br>//描画コンテキストを取得します (ブラシとして理解できます) <br>var cxt=canvas1.getContext("2d"); <br>//私の戦車のヒーロー<br>//方向<br>var hero=new Hero(140,140,0,heroColor); <br>//空の弾丸を定義します<br>var heroBullet=null;敵の戦車は何台ありますか? 考え: それは単一の定義ですか、それとも配列に配置されますか?) <br>varnyTanks=new Array() <br>//最初に死んで生き、次に 3 を設定します。敵戦車の数量を追加し、変数 <br>//0->upper, 1->right, 2-> lower 3->left<br>for(var i=0;i//戦車を作成します<br>varnemyTank=new EnemyTank((i 1)*50,0,2,enmeyColor) <br>//この戦車を配列<br>enemyTanksに入れます[i]=emoneTank; <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>for(var i=0;i<3;i ){ <br />drawTank(emoneTanks[i]); <br />} <br />} <br />//これはユーザー キーの受け入れです function<br />function getCommand(){ <br />//プレーヤーがどのキーを押したかを知るにはどうすればよいですか<br />//キーが押されたときのイベントを説明します --->イベント オブジェクト- --- ->イベント処理関数() <br>var code=event.keyCode;//対応する文字のASCIIコード-> コード表を見てみましょう <br>switch(code){ <br>ケース 87://on<br>hero.moveUp(); <br> ケース 68: <br>hero.moveRight(); <br> ケース 83: <br> ヒーロー.moveDown(); <br>break; <br>case 65: <br>hero.moveLeft(); <br>case 74: <br>hero.shotEnemy(); <br>} <br> // この関数をトリガーします flashTankMap(); <br>flashTankMap(); <br>// ここにコードを記述できます (特に、戦車を更新するための関数を作成しましょう)定期的に戦車 Canvas [戦闘エリア]) <br>} <br>//100 ミリ秒ごとに戦闘エリアを更新 <br>window.setInterval("flashTankMap()",100); ></body> <br></html>tank.js
コードをコピー
コードは次のとおりです:
<pre name="code" class="javascript">プログラミングの便宜上、2 つのカラー配列 <br>var heroColor=new Array("#BA9658","#FEF26E"); <br>var enmeyColor=new Array("#00A2B5","#00FEFE"); を定義します。 🎜>//他の敵戦車の場合、ここでのスケーラビリティは依然として優れています。<br>//Bullet クラス<br>function Bullet(x,y,direct,speed){ <br>this.x=x; this.y=y; <br>this.speed=speed; <br>this.isLive=true; <br>this. run(){ <br>//この弾丸の座標をリストするとき、最初に弾丸が境界に到達したかどうかを判断します<br>if(this.x<=0||this.x>=400|| this. y<=0||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> ブレーク; <br> ケース 1: <br>this.x =this.speed; <br>ケース 2: <br>this.y =this.speed;ブレーク; <br>ケース 3: <br>this.x-=this.speed <br>} <br>} <br>document.getElementById("aa").innerText= " this.x " Bullet y=" this.y; <br>} <br>} <br>//これは Tank クラスです <br>function Tank(x,y,direct,color){ <br>this .x=x; <br>this.y=y; <br>this.direct=direct; <br>this.color= color; <br>//上に移動<br>this.moveUp=function(){ <br>this.y-=this.speed; <br>} <br>//右へ<br>this.moveRight=function(){ <br>this.x =this.speed; <br>} <br>//<br>下に移動します。 moveDown=function( ){ <br>this.y =this.speed; <br>this.direct=2; <br>//Left<br>this.moveLeft=function(){ <br> this.x- =this.speed; <br>this.direct=3; <br>} <br>} <br>//ヒーロー クラスを定義します<br>//x はタンクの横軸を表し、y はタンクの横軸を表します縦座標、直接方向 <br>function Hero(x,y,direct,color){ <br>//次の 2 つの文の関数は、オブジェクトの偽装を通じて継承の効果を実現することです<br>this.tank=Tank ; <br>this.tank (x,y,direct,color); <br>//敵戦車を射撃する関数を追加します。<br>this.shotEnemy=function(){ <br>//弾を作成します。 、弾丸の位置はヒーローに関連しており、ヒーローの方向にも関係している必要があります。!!! <br>//this.x は現在のヒーローの横軸です。ここでは switch(this.direct){ <br>case 0 : <br>heroBullet=new Bullet(this.x 9,this.y,this.direct,1); <br>case 1: <br>heroBullet=new Bullet(this.x 30,this .y 9,this.direct,1); <br>break; <br>ケース 2: <br>heroBullet=new Bullet(this.x 9,this. y 30,this.direct,1); <br> ブレーク <br>ケース 3: //right<br>heroBullet(this.x,this.y 9,this.direct,1); >break; <br>} <br>//call バレットラン 50 は、多くのテストを経て教師が得た結論です。 <br>//このタイマーをこの弾丸に割り当てます (js オブジェクトは参照によって渡されます!) <br>heroBullet.timer=timer; <br>} <br>} <br>//EnemyTank クラスを定義します <br>関数EnemyTank (x,y,direct,color){ <br>// オブジェクトの偽装を通じて Tank も継承します <br>this.tank=Tank; <br>this.tank(x,y,direct,color); } <br>//独自の箇条書きを描画します。もう 1 つ、この関数を Hero クラスにカプセル化することもできます。<br>functiondrawHeroBullet(){ <br>//ここで文を追加しましたが、知っておく必要があります。ここに追加するには、プログラム全体を把握する必要があります。 <br>if(heroBullet!=null&&heroBullet.isLive){ <br>cxt.fillStyle="#FEF26E"; <br>cxt.fillRect(heroBullet.x,heroBullet. y,2,2); <br>} <br>} <br>//戦車を描画<br>関数drawTank(tank){ <br>//方向を考慮<br>switch(tank.direct){ <br>ケース 0: //上<br>ケース 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);タンクのカバーを描画します<br>cxt.fillStyle=tank.color[1] <br>cxt.arc(tank.x 10,tank.y 15,4,0,360,true); (); <br>//バレル（直線）を描画します <br>cxt.strokingStyle =tank.color[1]; <br>//線の幅を設定します <br>cxt.lineWidth=1.5; 🎜>cxt.beginPath(); <br>cxt.moveTo(tank.x 10,tank.y 15); <br>if(tank.direct==0){ <br>cxt.lineTo(tank.x 10) ,tank.y); <br>}else if(tank.direct==2){ <br>cxt.lineTo(tank.x 10,tank.y 30); <br>cxt.closePath( ); <br>cxt.ストローク(); <br>break; <br>ケース 1: / /右と左<br>ケース 3: <br>//前の描画テクニックを使用して、独自の戦車を描画します<br>//色を設定します<br>cxt.fillStyle=tank.color[0]<br>;//Teacher Han uses die first --->live later (beginners are best to use this method) <br>//Draw the rectangle on the left first <br>cxt.fillRect(tank.x, tank.y,30 ,5); <br>//Draw the rectangle on the right (please think about it at this time -> there must be a reference point) <br>cxt.fillRect(tank.x, tank.y 15,30,5); <br>//Draw the middle rectangle<br>cxt.fillRect(tank.x 5, tank.y 6,20,8); <br>//Draw the cover of the tank<br>cxt.fillStyle=tank. color[1]; <br>cxt.arc(tank.x 15,tank.y 10,4,0,360,true); <br>cxt.fill(); <br>//Draw the barrel (straight line) <br>cxt.strokeStyle=tank.color[1]; <br>//Set the width of the line<br>cxt.lineWidth=1.5; <br>cxt.beginPath(); <br>cxt.moveTo(tank. x 15,tank.y 10); <br>//To the right<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 .stroke(); <br>break; <br>} <br>} <br>声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。