JavaScript—面向对象贪吃蛇_3 蛇对象

矫情吗；* 2023-10-11 13:13 53阅读 0赞

蛇对象

function Snake(element) {
        this.width = 20
        this.height = 20
    
        //蛇身 位置 颜色
        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)
        }
    }
    
    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
        if (herfX || herfY) {
            alert('完蛋')
            return
        }
        switch (this.direction) {
            case "right": {
                this.body[0].x += 1
                break;
            }
            case "letf": {
                this.body[0].x -= 1
                break;
            }
            case "up": {
                this.body[0].y -= 1
                break;
            }
            case "down": {
                this.body[0].y += 1
                break;
            }
        }
    }

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

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript—面向对象贪吃蛇最终

效果 ![797834-20190509192223679-2123143675.gif][] 代码 //食物对象 ;(function () {

Dear 丶/ 2023年10月11日 13:16/ 0 赞/ 47 阅读

相关 JavaScript—面向对象贪吃蛇_1

前面说了。面向对象的思考方式和面向过程的思考方式有着本质的区别。贪吃蛇。作为各大培训机构。面向对象的练手项目，的确好。我昨天看完视频,有一种领悟面向对象的感觉，当然可

Love The Way You Lie/ 2023年10月11日 13:16/ 0 赞/ 50 阅读

相关 JavaScript—面向对象贪吃蛇_2 游戏对象

游戏对象 function Game(map) { this.map = map; this.food = new Food(this

迷南。/ 2023年10月11日 13:16/ 0 赞/ 50 阅读

相关 JavaScript—面向对象贪吃蛇_3 蛇对象

蛇对象 function Snake(element) { this.width = 20 this.height = 20

矫情吗；*/ 2023年10月11日 13:13/ 0 赞/ 54 阅读

相关 JavaScript—面向对象贪吃蛇_2 食物对象

食物对象 //自调用 (function (){ function Food(element) { this.widt

叁歲伎倆/ 2023年10月11日 13:13/ 0 赞/ 19 阅读

相关贪吃蛇（canvas+javaScript）

贪吃蛇是一个比较老的游戏，但是很有趣。那我们要怎么去实现呢？用h5+javaScript去实现，实现思路： 1画线条也就是画格子。 2定义蛇，然后初始化，画出一条

港控/mmm°/ 2022年09月30日 11:46/ 0 赞/ 185 阅读

相关 JavaScript之贪吃蛇

网页版“贪吃蛇”游戏，主要是为了学习JavaScript开发语言！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

怼烎@/ 2022年08月20日 12:12/ 0 赞/ 186 阅读

相关贪吃蛇

很多人都玩过贪吃蛇这个游戏，今天我们就来简单完成一个贪吃蛇的小游戏。首先，贪吃蛇有以下几个要求： 1. 只有一条蛇 2. 每次只出现一个食物 3. 蛇吃到食物长度会加1

àì夳堔傛蜴生んèń/ 2022年05月08日 09:34/ 0 赞/ 343 阅读

相关从贪吃蛇移动到JS面向对象

需求 > Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。 > 比如下面这是一条贪吃蛇（你自己想象）；我们如何创建

旧城等待，/ 2022年01月31日 16:21/ 0 赞/ 187 阅读

相关贪吃蛇

学号：2017035107112 姓名：马铭泽我的码云贪吃蛇项目仓库：[https://gitee.com/mmz0217/number\_1/blob/master/m

灰太狼/ 2022年01月07日 14:15/ 0 赞/ 407 阅读