古典的なスネークゲームの 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をインストールするいくつかの方法の詳細な説明

推薦する

Linux で文字化けしたファイルや特殊文字のファイルを削除する方法

エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...

K8Sの5つのコントローラーの紹介と使用

目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...

星のフラッシュ効果を実現するjs

この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...

Docker を使用してコンテナ内のルート パスワードを変更する方法

1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...

JavaScript でピンボール ゲームの Web バージョンを実装する

参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを...

ウェブページで任意のフォントを使用する実践的な操作とデモ

以前、「Web ページにシステムに組み込まれていないフォントを埋め込む」という研究をしたことがありま...

ウェブページレイアウトデザインのシンプルな原則

この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...

Ubuntu 20.04 LTSの詳細なインストール履歴

この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...

HTML ページでギリシャ文字を使用する方法

ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...

あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

目次1. ランダムなブール値( true / false )を取得する2. 指定された日付が営業日で...

Vue の基本リスナーの詳細な説明

目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...

MySQLにインデックスを追加しても効果がないいくつかの状況について簡単に説明します。

インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...

MySQLの左結合と内部結合について簡単に説明します

序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...

ネイティブJSでマウススライドによる愛の拡散効果を実現

この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。 ...

Ubuntu で G++ を使用して CPP ファイルをコンパイルする

g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...