コメント：前の記事では、HTML5を使用してモバイルの小さなタンクを実装する方法を紹介しました。この記事では、あなたを戦車戦争に導きます。 HTML5が好きな友達は見逃すべきではありません。
<pre> tank.html </pre> <pre> <！doctype html>
<html>
<head>
<Meta charset = "utf-8"/>
</head>
<body onkeydown = "getCommand（）;">
<H1> HMTL5-Classic Tank War </h1>
<！ - 戦車戦争の戦場 - >
<canvas> </canvas>
<span>データ</span>
<！ - tankgames.jsをこのページに紹介します - >
<script type = "text/javascript" src = "tank.js"> </script>
<script type = "text/javascript">
//キャンバスを取得します
var canvas1 = document.getElementById（ "tankmap"）;
//描画コンテキストを取得します（ブラシとして理解できます）
var cxt = canvas1.getContext（ "2d"）;
//私のタンクヒーロー
//方向
Var Hero = New Hero（140,140,0、Herocolor）;
//空の弾丸を定義します
var herobullet = null;
//敵のタンクを定義します（敵の戦車はいくつありますか？それは単一の定義ですか、それとも配列に入れますか？）
var Enemytanks = new Array（）;
//最初に死んでから、3を設定し、3を設定し、次に敵タンクの数の変数を作成します。
// 0->アッパー、1->右、2->ダウン3->左
for（var i = 0; i <3; i ++）{
//タンクを作成します
var Enemytank = new Enemytank（（i+1）*50,0,2、Enmeycolor）;
//このタンクを配列に入れます
Enemytanks [i] = emenytank;
}
//一度呼び出します
FlashTankMap（）;
//戦闘ゾーンを定期的に更新し、戦闘ゾーンに表示する要素を含めるための特別な機能を作成します（独自のタンク、敵のタンク、弾丸、爆弾、
//obstructions...)->ゲームの思考
関数flashtankmap（）{
//キャンバスのクリーニング
cxt.ClearRect（0,0,400,300）;
//私のタンク
drawtank（ヒーロー）;
//独自の弾丸を描きます
//弾丸の飛行効果はどのように現れますか？ [回答：まず、特定の時間ごとに戦闘ゾーンを更新する必要があります（setinterval）。弾丸の座標がリフレッシュすると変化した場合、弾丸座標は人々に弾丸が飛んでいるという感覚を与えます！]
drawherobullet（）;
//敵のタンク
//すべての敵タンクを描きます
for（var i = 0; i <3; i ++）{
drawtank（emenytanks [i]）;
}
}
//これは、ユーザーキーストロークを受け入れる関数です
関数getCommand（）{
//プレーヤーがどのキーを押すかを知るにはどうすればよいですか
//命令：イベントオブジェクト------->イベントハンドラーfunction（）
var code = event.keycode; //対応する文字のASCIIコード - >コードテーブルを見てみましょう
switch（code）{
ケース87：//オン
hero.moveup（）;
壊す;
ケース68：
hero.moveright（）;
壊す;
ケース83：
hero.movedown（）;
壊す;
ケース65：
hero.moveleft（）;
壊す;
ケース74：
Hero.Shotenemy（）;
壊す;
}
//この関数trigger flashtankMap（）;
FlashTankMap（）;
//すべての敵タンクを塗り直します。ここにコードを書くことができます（キャンバスを定期的に更新する専用の関数を持ってみましょう[戦争ゾーン]）
}
// 100ミリ秒ごとに戦闘ゾーンを更新します
window.setInterval（ "FlashTankMap（）"、100）;
</script>
</body>
</html> </pre>
tank.js
<pre> </pre>
<pre> <pre> //プログラミングの利便性については、2つのカラー配列を定義します
var herocolor = new Array（ "＃ba9658"、 "＃fef26e"）;
var enmeycolor = new Array（ "＃00A2B5"、 "＃00FEFE"）;
//ここでの他の敵の戦車の拡張は非常に良いです。
//弾丸
function Bullet（x、y、direct、speed）{
this.x = x;
this.y = y;
this.direct = direct;
this.speed = speed;
this.timer = null;
this.islive = true;
this.run = function run（）{
//この弾丸の座標が表示されたとき、最初に弾丸が境界に達したかどうかを判断します
if（this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300）{
//弾丸は停止する必要があります。
window.clearinterval（this.timer）;
//弾丸が死んだ
this.islive = false;
}それ以外{
//これを使用して座標を変更できます
switch（this.direct）{
ケース0：
this.y- = this.speed;
壊す;
ケース1：
this.x+= this.speed;
壊す;
ケース2：
this.y+= this.speed;
壊す;
ケース3：
this.x- = this.speed;
壊す;
}
}
document.getElementById（ "aa"）。innertext = "bullet x ="+this.x+"bullet y ="+this.y;
}
}
//これはタンククラスです
関数タンク（x、y、direct、color）{
this.x = x;
this.y = y;
this.speed = 1;
this.direct = direct;
//タンクには2色が必要です。
this.color = color;
//上に移動します
this.moveup = function（）{
this.y- = this.speed;
this.direct = 0;
}
//右の方へ
this.moveright = function（）{
this.x+= this.speed;
this.direct = 1;
}
//下に移動します
this.movedown = function（）{
this.y+= this.speed;
this.direct = 2;
}
//左
this.moveleft = function（）{
this.x- = this.speed;
this.direct = 3;
}
}
//ヒーロークラスを定義します
// xはタンクの水平座標を表し、yは垂直座標、直接方向を表します
関数ヒーロー（x、y、direct、color）{
//次の2つの文の目的は、オブジェクトのなりすましを通じて継承の効果を達成することです
this.tank = tank;
this.tank（x、y、direct、color）;
//関数を追加して敵のタンクを撃ちます。
this.shotenemy = function（）{
//弾丸を作成すると、弾丸の位置はヒーローとヒーローの方向に関連する必要があります... !!!
//this.xは、現在のヒーローの水平座標です。ここでは、単に処理します（洗練）
switch（this.direct）{
ケース0：
herobullet = new Bullet（this.x+9、this.y、this.direct、1）;
壊す;
ケース1：
herobullet = new Bullet（this.x+30、this.y+9、this.direct、1）;
壊す;
ケース2：
herobullet = new Bullet（this.x+9、this.y+30、this.direct、1）;
壊す;
ケース3：//右
herobullet = new Bullet（this.x、this.y+9、this.direct、1）;
壊す;
}
//弾丸の実行を呼び出すと、50は教師の複数のテストによって得られた結論です。
var timer = window.setinterval（ "herobullet.run（）"、50）;
//このタイマーをこの弾丸に割り当てます（JSオブジェクトは参照パスです！）
herobullet.timer =タイマー;
}
}
// EnemyTankクラスを定義します
function Enemytank（x、y、direct、color）{
//オブジェクトになりすましてタンクを継承します
this.tank = tank;
this.tank（x、y、direct、color）;
}
//独自の弾丸を描き、もう1つ言って、機能をヒーロークラスにカプセル化することもできます
関数drawherobullet（）{
//ここに文章を追加しましたが、ここに追加するにはプログラム全体を確認する必要があることを知る必要があります
if（herobullet！= null && herobullet.islive）{
cxt.fillstyle = "＃fef26e";
cxt.fillrect（herobullet.x、herobullet.y、2,2）;
}
}
//タンクを描きます
関数drawtank（タンク）{
//方向を検討してください
switch（tank.direct）{
ケース0：//オン
ケース2：//ダウン
//独自のタンクを描き、以前の描画手法を使用します
//色を設定します
cxt.fillstyle = tank.color [0];
//先生のハンは最初に死を使用します--->そしてライブ（初心者に最適です）
//最初に左側の長方形を描画します
cxt.fillrect（tank.x、tank.y、5,30）;
//右側の長方形を描画します（この時点で考えてください - >基準点を必ず持ってください）
cxt.fillrect（tank.x+15、tank.y、5,30）;
//中央の長方形を描きます
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（）;
壊す;
ケース1：//右と左
ケース3：
//独自のタンクを描き、以前の描画手法を使用します
//色を設定します
cxt.fillstyle = tank.color [0];
//先生のハンは最初に死を使用します--->そしてライブ（初心者に最適です）
//最初に左側の長方形を描画します
cxt.fillrect（tank.x、tank.y、30,5）;
//右側の長方形を描画します（この時点で考えてください - >基準点を必ず持ってください）
cxt.fillrect（tank.x、tank.y+15,30,5）;
//中央の長方形を描きます
cxt.fillrect（tank.x+5、tank.y+6,20,8）;
//タンクカバーを描きます
cxt.fillstyle = tank.color [1];
cxt.arc（tank.x+15、tank.y+10,4,0,360、true）;
cxt.fill（）;
//大砲を描く（直線）
cxt.strokestyle = tank.color [1];
//行の幅を設定します
cxt.linewidth = 1.5;
cxt.beginpath（）;
cxt.moveto（tank.x+15、tank.y+10）;
//右の方へ
if（tank.direct == 1）{
cxt.lineto（tank.x+30、tank.y+10）;
} else if（tank.direct == 3）{//左に
cxt.lineto（tank.x、tank.y+10）;
}
cxt.closepath（）;
cxt.stroke（）;
壊す;
}
}
</pre>
<pre> </pre>
</pre>