HTML5 は古典的な戦車戦を実現し、戦車が動き回って Bullet_html5 チュートリアル スキルを発射できます。

コードをコピー

コードは次のとおりです:

tank.html

 <br> ><meta charset="utf-8"> <br> <br><h1>hmtl5-クラシック タンク バトル <br> <br><canvas id="tankMap" width="400px" height="300px" style="background-color:black "> <br><span id="aa">data</span> <br><!--tankGames.js をこのページに紹介します--> <br> <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<3) を作成します。 ;i ){ <br />//戦車を作成します<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); ></script></canvas>
</h1>