以前、MOOC で Canvas ビデオを数エピソード見たことがあり、何かを書く練習をしたいと常々思っていました。 Snake は比較的簡単な気がします。私も学生時代に C 言語の文字版を書きましたが、それでも意外と問題が多かったです。
最終的な効果は以下の通りです（画像が大きすぎると時間がかかりすぎます。GIFを録画するソフトウェアには時間制限があります...）
ゲームエリアを定義することから始めます。 Snake の画面上の要素は蛇の体とリンゴの 2 つだけで、どちらも正方形のグリッドで構成できます。正方形の間に隙間を追加します。なぜギャップを追加するのでしょうか?すべてのグリッドをうまく埋めると、隙間がなければ大きな四角形になることが想像できます... ヘビの体がどのように見えるかはわかりません。
絵を描きます。
グリッドの左上隅の座標は (0, 0) で、横軸は右に行くほど増加し、縦軸は下に行くほど増加します。この方向はCanvasと同じです。
グリッドを描画するときは常に、キャンバスの左上隅の座標が (0, 0) であることを知っている必要があります。グリッドの辺の長さを GRID_WIDTH とします。ギャップのギャップは GAP_WIDTH です。(i, j) 番目のグリッドの左上隅の座標 (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH、 j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) 。
ヘビの体が 3 つの青いグリッドで構成されていると仮定します。3 つのグリッドだけでなく、2 つの紫のギャップも描くことはできません。前述のように、ヘビの体がどのように見えるかがわかりません。下の写真のように、隙間を描かずにプレイすることはできますが、体験は明らかに異なります。
ギャップを描画せずに、隣接するグリッド間のギャップを描画します
今度はヘビを描いてみましょう。ヘビの本体は実際にはグリッドの集合であり、各グリッドは 2 つの位置情報を含む配列で表されます。ヘビ全体は 2 次元配列で表すことができます。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>blog_snack</title> <style> #canvas {background-color: #000; </style></ head><body> <canvas id=canvas></canvas> <script> const GRID_WIDTH = 10 // グリッドの辺の長さ const GAP_WIDTH = 2; // ギャップの辺の長さ const ROW = 10 // グリッドの合計行数と各行のグリッド数 let Canvas = document.getElementById('canvas'); = GRID_WIDTH * ROW + GAP_WIDTH * ( ROW + 1); Canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1); = Canvas.getContext('2d'); スナック = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // 1 を初期化します。