JS 実用的なオブジェクト指向スネークゲームの例

JS 実用的なオブジェクト指向スネークゲームの例

考える

最初のステップは、ヘビがいくつの部分に分かれているか、ヘビの頭と体がどのように形成されているかを考えることです。

2 番目のステップは、ヘビがどのように動くか、つまりキーボードを通じてヘビの方向を制御する方法について考えることです。

3 番目のステップは、どのような状況でゲームが終了するかを考えることです。

4 番目のステップは、食べ物がどのように生産されるか、そしてその生産場所とヘビの位置の間でどのような点に注意を払う必要があるかを考えることです。

5 番目のステップは、ヘビがどのように食べ物を食べるかを考えることです。食べた後、ヘビの体は長くなり、新しい食べ物が生成されます。

ステップ 6 を完了したら、さらに数回プレイして、作業の成果を楽しんでください。 ! ! !

1. 貪欲な蛇の効果画像

2. スネークの分析

2.1 ゲーム開始機能

ユーザーがゲームのメインインターフェースに入ると、インターフェースの中央下部の目立つ位置に「開始」ボタンがあります。このボタンをクリックすると、新しいゲームを開始できます。ボタン変数を取得し、addEventListener('click', function() {}) クリック イベントを追加します。

btnstart.addEventListener('click', 関数() {
     btnstart.style.display = 'なし';
     //中間クラスを呼び出す game = new Game();
     var テーブル = document.querySelector('テーブル');
     table.addEventListener('クリック', 関数() {
        //タイマーをクリアする clearInterval(game.timer);
        btnstop.style.display = 'ブロック';
     })
});

2.2 運動機能

2.2.1 さまざまな方向へのヘビの動き

ユーザーが「ゲームを開始」ボタンをクリックすると、デフォルトではヘビは左から右に移動します。

//現在の方向は willDirection を受け入れます。 ! !
this.direction = this.willDirection;
 
// 異なる方向へのスネークの動き switch (this.direction) {
     ケース「R」:
            //右に移動 this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col + 1 });
            壊す;
     ケース「D」:
            //下へ移動 this.body.unshift({ "row": this.body[0].row + 1, "col": this.body[0].col });
            壊す;
     ケース「L」:
            //左に移動 this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col - 1 });
            壊す;
     ケース「T」:
            //上に移動 this.body.unshift({ "row": this.body[0].row - 1, "col": this.body[0].col });
            壊す;
}

2.2.2 キーボードコントロール方向移動機能

ユーザーはキーボードの上下左右の方向キーを使用してヘビの移動方向を制御でき、ヘビは制御された方向に直線的に移動します。

Game.prototype.bindEvent = 関数() {
    var self = this;
    //キーボードイベント document.onkeydown = function(e) {
        スイッチ (e.keyCode) {
            //左ボタンを押すケース37:
                //まず判断します(現在の方向が右に移動している場合、この時点では左ボタンを押すことはできません)
                self.snake.direction == 'R' の場合、戻り値:
                // self.snake.direction = 'L';
                方向をLに変更します。
                self.d = "L";
                壊す;
                //上キーを押す case 38:
                self.snake.direction == 'D' の場合、戻り値:
                方向を変更します。
                自己.d = "T";
                壊す;
                //右キーを押すケース39:
                self.snake.direction == 'L' の場合、戻り値:
                方向を変更します。
                self.d = "R";
                壊す;
                //キーケース40を押します:
                self.snake.direction == 'T' の場合、戻り値:
                方向変更('D')
                self.d = "D";
 
                壊す;
        }
 
    }
 
};

2.3 食物を食べる機能

2.3.1 食料生産

食べ物の場所: ヘビの行と列をトラバースし、ランダムに生成された行と列と重なるかどうかを判断します。

var self = this; //ウィンドウを参照
    //次の do-while ループ ステートメントは、最初に行と列を作成し、次にそれがスネーク上にあるかどうかを判断するために使用されます。
        //食べ物の場所 this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
    } while ((関数() {
        // ヘビの行と列を走査し、ランダムに生成された行と列と重なるかどうかを判断します for (var i = 0; i < gameSnake.snake.body.length; i++) {
        gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) の場合 {
             true を返します。
          }
       }
       false を返します。
})());

2.3.2 食べ物を食べる過程

食べ物がインターフェース上のどこかに現れると、ユーザーは方向キーを使ってヘビを操作し、食べ物の周りを移動させます。ヘビの頭が食べ物に触れると、貪欲なヘビが食べ物を食べたことを意味します。次の食べ物がインターフェース上の任意の場所に現れ、ユーザーはヘビを操作してこの食べ物をもう一度食べさせます。

//現在のヘビの頭が餌と重ならない場合は、餌が食べられていないことを意味し、この時点で尻尾は削除されます。
this.body[0].row == game.food.row && this.body[0].col == game.food.col) の場合 {
      // 重なっている場合は、食べられたことを意味します。尻尾は削除されず、頭のみが追加されます。 // 新しい食べ物を作成します。game.food = new Food(game);
      // ヘビがジャンプして餌を食べてポイントを追加するので、フレーム番号を 0 にリセットします。game.score++;
      ゲーム.f = 0;
} それ以外 {
      this.body.pop();
}

2.4 死亡判定機能

蛇の頭が前方の壁にぶつかったり、蛇の頭が蛇の体を食べたりすると、死亡判定が下され、ユーザーのゲームスコアにポップアップボックスが表示されます。

2.4.1 エッジデスジャッジメント(壁に当たる)

this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) の場合 {
        // 右下左上のアラート('ゲームは終了しました。現在の合計スコアは:' + game.score + 'points');
        this.body.unshift();
        ゲームのタイマーをクリアします。
}

2.4.2自分を殴る

(var i = 1; i < this.body.length; i++) {
    this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row)の場合{
        alert('ゲームは終了しました。現在の合計スコアは:' + game.score + 'points');
        ゲームのタイマーをクリアします。
    }
}

2.5 ゲームの一時停止/再開機能

btnstop.addEventListener('click', 関数() {
    btnstop.style.display = 'なし';
    game.timer = setInterval(function() {
    // タイマーの核はゲーム レンダリングの本質です。画面をクリア - 更新 - レンダリング game.f++;
    // 画面をクリアします game.clear();
    // スネークの動き/更新 // スネークの更新速度 スネーク側が長いほど速度が上がります var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
    // Snake 更新 game.f % during == 0 && game.snake.update();
    // ヘビをレンダリングします game.snake.render();
    // 食べ物をレンダリングする game.food.render();
    }, 20);
})

要約する

スネークゲーム プロジェクトでは、アイデアを整理する必要があります。

これで、JS での実用的なオブジェクト指向スネーク ゲームの例に関するこの記事は終了です。より関連性の高い JS スネーク ゲーム コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript の絶妙なスネーク実装プロセス
  • JSはスネークゲームを実装する
  • スネークゲームのアイデアを実現するためのJavaScript
  • 古典的なスネークゲームの JavaScript 実装

<<:  アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

>>:  iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS

推薦する

Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法

ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...

Mysql クエリの結果セットを JSON データに変換するサンプル コード

Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...

MySQL マスタースレーブ同期、トランザクションロールバックの実装原理

ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...

Linux プロセス管理ツール スーパーバイザーのインストールと設定のチュートリアル

環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...

Vueは下部のポップアップウィンドウで複数選択を実装します

この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...

mysql.data.dll ドライバーのさまざまなバージョンの簡単な分析

ここにmysqlドライバmysql.data.dllがあります知らせ:ここではX86バージョンが多く...

MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

Nginx+Tomcat 負荷分散クラスタの実装例

目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...

Vue で jsx 構文を正しく使用する方法

目次序文仮想DOM仮想DOMとは仮想DOMの利点レンダリング関数とは何ですか? jsx Vue3 で...

JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...

iPhone デバイスの WAP ページでフォントサイズが大きい問題の解決策

JavaScriptコントロールを使用したくない場合は、次の方法を試してください。 Safariブラ...

MySQL ストアドプロシージャの長所と短所の分析

MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...

Linux (Ubuntu 18.04) に Anaconda をインストールする詳細な手順

Anaconda は、大規模なデータ処理、予測分析、科学計算のための最も人気のある Python デ...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...

CSS の高さの崩壊問題の解決

1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...