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

推薦する

JavaScript でプロトタイプ パターンを実装する方法

概要プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、こ...

Vueのprovideとinjectの使い方と原則を分析する

まず、provide/inject を使用する理由について説明しましょう。祖父コンポーネントと孫コン...

IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...

Dockerでrabbitmqをデプロイする際に発生した2つの問題

1. 背景DockerでRabbitMQをデプロイする際に、次の2つの問題が発生します。問題1: ス...

HTML DOM入門_PowerNode Javaアカデミー

DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...

Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード

Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...

dockerでifconfigが利用できない問題を解決する

最近、docker を学習していたときに、docker コンテナ内のネットワーク状態を照会するために...

HTML メタの説明

導入メタタグは、HTML言語のHEAD領域にある補助タグです。 meta は、ページの説明、キーワー...

MySQL sql_mode の分析と設定の説明

昨夜、MySQL データベースにデータセットを挿入したときにエラーが発生しました。データベースは容赦...

JavaScript における型の必須および暗黙的な変換の詳細な説明

目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

Dockerイメージの作成、アップロード、プル、デプロイを理解するための記事

目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...

QTとJavaScript間のインタラクティブデータの実装

1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

vue 要素 el-transfer にドラッグ機能を追加

コア資産管理プロジェクトでは、el-transfer にドラッグ アンド ドロップによる並べ替えと、...