JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲

更新時(shí)間：2021年09月17日 09:49:42 作者：fanfan_h

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下

主要使用單例模式，所有元素動(dòng)態(tài)創(chuàng)建；

1.創(chuàng)建地圖

var Map;
    function map(){
        this.mapp=null;
        this.makemap=function(){
            this.mapp=document.createElement ("div");
            this.mapp.className ="mymap";
            document.body.appendChild(this.mapp );
        }
    }

2.創(chuàng)建貪吃蛇模型

創(chuàng)建一個(gè)集合，存放蛇的前三節(jié)，遍歷集合，創(chuàng)建蛇的大小和顏色，設(shè)置每個(gè)小節(jié)的寬高為30px;初始化蛇頭方向向右

var Snack;
    function snack(){
        this.snackk=[["red",3,1,null],["pink",2,1,null],["pink",1,1,null]];
        this.direct="right";
        this.makesnack=function(){
             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.動(dòng)態(tài)蛇，從后向前遍歷存放蛇的每一節(jié)的集合snackk，將每小節(jié)的屬性從后想前傳遞，并且設(shè)置蛇頭移動(dòng)方向，方向改變蛇的左邊距和上邊距也會(huì)跟著改變，再設(shè)置一個(gè)計(jì)時(shí)器，每100ms讓蛇動(dòng)起來(lái)一次；

this.movesnack=function(){
            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];
            }
            switch(this.direct){
                case "right":  //向右
                        this.snackk[0][1] +=1;
                    break;
                case "left":  //向左
                    this.snackk[0][1] -=1;
                    break;
                case "down": //向下
                    this.snackk[0][2] +=1;
                     break;
                case "up":  //向上
                    this.snackk[0][2] -=1;
                     break;
            }

4.創(chuàng)建食物。

在地圖上隨機(jī)產(chǎn)生食物，食物的大小和每一小節(jié)蛇的大小一樣

var Guoguo;
    function guozi(){
        this.guoo=null;
        this.x;
        this.y;
        this.makeguozi=function(){
            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.設(shè)置鍵盤(pán)事件，上下左右鍵控制蛇頭的變化方向

document.body.onkeyup=function(e){
           // console.log(e);
            switch(e.keyCode){
                case 37:  //左
                        if(Snack.direct!="right"){
                            Snack.direct ="left";
                        }
                    break;
                case 39:// 右
                    if(Snack.direct!="left"){
                        Snack.direct ="right";
                    }
                    break;
                case 38: //上
                    if(Snack.direct!="down"){
                        Snack.direct ="up";
                    }
                    break;
                case 40:   //下
                    if(Snack.direct!="up"){
                       Snack.direct ="down";
                    }
                    break;
                case 87:
                    if (Snack.direct != "down") {
                        Snack.direct = "up";
                    }
                    break;
                case 65:
                    if (Snack.direct != "right") {
                        Snack.direct = "left";
                    }
                    break;
                case 68:
                    if (Snack.direct != "left") {
                        Snack.direct = "right";
                    }
                    break;
                case  83:
                    if (Snack.direct != "up") {
                        Snack.direct = "down";
                    }
                    break;
            }
        };

6.檢測(cè)蛇頭和食物的位置，蛇頭吃到食物，蛇的長(zhǎng)度變長(zhǎng)，給snackk集合追加元素，接著在隨機(jī)創(chuàng)建食物，再檢測(cè)食物位置，再吃到食物；

if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){
                 this.snackk.push([
                         "pink",
                         this.snackk[this.snackk.length-1][1],
                         this.snackk[this.snackk.length-1][2],
                         null
                 ]);
                 Guoguo.makeguozi ();
                 }

7.設(shè)置蛇身可以穿墻而過(guò)，如果蛇頭的上下左右邊距等于0時(shí)，改變邊距到最大值；

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.設(shè)計(jì)游戲結(jié)束，貪吃蛇撞在自己的身體就死了，游戲結(jié)束，關(guān)閉計(jì)時(shí)器
當(dāng)蛇頭的上邊距，左邊距等于蛇身體某一塊的上編劇和左邊距時(shí)，游戲結(jié)束，彈出游戲結(jié)束的提示圖片

this.stopsnack=function(){
            for(var k=this.snackk.length-1;k>0;k--){
                if(this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]){
                    clearInterval(time);
                    var gameover=document.createElement ("div");
                    gameover.className ="over";
                    gameover.style.display ="block";
                    Map.mapp.appendChild (gameover);
                }
            }
}