JavaScript で戦車戦の全記録を作成する (1)_JavaScript スキル

追記: この戦車戦は、オンラインでソース コードをダウンロードした後、自分で書き直しました。それ自体はそれほど難しいものではありません。このケースは js オブジェクト指向をより適切に使用しており、js オブジェクト指向の入門チュートリアルとして使用できます。

1. 戦車の簡単な動きを実現するための基本オブジェクトを作成します

1.1 地図にキャンバスを描画するには?

ブラウザの互換性の問題を考慮して、ゲームオブジェクトの描画と更新を実現するために dom を操作する方法を使用します。地図をどのように保存すればよいでしょうか? マップを 2 次元配列で保存する必要があります。js には 2 次元配列はありませんが、配列を 1 次元配列に保存することで実現できます。

1.2 コードの実装

キャンバスを 13 * 13 の 2 次元配列として設計します。マップ内の各要素の対応する長さと幅は両方とも 40 ピクセルです。マップ全体は 40 ピクセル * 40 ピクセル x サイズで構成されるセルとみなすことができます。テーブルの場合、キャンバス全体のサイズは 520px * 520px になります。
コードをロードする前に、オブジェクト関係図を示します。

1.2.1 最上位オブジェクトの作成

HTML コード:

コードをコピーします コードは次のとおりです:

window.onload = function () {
// ゲーム読み込みオブジェクトを呼び出します
varloader = new GameLoader();
Loader.Begin();
}