JavaScriptの「ヘビ」ゲーム：ブラウザでの最初のゲームプロジェクト

スタート画面とインターフェースのレイアウト

これは、開始、ゲーム、ゲームオーバーの3つの状態を作成する最小限のHTMLです。さらに、スコアとゲームボードもあります。

<div id="startScreen">
  <h1>🐍 Змейка</h1>
  <button onclick="startGame()">Начать игру</button>
</div>

<div id="gameOverScreen" style="display:none">
  <h1>💀 Игра окончена!</h1>
  <p id="finalScore"></p>
  <button onclick="location.reload()">Играть снова</button>
</div>

<h1 id="score">Очки: 0</h1>
<canvas id="game" width="320" height="320"></canvas>
    

ここで起こっていること：

• #startScreenはウェルカム画面です。ボタンは関数 startGame() を呼び出します。

• #gameOverScreen — スネークが自分自身または境界線と衝突した後に表示されます。

• #score — 現在のポイントを表示します。

• <canvas> ― 画面上にヘビと食べ物が表示されるゲームフィールド。

  

用語集のクイックガイド 👇

• Canvas — 2D描画用のHTML要素。JavaScriptを使用すると、正方形、線、図形を手動で描画できます。

• グリッド（グリッド） — フィールドは等しい正方形に分割されます (たとえば、16×16 ピクセル)。スネークと食べ物のすべての座標は、セルを介して表現されます。

• ゲームループ — ゲームの状態を定期的に更新し、フィールドを再描画する機能。

• 衝突 —ヘビが自分自身や境界にぶつかったり、食べ物を食べたりしていないかどうかを確認します。

• 状態 — 変数のセット：座標、移動方向、スコア、ステータス（ゲーム進行中または終了）。

ゲームを活気づける方法：JavaScriptのロジック？

スネークの動きを制御し、衝突をチェックし、各フレームを描画するスクリプトを追加します。

1. 初期化: canvasとコンテキスト2dを作成し、セルのサイズとスネークセグメントの配列を決定します。

2. コントロール： ArrowUp、ArrowDown、ArrowLeft、ArrowRightのキー押下を追跡します。

3. ゲームのサイクル： 150ミリ秒ごとにスネークを移動し、衝突をチェックし、スコアを更新します。

4. レンダリング: フィールドをクリアして、食べ物とスネークセグメントを再度描画します。

💡ヒント： requestAnimationFrame を使用してスムーズにし、累積タイマーを介して動きの頻度を調整します。

改善のためのアイデア。

• スピードアップを追加すると、レベルが上がるごとにゲームが難しくなります。

• フィールドの端に「テレポート」を作って、スネークが反対側から出てくるようにします。

• 記録は localStorage に保存します。

• 明るいテーマと暗いテーマを追加します。

• PキーまたはEscキーで一時停止を実装します。

「スネーク」ゲームの作成は、JavaScriptを学ぶための素晴らしい第一歩です。canvasとループの操作を学ぶだけでなく、ゲームロジックの基本である動き、衝突、状態、インターフェースの更新についても理解できます。

プロジェクト 「ヘビ」 — アプリのミニプロジェクトの一部 コディック、特に初心者向けに作成されています。これは、JavaScriptの基本を理解し、ゲームロジックの仕組みを理解し、コードがブラウザでどのように動作するかを確認するのに役立ちます。

B コディケ シンプルなゲームからインターフェースとロジックを備えた小さなアプリケーションまで、数十の同様のプロジェクトがあなたを待っています。それぞれのプロジェクトは、自信を持って興味を持ってコードを書くことを学ぶための一歩です。

そして、私たちは居心地の良い Telegramコミュニティ、私たちは互いに助け合い、アイデアを共有し、プログラミングについて話し合います。参加してください。楽しいことがたくさんあります！ 🚀

👉 当社のコミュニティ： https://t.me/coursme