HTML5 は古典的な戦車戦を実現し、戦車が動き回って Bullet_html5 チュートリアル スキルを発射できます。
コードをコピー
コードは次のとおりです:1 |
|
<!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
コードをコピー
コードは次のとおりです:
1 |
|
<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>1 |
|
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7505
15
7505
15
CakePHP チュートリアル
1378
52
1378
52
Steamのアカウント名の形式は何ですか
78
11
78
11
NYTの接続はヒントと回答です
19
55
19
55
H5プロジェクトの実行方法
Apr 06, 2025 pm 12:21 PM
H5プロジェクトを実行するには、次の手順が必要です。Webサーバー、node.js、開発ツールなどの必要なツールのインストール。開発環境の構築、プロジェクトフォルダーの作成、プロジェクトの初期化、コードの書き込み。開発サーバーを起動し、コマンドラインを使用してコマンドを実行します。ブラウザでプロジェクトをプレビューし、開発サーバーURLを入力します。プロジェクトの公開、コードの最適化、プロジェクトの展開、Webサーバーの構成のセットアップ。
H5ページの生産とはどういう意味ですか？
Apr 06, 2025 am 07:18 AM
H5ページの制作とは、HTML5、CSS3、JavaScriptなどのテクノロジーを使用したクロスプラットフォーム互換のWebページの作成を指します。そのコアは、ブラウザの解析コード、レンダリング構造、スタイル、インタラクティブ機能にあります。一般的なテクノロジーには、アニメーションエフェクト、レスポンシブデザイン、およびデータ相互作用が含まれます。エラーを回避するには、開発者をデバッグする必要があります。パフォーマンスの最適化とベストプラクティスには、画像形式の最適化、リクエスト削減、コード仕様などが含まれ、読み込み速度とコード品質を向上させます。
H5のクリックアイコンの作成方法
Apr 06, 2025 pm 12:15 PM
H5クリックアイコンを作成する手順には、次のものがあります。画像編集ソフトウェアで正方形のソース画像の準備が含まれます。 H5エディターにインタラクティブ性を追加し、クリックイベントを設定します。アイコン全体をカバーするホットスポットを作成します。ページにジャンプしたり、アニメーションのトリガーなど、クリックイベントのアクションを設定します。 HTML、CSS、およびJavaScriptファイルとしてH5ドキュメントをエクスポートします。エクスポートされたファイルをウェブサイトまたは他のプラットフォームに展開します。
Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか？
Mar 18, 2025 pm 02:16 PM
この記事では、Geolocation APIを使用してユーザーの場所のプライバシーと許可を管理し、アクセス許可を要求するためのベストプラクティスを強調し、データセキュリティを確保し、プライバシー法を遵守することについて説明します。
H5とミニプログラムとアプリの違い
Apr 06, 2025 am 10:42 AM
H5。ミニプログラムとアプリの主な違いは次のとおりです。技術アーキテクチャ：H5はWebテクノロジーに基づいており、ミニプログラムとアプリは独立したアプリケーションです。経験と機能：H5は軽量で使いやすく、機能が限られています。ミニプログラムは軽量で、インタラクティブが良好です。アプリは強力で、スムーズな経験があります。互換性：H5はクロスプラットフォーム互換性があり、アプレットとアプリはプラットフォームによって制限されています。開発コスト：H5には、開発コストが低く、中程度のミニプログラム、最高のアプリがあります。適用可能なシナリオ：H5は情報表示に適しており、アプレットは軽量アプリケーションに適しており、アプリは複雑な機能に適しています。
H5ページの生産に適したアプリケーションシナリオ
Apr 05, 2025 pm 11:36 PM
H5（HTML5）は、マーケティングキャンペーンページ、製品ディスプレイページ、企業プロモーションマイクロウェブサイトなどの軽量アプリケーションに適しています。その利点は、クロスプラットフォームと豊富な対話性にありますが、その制限は複雑な相互作用とアニメーション、ローカルリソースアクセス、オフライン機能にあります。
H5プログラミング言語とは何ですか？
Apr 03, 2025 am 12:16 AM
H5はスタンドアロンプログラミング言語ではなく、最新のWebアプリケーションを構築するためのHTML5、CSS3、およびJavaScriptのコレクションです。 1。HTML5は、Webページの構造とコンテンツを定義し、新しいタグとAPIを提供します。 2。CSS3はスタイルとレイアウトを制御し、アニメーションなどの新しい機能を紹介します。 3. JavaScriptは動的な相互作用を実装し、DOM操作と非同期要求を通じて機能を強化します。
インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか？
Mar 18, 2025 pm 02:17 PM
この記事では、HTML5ドラッグアンドドロップAPIを使用してインタラクティブなユーザーインターフェイスを作成し、要素をドラッグ可能にし、キーイベントを処理し、カスタムフィードバックを使用してユーザーエクスペリエンスを強化する手順を作成する方法について説明します。また、aへの一般的な落とし穴についても説明します
