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

叁歲伎倆 2023-10-11 13:13 3阅读 0赞

食物对象

//自调用
    (function (){
        function Food(element) {
            this.width = 20
            this.height = 20
            this.backgroundColor = '#ff8500'
            this.x = 50
            this.y = 50
            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.splice(i, 1)
            }
        }
    
    
            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)
                console.log(this.arr)
            }
            //外部访问
            window.Food = Food
    
    })()
    
    //随机
    function randomNum(minNum, maxNum) {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
    
    }

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

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 javascript用面向过程写贪吃蛇游戏

下面是HTML与CSS的代码 CSS: <style> { margin: 0; padding

超、凢脫俗/ 2022年12月11日 04:24/ 0 赞/ 169 阅读

相关 JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏

目录 1 引言 2 游戏地图 3 游戏对象 3.1 食物对象 3.2 小蛇对象 3.3 游戏对象 4 游戏的逻辑 4.1小蛇的移动 4.2 让蛇自己动起来

拼搏现实的明天。/ 2022年12月02日 04:21/ 0 赞/ 88 阅读

相关贪吃蛇（canvas+javaScript）

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

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

相关学C++ 写面向对象贪吃蛇(作风一贯::懒)

include <iostream> include <ctime> include <conio.h> using namespace std

不念不忘少年蓝@/ 2022年08月20日 12:16/ 0 赞/ 150 阅读

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

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

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