小白成長日記：寫個(gè)貪吃蛇

archieyang 發(fā)布于2019-08-21 17:55 / 472人閱讀

摘要：貪吃蛇并不是通過操作來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。目前沒有內(nèi)置的操作符判斷對象的內(nèi)容是否相同。

還是用的vue，本來以為不合適，但想法錯(cuò)了。貪吃蛇并不是通過操作dom來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。

一般移動元素，我們都是變動它的css達(dá)到目的，但我在寫貪吃蛇的時(shí)候發(fā)現(xiàn)這樣很難以實(shí)現(xiàn)，參考了網(wǎng)上的資源，發(fā)現(xiàn)大部分人是通過記錄貪吃蛇的路徑，保存進(jìn)數(shù)組，通過數(shù)組變動來表示貪吃蛇的下一步，主要是增加頭部位置，去除尾部位置，再動態(tài)添加css樣式，這樣就達(dá)到移動的效果。

演示

鏈接描述

html&&data：


        
        
        
        


data(){
    return{
        rows:"",//橫框
        cols:"",//豎框
        position:[[0,0],[1,0],[2,0],[3,0]],//蛇的初始位置
        direction:1,//方向
        food:[]//食物的位置
    }
},

初始化準(zhǔn)備

methods:{
    background(){//生成橫框和豎框的函數(shù)
        this.rows=Array(30)
        this.cols=Array(30)
    }, 
    keyboard(){//鍵盤事件
        let _this = this;
        document.onkeydown = function(e){
            if(e.keyCode===37){
                _this.change(-1)
            }else if(e.keyCode===38){
                _this.change(-2)
            }else if(e.keyCode===39){
                _this.change(1)
            }else{
                _this.change(2)
            }
        }
    },
    creatfood(){//創(chuàng)造食物
        this.food[0]=Math.floor(Math.random()*30)
        this.food[1]=Math.floor(Math.random()*30)
    },
    showfood(x,y){//顯示食物
        if(this.food[0]===x&&this.food[1]===y){
            return true
        }
    },
    body(x,y){//顯示身體
        for(i=0;i
前期準(zhǔn)備就是這么多，接下來就是跑起來，先聲明一個(gè)計(jì)時(shí)器
let timer=""
接著就用定時(shí)器開始跑
start(){//開始按鈕
    timer=setInterval(()=>this.autorun(),300)
}
這里的autorun就是我們要寫的跑動函數(shù)
autorun(){                    
    let direction=this.direction//目前方向
    let headX,headY//
        headX=this.position[this.position.length-1][0]//復(fù)制蛇頭的X坐標(biāo)
        headY=this.position[this.position.length-1][1]//復(fù)制蛇頭的Y坐標(biāo)
        if(direction===1||direction===-1){//如果方向是在左右跑動                        
            direction>0?headX++:headX--//往右跑X坐標(biāo)+1，往左跑X坐標(biāo)-1                                        
        }else{
            direction>0?headY++:headY--//如果方向是在上下跑動，Y坐標(biāo)做對應(yīng)處理
        }
//此時(shí)蛇頭的下一個(gè)坐標(biāo)位置就是[headX,headY]，接下來就可以判斷是否結(jié)束游戲，如果結(jié)束了，蛇頭就沒必要添加了
        if(headX<0||headX>29||headY<0||headY>29||this.body(headX,headY)){//當(dāng)蛇頭下一個(gè)位置出了邊界或者這個(gè)位置是符合身體函數(shù)（即蛇頭撞上了身體）
            alert("Game Over")//結(jié)束
            clearInterval(timer)//清除定時(shí)器
            this.position=[[0,0],[1,0],[2,0],[3,0]]//還原身體
            this.creatfood()//重新創(chuàng)造食物
            this.direction=1//還原方向
        }else{//如果蛇頭下一個(gè)位置是符合規(guī)則的                        
            this.position.push([headX,headY])//將下一個(gè)位置添加進(jìn)數(shù)組，頭部長一節(jié)
            if(headX!==this.food[0]||headY!==this.food[1]){//如果下一個(gè)頭部位置不是食物的位置，即吃食物開始                            
                this.position.shift()//我們將尾部去掉，一長一短實(shí)現(xiàn)了蛇的走動
            }else{//如果下一個(gè)頭部位置是食物
                this.creatfood()//不去除尾部，再次創(chuàng)建食物（這里有個(gè)小bug，隨機(jī)的食物有幾率與身體重合）
            }
        }                                    
}，
change(dir){//改變方向
    if(Math.abs(dir)===Math.abs(this.direction)){//如果方向相同或者想法，不做任何操作
        return
    }else{
        this.direction=dir//否則把方向改動
    }
},
就是這個(gè)樣子，貪吃蛇就寫完了，邏輯方面并不是太復(fù)雜，但是對于數(shù)組的操作有很多，這里提下我碰見的幾個(gè)問題：

vue中的數(shù)組對象在更新的時(shí)候和多帶帶的數(shù)據(jù)是不一樣的，只有某些特定的函數(shù)會去主動更新數(shù)組，否則的話需要用vm.$set( target, key, value )這個(gè)去更新數(shù)組
二維數(shù)組和一維數(shù)組是不同的，indexOf()不管用，無法檢測；而且類似this.position[0]===[0,0]也是無法正確判斷的，這導(dǎo)致我在寫這個(gè)小demo的時(shí)候犯了很多錯(cuò)。

let po=[[0,0],[1,0],[2,0],[3,0]]
let qo=[[0,0]]
let oo=[0,0]
console.log(po[0]==qo[0])//false
console.log(qo[0]==oo)//false
這大概就是最大的收獲，我還太年輕。
因?yàn)镴avaScript里面Array是對象，==或===操作符只能比較兩個(gè)對象是否是同一個(gè)實(shí)例，也就是是否是同一個(gè)對象引用。目前JavaScript沒有內(nèi)置的操作符判斷對象的內(nèi)容是否相同。
但是慣性思維讓人以為數(shù)組也是值，是可以比較的。（這段是復(fù)制的，別人總結(jié)的，和我想法一模一樣）希望能給同為小白的朋友們提個(gè)醒
源碼
https://github.com/yuyeqianxu...  
希望能幫助到和我一樣的小白朋友們，有bug麻煩反饋，謝謝！