古典的なスネークゲームの 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 (ゲームオーバー);
                }
            }
}