JavaScript—面向对象 贪吃蛇最终

效果

代码

//食物对象
;(function () {
    function Food(element) {
        this.width = 20
        this.height = 20
        this.backgroundColor = '#ff8500'
        this.x = 0
        this.y = 0
        this.elemen = element
        this.arr = []
    }
    Food.prototype.remove=function() {
        for (let i = 0; i < this.arr.length; i++) {
            this.arr[i].parentNode.removeChild(this.arr[i])

        }
        this.arr=[]
    }


    Food.prototype.show = function () {
        this.remove()
        this.x = randomNum(0, (this.elemen.offsetWidth - this.width) / this.width) * this.width
        this.y = randomNum(0, (this.elemen.offsetHeight - this.height) / this.height) * this.height
        let div = document.createElement('div')
        this.elemen.appendChild(div)
        div.style.width = this.width + 'px';
        div.style.height = this.height + 'px'
        div.style.backgroundColor = this.backgroundColor
        div.style.position = 'absolute'
        div.style.left = this.x + 'px'
        div.style.top = this.y + 'px'
        this.arr.push(div)
    }
    //外部访问
    window.Food = Food

})()
//蛇对象
;(function() {
    function Snake(element) {
        this.width = 20
        this.height = 20
        this.gameif=false
        //蛇身 位置 颜色
        this.body = [
            {x: 6, y: 4, bc: 'red'},
            {x: 5, y: 4, bc: 'blue'},
            {x: 4, y: 4, bc: 'blue'},
        ]
        this.direction = 'right'
        this.elemen = element
        //保存当前蛇
        this.arr = []
    }
//吃食物
    Snake.prototype.feed = function (food) {

        // 遇到食物 复制最后一个蛇身
        if (this.body[0].x * this.width === food.x && this.body[0].y * this.height === food.y) {
            let o = this.body[this.body.length - 1]
            let pro = {x: o.x, y: o.y, bc: o.bc}
            this.body.push(pro)
            food.show()
        }
    }
    Snake.prototype.remove = function () {
        for (let i = 0; i < this.arr.length; i++) {
            this.arr[i].parentNode.removeChild(this.arr[i])
        }
        this.arr = []
    }
//蛇出现
    Snake.prototype.show = function () {
        this.remove()
        //console.log(this.arr)
        for (let i = 0; i < this.body.length; i++) {
            let div = document.createElement('div')
            this.elemen.appendChild(div)
            div.style.width = this.width + 'px';
            div.style.height = this.height + 'px'
            div.style.position = 'absolute'
            div.style.backgroundColor = this.body[i].bc
            div.style.left = this.body[i].x * this.width + 'px'
            div.style.top = this.body[i].y * this.height + 'px'
            this.arr.push(div)
        }

    }
//移动方法
    Snake.prototype.udlr = function () {
        //蛇身移动 根据最后一个的位置等于上一个的位置
        for (let i = this.body.length - 1; i > 0; i--) {
            this.body[i].x = this.body[i - 1].x
            this.body[i].y = this.body[i - 1].y
        }
        // 边界
        let herfX = this.body[0].x * this.width >= this.elemen.offsetWidth - this.width || this.body[0].x * this.width <= 0
        let herfY = this.body[0].y * this.height >= this.elemen.offsetHeight - this.height || this.body[0].y * this.height <= 0
        console.log(herfX,herfY)
        if (herfX || herfY) {
            this.gameif=true
            alert('游戏结束')
            return
        }
        switch (this.direction) {
            case "right": {
                this.body[0].x += 1
                break;
            }
            case "left": {
                this.body[0].x -= 1
                break;
            }
            case "up": {
                this.body[0].y -= 1
                break;
            }
            case "down": {
                this.body[0].y += 1
                break;
            }
        }
    }
    window.Snake=Snake;
})()
//游戏对象
;(function() {
    function Game(map) {
        this.map = map;
        this.food = new Food(this.map)
        this.snake = new Snake(this.map)
    }
    Game.prototype.go = function () {
        let food=this.food
        let snake=this.snake;
        food.show()
        snake.show()
        let go_time = setInterval(function () {
            console.log(snake,food)

            if (snake.gameif){
                clearInterval(go_time)
            }
            document.addEventListener('keydown', function (e) {
                //结束游戏。game over
                // up:38 down:40 left：37 reight:39
                switch (e.keyCode) {
                    case 37: {
                        //禁止反方向
                        if (snake.direction=='right'){
                            break;
                        }
                        snake.direction='left'
                        break;
                    }
                    case 38: {
                        if (snake.direction=='down'){
                            break;
                        }
                        snake.direction='up'
                        break;
                    }
                    case 39: {
                        if (snake.direction=='left'){
                            break;
                        }
                        snake.direction='right'
                        break;
                    }
                    case 40: {
                        if (snake.direction=='up'){
                            break;
                        }
                        snake.direction='down'
                        break;
                    }
                }
            }, false)
            snake.udlr()
            snake.show()
            snake.feed(food)
        }, 50)
            }
            window.Game=Game;
})()

let map = document.getElementById('map')
let game = new Game(map)
game.go()

function randomNum(minNum, maxNum) {
    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)

}

总结

　　效果图 速度太快。。。。。。。。

         总得来说 并不是毫无头绪。抽象对象 一个个去写 。

　　　　收获挺大