html代码

<style>
</style>
<div class="map"></div>

<button class="start">开始</button>
<button class="stop">停止</button>
<script src="./map.js"></script>
<script src="food.js"></script>
<script src="she.js"></script>
<script src="./game.js"></script>
<script>
const g = new Game('.map')
const start = document.querySelector('.start')
const stop = document.querySelector('.stop')
start.addEventListener('click', () => g.start())
stop.addEventListener('click', () => g.stop())
</script>
 
map.js代码
function Map(ele){
    this.ele = ele
    this.h = 400
    this.w = 800
}
Map.prototype.dt = function(){
    this.ele.style.background = 'url(bg.png)'
    this.ele.style.height = this.h+'px'
    this.ele.style.width = this.w+'px'
    this.ele.style.border = '10px solid #ccc'
    this.ele.style.position = 'relative'
}
 
 
she.js代码
function She(ele) {
    this.ele = ele
    this.len = 20//一段长度
    //存蛇
    this.snakeObj = [
        { x: 3, y: 2, color: 'red', ele: null },  //蛇头
        { x: 2, y: 2, color: 'blue', ele: null }, // 蛇的身体
        { x: 1, y: 2, color: 'blue', ele: null }  // 蛇的身体
    ]
    this.fangx = 'right'
}
She.prototype.remove = function () {
    for (let i = 0; i < this.snakeObj.length; i++) {
        if (this.snakeObj[i].ele) {
            // console.log(this.snakeObj[i].ele)
            this.ele.removeChild(this.snakeObj[i].ele)
            this.snakeObj[i].ele = null
        }
    }
}

//创建蛇
She.prototype.set = function () {
    this.remove()
    let snakeObj = this.snakeObj
    for (let i = 0; i < snakeObj.length; i++) {
        let divObj = document.createElement('div')
        divObj.style.width = this.len
        divObj.style.height = this.len
        divObj.style.position = 'absolute'
        divObj.style.left = snakeObj[i].x * this.len
        divObj.style.top = snakeObj[i].y * this.len
        divObj.style.background = snakeObj[i].color
        snakeObj[i].ele = divObj
        this.ele.appendChild(divObj)
    }
}
She.prototype.pand = function () {
    document.addEventListener('keydown', (e) => {
        console.log(1)
        var e = e || which.event
        console.log(e.keyCode)
        // switch (e.keyCode, this.fangx) {
        //     case 38, 'botton':
               
        //        return;
        //        break;
        //     case 39,'left':
               
        //        return;
        //        break;
        //     case 40, 'top':
        //        return;
        //         break;
        //     case 37,'right':
        //         return;
               
        //         break;
        // }
        switch (e.keyCode) {
            case 38:
                this.fangx = 'top'
                break;
            case 39:
                this.fangx = 'right'
                break;
            case 40:
                this.fangx = 'botton'
                break;
            case 37:
                this.fangx = 'left'
                break;
        }
    })
}
She.prototype.zzdong = function () {
    let snakeObj = this.snakeObj
    // snakeObj[0].ele        

    // snakeObj[0].ele.style.left=snakeObj[0].x*this.len
    for (let i = snakeObj.length - 1; i > 0; i--) {
        snakeObj[i].x = snakeObj[i - 1].x
        snakeObj[i].y = snakeObj[i - 1].y
    }
    if (this.fangx == 'right') {
        snakeObj[0].x += 1
    }
     if (this.fangx == 'top') {
        snakeObj[0].y -= 1
    }
     if (this.fangx == 'left') {
        snakeObj[0].x -= 1
    }
     if (this.fangx == 'botton') {
        snakeObj[0].y += 1
    }

    // divObj.style.top=snakeObj[i].y*this.len
    this.set()
}
function Food(ele){
    this.sw = 20
    this.ele = ele
}
 
food.js代码
Food.prototype.chuangj = function(){
    this.divObj = document.createElement('div')
    this.divObj.style.height=this.sw
    this.divObj.style.width=this.sw
    this.divObj.style.background='#0f4'
    this.ele.appendChild(this.divObj)
    this.wz()
}
Food.prototype.wz = function(){
    this.wzX=(Math.floor(Math.random()*this.ele.clientWidth/this.sw))*this.sw
    this.wzY=(Math.floor(Math.random()*this.ele.clientHeight/this.sw))*this.sw
    this.divObj.style.position = 'absolute'
    // console.log(this.ele.clientWidth/this.sw)
    this.divObj.style.left=this.wzX
    this.divObj.style.top=this.wzY
}
 
 
game.js代码
function Game(ele) {
    //游戏目录
    this.ele = document.querySelector(ele)
    this.t;
    this.bool = true;
    this.map = new Map(this.ele) //地图
    this.map.dt()
    this.food = new Food(this.ele)//食物
    this.food.chuangj()
    this.she = new She(this.ele)//蛇
    this.she.set()
    this.she.pand()
}
Game.prototype.stop = function () {
    clearInterval(this.t)
}
Game.prototype.stop = function () {
    alert('暂停')
}
Game.prototype.start = function () {
    // var _this = this
    if (this.bool) {
        this.bool == false
        this.t = setInterval(() => {
            this.she.zzdong()
            let foodY = this.food.wzY
            let foodX = this.food.wzX
            let mapX = this.map.w
            let mapY = this.map.h
            let sheX = this.she.snakeObj[0].x * 20
            let sheY = this.she.snakeObj[0].y * 20
            if (foodY == sheY && foodX == sheX) {
                let xing = this.she.snakeObj[this.she.snakeObj.length - 1]
                this.she.snakeObj.push({
                    x: xing.x,
                    y: xing.y,
                    color: xing.color,
                    ele: null
                })
                this.food.wz()
                this.she.set()

            }
            console.log(sheX)
            console.log(mapX)
            if (sheX == mapX || mapY == sheY || sheX < 0 || sheY < 0) {
                alert('你死了')
                clearInterval(this.t)
                location.reload()
            }
            for(var i = 1 ; i <this.she.snakeObj.length ; i++){
                if((sheX==this.she.snakeObj[i].x*20)&&(sheY==this.she.snakeObj[i].y*20)){
                    alert('你死了')
                    clearInterval(this.t)
                    location.reload()
                }
            }
        }, 150)
    }
}