HTML5 でスネーク ゲームを作成する

この記事では主に H5 キャンバスでの Snake ゲームの実装を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者と一緒に見に来てください

この記事では、H5 Canvas での Snake ゲームの実装を紹介し、皆さんと共有します。詳細は次のとおりです:

実装の効果は次のとおりです

。

実装アイデア:

ps: これは単なるアイデアです。詳細についてはコードのコメントを参照してください

まず、ヘビを描画します

1. ヘビの構造を定義し、配列を使用して束を保存しますヘビの頭 (赤) とヘビの体 (グレー) を含む長方形の。

2. ヘビの描き方（初期状態）

2.ヘビが動かせる（要所）

1. ヘビの動き方：最初から最後までヘビの頭だけが動いています

1. 灰色の四角形を描きます。位置はスネークヘッドが重なる位置です

2. このブロックをスネークヘッドの1つ後ろの配列に挿入しますarrar.splice(0,1,rect)

3. 最後のブロック配列を切り取ります.pop()

4. スネークヘッドをセットに移動します 固定方向に 1 つのグリッドを移動するには

2. 方向を保存するには変数 (方向) が必要です

3. 方向に従って移動し、1 つのグリッドを移動します一度に

4. ボタンに従って方向を変えます

3. 食べ物をランダムに配置します

1. 食べ物の位置をランダムにする必要があります

2. 食べ物がヘビの上にあるかどうかを判断する必要があります。

4. 食べ物を食べる

1. 食べ物が蛇の頭と重なっているかどうかを判断します

2. 配列に要素を追加します（要素を 1 つ減らすことは、要素を 1 つ追加することを意味します）

3. 新しい食べ物を生成する

5. ゲームオーバー

1. 壁を叩いて判断

2. 自分で判断するふりをしてください
   

以上がHTML5 でスネーク ゲームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。