JavaScript—面向对象贪吃蛇最终

Dear 丶 2023-10-11 13:16 34阅读 0赞

效果

![797834-20190509192223679-2123143675.gif][]

代码

//食物对象
    ;(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)
    
    }

## 总结 ##

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

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

收获挺大

转载于:https://www.cnblogs.com/ruogu/p/10840506.html

[797834-20190509192223679-2123143675.gif]: https://img2018.cnblogs.com/blog/797834/201905/797834-20190509192223679-2123143675.gif