古典的なスネークゲームの JavaScript 実装

古典的なスネークゲームの JavaScript 実装

この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

主にシングルトン モードを使用し、すべての要素が動的に作成されます。

1. マップを作成する

var マップ;
    関数マップ(){
        this.mapp = null;
        this.makemap=関数(){
            this.mapp = document.createElement ("div");
            this.mapp.className = "mymap";
            ドキュメントの body に this.mapp という子要素を追加します。
        }
    }

2. ヘビのモデルを作成する

ヘビの最初の 3 つのセクションを格納するコレクションを作成し、コレクションをトラバースして、ヘビのサイズと色を作成し、各セクションの幅と高さを 30 ピクセルに設定し、ヘビの頭の方向を右に初期化します。

var スナック;
    関数スナック(){
        this.snackk=[["赤",3,1,null],["ピンク",2,1,null],["ピンク",1,1,null]];
        this.direct="右";
        this.makesnack=関数(){
             for(var i=0;i<this.snackk.length;i++){
                 if (this.snackk[i][3]==null){
                     this.snackk[i][3] = document.createElement("div");
                     this.snackk[i][3].className = "eatsnack";
                     this.snackk[i][3].style.backgroundColor =this.snackk[i][0];
                     Map.mapp.appendChild(this.snackk[i][3]);
                 }
                 this.snackk[i][3].style.left=this.snackk[i][1]*30+"px";
                 this.snackk[i][3].style.top=this.snackk[i][2]*30+"px";
             }
        };

3. 動的スネーク。スネークの各セクションを格納するセット スナックを後ろから前へトラバースし、各セクションの属性を後ろから前へ渡し、スネークのヘッドの移動方向を設定します。方向の変化に応じて、スネークの左余白と上余白が変化します。次に、タイマーを設定して、100 ミリ秒ごとにスネークを移動します。

this.movesnack=関数(){
            var long = this.snackk.length - 1;
            for(var i=long; i>0; i--){
                this.snackk[i][1] = this.snackk[i-1][1];
                this.snackk[i][2] = this.snackk[i-1][2];
            }
            スイッチ(this.direct){
                case "right": //右 this.snackk[0][1] +=1;
                    壊す;
                case "left": //left this.snackk[0][1] -=1;
                    壊す;
                case "down": //ダウン this.snackk[0][2] +=1;
                     壊す;
                case "up": //上 this.snackk[0][2] -=1;
                     壊す;
            } 

4. 食べ物を作る。

食べ物はマップ上にランダムに生成されます。食べ物のサイズは、ヘビの各セクションのサイズと同じです。

var グオグオ;
    関数 guozi(){
        this.guoo = null;
        これ.x;
        これ.y;
        this.makeguozi=関数(){
            this.x = Math.floor( Math.random() * 30); //0-29
            this.y=Math.floor( Math.random() * 20); //0-19
            if(this.guoo==null){
                this.guoo=document.createElement("div");
                this.guoo.className = "guozi";
                Map.mapp.appendChild(this.guoo);
            }
            this.guoo.style.left=this.x * 30+"px";
            this.guoo.style.top =this.y * 30+"px";
        }
    }

5. キーボード イベントを設定し、上、下、左、右のキーを使用してヘビの頭の方向を制御します。

document.body.onkeyup=関数(e){
           // コンソールログ(e);
            スイッチ(e.keyCode){
                ケース37: //leftif(Snack.direct!="right"){
                            Snack.direct = "左";
                        }
                    壊す;
                ケース39:// rightif(Snack.direct!="left"){
                        Snack.direct = "正しい";
                    }
                    壊す;
                ケース38: //up if(Snack.direct!="down"){
                        Snack.direct = "上";
                    }
                    壊す;
                ケース40: //Nextif(Snack.direct!="up"){
                       Snack.direct = "ダウン";
                    }
                    壊す;
                ケース87:
                    Snack.direct != "down" の場合 {
                        Snack.direct = "上";
                    }
                    壊す;
                ケース65:
                    Snack.direct != "right") の場合 {
                        Snack.direct = "左";
                    }
                    壊す;
                ケース68:
                    Snack.direct != "left") の場合 {
                        Snack.direct = "正しい";
                    }
                    壊す;
                ケース83:
                    Snack.direct != "up" の場合 {
                        Snack.direct = "ダウン";
                    }
                    壊す;
            }
        };

6. ヘビの頭と餌の位置を検出します。ヘビの頭が餌を食べると、ヘビの長さが長くなり、スナックセットに要素が追加されます。次に、餌がランダムに作成され、餌の位置が検出され、再び餌を食べます。

if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){
                 this.snackk.push([
                         "ピンク"、
                         this.snackk[this.snackk.length-1][1],
                         this.snackk[this.snackk.length-1][2],
                         ヌル
                 ]);
                 グオグオ.makeguozi();
                 }

7. 蛇の体が壁を通り抜けるように設定します。蛇の頭の上、下、左、右の余白が 0 に等しい場合は、余白を最大値に変更します。

if(this.snackk[0][1]>29){
                this.snackk[0][1]=0 ; //右から壁を通り抜ける}
            if(this.snackk[0][1]<0){
                this.snackk[0][1]=29; //右から壁を通り抜ける}
            if(this.snackk[0][2]>19){
                this.snackk[0][2]=0 ; //右から壁を通り抜ける}
            if(this.snackk[0][2]<0){
                this.snackk[0][2]=19; //右から壁を通り抜ける}
            this.makesnack();
            this.stopsnack();

        };

8. ゲームが終了するように設計します。ヘビは自分の体にぶつかると死にます。ゲームが終了し、タイマーがオフになります。ヘビの頭の上端と左端がヘビの体の一部の上端と左端と等しくなると、ゲームが終了し、ゲームの終了を示すプロンプト画像がポップアップ表示されます。

this.stopsnack=関数(){
            for(var k=this.snackk.length-1;k>0;k--){
                this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]) の場合 {
                    クリア間隔(時間);
                    var gameover = document.createElement("div");
                    gameover.className = "オーバー";
                    gameover.style.display = "ブロック";
                    Map.mapp.appendChild (ゲームオーバー);
                }
            }
} 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  Ubuntuにopencvをインストールする正しい方法の詳細な説明

>>:  UbuntuにCMakeをインストールするいくつかの方法の詳細な説明

推薦する

MySQLクエリは、フィールドが数値とカンマではないことを指定します。

コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...

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

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

Nginx プロキシを使用してインターネットを閲覧する方法

私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...

Docker コンテナのデプロイの試み - マルチコンテナ通信 (node+mongoDB+nginx)

その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

Vueルータールーティングガードの詳細な説明

目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...

jQuery で従業員管理登録ページを実装する

この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...

Vueプロジェクトでlessを使用するためのヒント

目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....

Vueが初めて要素を取得できなかったときの解決記録

序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...

17の広告効果測定の解釈

1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...

JQueryはアニメーション効果の非表示と表示を実装します

この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...

フレックスレイアウトにおける画像変形の解決策の詳細な説明

フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...

MySQL の問題を解決する: MSVCR120.dll が見つからないため、コードの実行を続行できません

1. 問題MySQL の初期化時に発生する問題は、次のとおりです。 1. 「MSVCR120.dll...

Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする

問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...

検証例 MySQL | 同じ値を持つフィールドを更新すると、binlog に記録されます

1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...