PS：このタンクバトルは、オンラインおよびオフラインのソースコードの後に書き直しました。それ自体が難しいことはありません。このケースでは、JSオブジェクト指向を使用します。これは、JSオブジェクト指向の入門チュートリアルとして使用できます。
1.タンクの単純な動きを実現するための基本的なオブジェクトを作成する
1.1マップにキャンバスを描く方法は？
ブラウザの互換性の問題を考慮して、DOMを使用してゲームオブジェクトを描画および更新します。マップをどのように保存しますか？マップを2次元配列として保存する必要があります。 JSには2次元配列はありませんが、配列を1次元配列に保存することで実現できます。
1.2コード実装
キャンバスを13 * 13の2次元配列として設計します。各要素は、マップに対応する長さと幅を持っています。マップ全体を40px * 40pxサイズのセルで構成されるテーブルと見なすことができます。そのため、キャンバス全体のサイズは520px * 520pxです。
コードを入力する前に、オブジェクト関係図を付けます。
1.2.1トップレベルオブジェクトの作成
HTMLコード：
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd html 4.0 transitional // en">
<html>
<head>
<title>タンク戦争</title>
<link rel = styleSheet href = "css /main.css" />
<スクリプトsrc = "js/common.js"> </script>
<スクリプトsrc = "js/tankobject.js"> </script>
<スクリプトsrc = "js/mover.js"> </script>
<スクリプトsrc = "js/tank.js"> </script>
<スクリプトsrc = "js/frame.js"> </script>
<スクリプト>
window.onload = function（）{
//ゲームの読み込みオブジェクトを呼び出します
var loader = new Gameloader（）;
roader.begin（）;
}
</script>
</head>
<body>
<！ - マップコンテナ - >
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</body>
</html>
tankobject.jsファイル：
コードコピーは次のとおりです。
//トップレベルオブジェクト
tankObject = function（）{
this.xposition = 0; //マップ内のxのオブジェクトの位置（13*13）
this.yposition = 0;
this.ui = null; // dom Element
}
// UI静的メソッドを変更します
tankobject.prototype.updateui = function（battlfiled）{}
//位置を設定すると、パラメーターは次のとおりです。1*40、6*40
tankobject.prototype.setposition = function（leftposition、topposition）{
//マップの位置Math.Roundの丸
this.xposition = math.round（leftposition / 40）;
this.yposition = math.round（topposition / 40）;
//フォームの位置を設定します
if（this.ui！= null && this.ui.style！= null）{
this.ui.style.left = leftposition + "px";
this.ui.style.top = topposition + "px";
}
}
ここでは、XおよびY座標を使用して、マップ上のオブジェクトの位置を表します。その後、各オブジェクトをマップ内に2次元配列に入れ、この時点でxおよびy座標を介して対応するオブジェクトを取得できます。
次に、CSSで左と上部を使用して、フォームのオブジェクトの位置を制御します。 （タイプ可能なオブジェクト：タンク、弾丸）
1.2.2パブリックオブジェクトの作成
また、一般的に使用される方法のいくつかを記述するために、公開オブジェクトを作成する必要があります。
common.js：
コードコピーは次のとおりです。
//タンクの動きの4つの方向
var enumdirection = {
アップ： "0"、
右： "1"、
ダウン： "2"、
左： "3"
};
//一般的なメソッドオブジェクト
varutilityclass = {
// dom要素をparentnodeに作成し、idとclassnameを指定します
作成者：function（type、id、classname、parentnode）{
var j = document.createelement（type）;
if（id）{j.id = id};
if（className）{j.className = className};
parentNode.AppendChild（J）を返します。
}、//要素を削除します
removee：function（obj、parentnode）{
parentNode.RemoveChild（OBJ）;
}、
getFunctionName：function（context、argumentcallee）{
for（var i in context）{
if（context [i] == argumentcallee）{return i};
}
戻る "";
}、//イベントにバインドして、FUNCメソッドを返してください、これは渡されたOBJです
bindfunction：function（obj、func）{
return function（）{
func.apply（obj、arguments）;
};
}
};
1.2.3移動オブジェクトの作成
Mover.js
コードコピーは次のとおりです。
//オブジェクトを移動し、トップレベルのオブジェクトから継承します
mover = function（）{
this.direction = enumdirection.up;
this.speed = 1;
}
mover.prototype = new TankObject（）;
mover.prototype.move = function（）{
if（this.lock）{
return;/*非アクティブ化またはまだ進行中、操作は無効です*/
}
//方向に従ってタンクの背景画像を設定します
this.ui.style.backgroundposition = "0-" + this.direction * 40 + "px";
//方向が上下している場合、VPはトップです。方向が上がって左にある場合、ヴァルは-1です
var vp = ["top"、 "left"]]] 0：1];
var val =（（this.direction == enumdirection.up）||（this.direction == enumdirection.left）？）？ -1：1;
this.lock = true;/* lock*/
//現在のオブジェクトをこれに保存します
var this = this;
//オブジェクトの動きを録音してください位置を開始します
var startmovep = parseint（this.ui.style [vp]）;
var xp = this.xposition、yp = this.yposition;
var submove = setInterval（function（）{
//毎回5px、移動を開始します
this.ui.style [vp] = parseint（this.ui.style [vp]） + 5 * val + "px";
//セルあたり40px
if（math.abs（（parseint（this.ui.style [vp]））> = 40）{
ClearInterval（submove）;
this.lock = false;/*ロック解除、再びステッピングを許可します*/
//テーブルが移動した後、オブジェクトの位置を記録します
this.xposition = math.round（this.ui.offsetleft / 40）;
this.yposition = math.round（this.ui.offsettop / 40）;
}
}、80 -this.speed* 10）;
}
ここの移動オブジェクトは、トップレベルのオブジェクトから継承され、これは移動メソッドを呼び出すオブジェクトを表します。
移動オブジェクトの関数は、オブジェクトの方向と速度に従って移動します。 5pxを移動するたびに、合計40px 1セルを移動します。オブジェクトは後で拡張され、衝突検出とその他の機能が追加されます。
1.2.4タンクオブジェクトの作成
tank.jsファイル：
コードコピーは次のとおりです。
//タンクオブジェクトはムーバーから継承します
tank = function（）{}
tank.prototype = new Mover（）;
//タンクオブジェクトから継承するプレーヤータンクを作成します
selftank = function（）{
this.ui = utilityclass.createe（ "div"、 ""、 "itank"、document.getElementById（ "divmap"））;
this.movingState = false;
this.speed = 4;
}
selftank.prototype = new Tank（）;
//タンクの位置を設定します
selftank.prototype.updateui = function（）{
this.ui.classname = "itank";
//トップオブジェクトメソッド、タンクの位置を設定します
this.setposition（this.xposition * 40、this.yposition * 40）;
}
現在、プレイヤータンクのみが作成されており、後で敵のタンクを追加します。
1.2.5ゲームロードオブジェクト（コア）を作成する
コードコピーは次のとおりです。
//ゲームは、ゲーム全体のコアオブジェクトのオブジェクトをロードします
gameloader = function（）{
this.mapcontainer = document.getElementById（ "divmap"）; //ゲームマップを保存するdiv
this._selftank = null; //プレーヤータンク
this._gameListener = null; //ゲームのメインループタイマーID
}
gameloader.prototype = {
begin：function（）{
//プレーヤータンクを初期化します
var selft = new selftank（）;
selft.xposition = 4;
selft.yposition = 12;
selft.updateui（）;
this._selftank = selft;
//キーイベントを追加します
var warpper = utilityclass.bindfunction（this、this.onkeydown）;
window.onkeydown = document.body.onkeydown = warpper;
warpper = utilityclass.bindfunction（this、this.onkeyup）;
window.onkeyup = document.body.onkeyup = warpper;
//ゲームのメインループ
warpper = utilityclass.bindfunction（this、this.run）;
/*長いタイマー監視制御キー*/
this._gameListener = setInterval（warpper、20）;
}
//キーボードのプレーヤータンクを押して移動を開始します
、onkeydown：function（e）{
switch（（window.event || e）.keycode）{
ケース37：
this._selftank.direction = enumdirection.left;
this._selftank.movingState = true;
壊す; //左
ケース38：
this._selftank.direction = enumdirection.up;
this._selftank.movingState = true;
壊す; //の上
ケース39：
this._selftank.direction = enumdirection.right;
this._selftank.movingState = true;
壊す; //右
ケース40：
this._selftank.direction = enumdirection.down;
this._selftank.movingState = true;
壊す; //次
}
}
//ボタンがポップアップし、移動を停止します
、onkeyup：function（e）{
switch（（window.event || e）.keycode）{
ケース37：
ケース38：
ケース39：
ケース40：
this._selftank.movingState = false;
壊す;
}
}
/*ゲームのメインループ実行機能、ゲームの中心、ハブ*/
、run：function（）{
if（this._selftank.movingState）{
this._selftank.move（）;
}
}
};
オブジェクトコードをロードするゲームは非常によく見えますが、実際、2つのことしかありません。
1.プレーヤータンクオブジェクトを作成します。
2.キーモニタリングイベントを追加します。プレーヤーがモバイルキーを押したら、タンク移動方法を呼び出してタンクを移動します。
概要：この時点で、ボタンを押すとタンクが自由に移動できます。次のステップでは、マップと衝突検出を改善する必要があります。