食物对象

//自调用
(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) }

  

JavaScript—面向对象 贪吃蛇_2 食物对象的更多相关文章

  1. JavaScript—面向对象 贪吃蛇_2 游戏对象

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

  2. JavaScript—面向对象贪吃蛇_1

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

  3. JavaScript—面向对象 贪吃蛇最终

    效果 代码 //食物对象 ;(function () { function Food(element) { this.width = 20 this.height = 20 this.backgrou ...

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

    蛇对象 function Snake(element) { this.width = 20 this.height = 20 //蛇身 位置 颜色 this.body = [ {x: 6, y: 4, ...

  5. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

  6. javascript实现贪吃蛇

    <html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...

  7. javascript:面向对象和常见内置对象及操作

    本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...

  8. 使用javascript实现贪吃蛇游戏

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. JS高级---案例:随机小方块 (贪吃蛇的食物部分)

    案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上 给原型对象添加方法,产 ...

随机推荐

  1. java中关键字super

    super关键字的作用 java中的super关键字是一个引用变量,用于引用父类对象.关键字“super”以继承的概念出现在类中. 主要用于以下情况:1.调用父类的方法   2.调用父类的变量  3. ...

  2. 小程序封装API

    一般我们https请求都是通过wx.request来请求,但是这种请求如果多了,页面会混乱不说,还不好管理,因此我将请求单独拎出去,方便管理,也方便后期维护. // api.js const API_ ...

  3. 2018年Android面试题含答案--适合中高级(下)(转)

    这里是我整理出来的 面试题,答案我花了很久的时间.加上我自己的理解整理出来的,作者不易,请谅解.有答案的的:https://xiaozhuanlan.com/topic/6132940875   1. ...

  4. cf 764A、762A、764B

    颓废题 764A #include<bits/stdc++.h> #define LL long long #define N 100005 #define lowbit(x) x& ...

  5. 二十一、JavaScript之访问对象属性

    一.代码如下 二.执行效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...

  6. 图解HTTP阅读笔记2

    TCP协议:三次握手,C端——>SYN——>S端: S端——>SYN/ACK——>C端: C端——>ACK——>S端. 特点:字节流服务,把大块数据分割成以报文段为 ...

  7. Mysql—存储过程

    该处代码可能存在中文的标点符号 存储过程 含义: 一组预先编译好的SQL语句的集合,理解成批处理语句 好处: 1.提高代码的重用性 2.简化操作 3.减少了编译次数并且减少了和数据库连接的次数,提高了 ...

  8. 【剑指Offer】面试题22. 链表中倒数第k个节点

    题目 输入一个链表,输出该链表中倒数第k个节点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾节点是倒数第1个节点.例如,一个链表有6个节点,从头节点开始,它们的值依次是1.2.3.4.5.6. ...

  9. 洛谷 P2370 yyy2015c01的U盘

    题目传送门 解题思路: 先将每个文件按照占空间从小到大排序,然后跑背包,当到了某一个文件时,价值够了,那么当前文件的体积就是答案. 其实本题是可以二分答案的,但是写挂了... AC代码: #inclu ...

  10. SpringAOP 使用注解的简单使用

    1. 导入jar包 /SpringAOPmy/lib/com.springsource.net.sf.cglib-2.2.0.jar/SpringAOPmy/lib/com.springsource. ...