JavaScript—面向对象 贪吃蛇_2 食物对象
食物对象
//自调用
(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 食物对象的更多相关文章
- JavaScript—面向对象 贪吃蛇_2 游戏对象
游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this ...
- JavaScript—面向对象贪吃蛇_1
前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发 ...
- JavaScript—面向对象 贪吃蛇最终
效果 代码 //食物对象 ;(function () { function Food(element) { this.width = 20 this.height = 20 this.backgrou ...
- JavaScript—面向对象 贪吃蛇_3 蛇对象
蛇对象 function Snake(element) { this.width = 20 this.height = 20 //蛇身 位置 颜色 this.body = [ {x: 6, y: 4, ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
- javascript实现贪吃蛇
<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...
- javascript:面向对象和常见内置对象及操作
本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...
- 使用javascript实现贪吃蛇游戏
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JS高级---案例:随机小方块 (贪吃蛇的食物部分)
案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上 给原型对象添加方法,产 ...
随机推荐
- MongoDB 初始化数据同步
MongoDB初始化数据同步: 副本集中的成员启动之后,就会检查自身的状态,确定是否可以从某个成员那里进行同步.如果不行的话,尝试从其他成员那里进行完整的数据复制. 这个过程就是初始化同步(initi ...
- JAVA - SpringBoot项目跨域访问
JAVA - SpringBoot添加支持CORS跨域访问 CORS(Cross-Origin Resource Sharing)“跨域资源共享”,是一个W3C标准,它允许浏览器向跨域服务器发送Aja ...
- Linux学习43 CCNA网络知识-计算机网络基础
一.Linux网络配置属性 1.计算机网络 TCP/IP:协议簇,协议栈(使用的模型) ISO组织制定了OSI七层模型协议栈(学习的模型) 2.网卡 a.MAC:Media Access Contro ...
- 16 协程和www
1.一个应用程序一般对应一个进程,一个进程一般有一个主线程,还有若干个辅助线程,线程之间是平行运行的,在线程里面可以开启协程,让程序在特定的时间内运行.2协程和线程的区别是:协程避免了无意义的调度,由 ...
- python---生成式
1.[(x,y) for x in [1,2,3] for y in [4,2,3] if x == y] (x,y):输出表达式,产生最终列表的元素 for x in [1,2,3] for y i ...
- SpringBoot通过ApplicationArguments获取args
如果你需要获取通过SpringApplication.run(…)传输过来的arguments,可以直接注入一个ApplicationArguments即可实现,如下面这个例子: @Service ...
- UVA - 1153 Keep the Customer Satisfied(顾客是上帝)(贪心)
题意:有n(n<=800000)个工作,已知每个工作需要的时间qi和截止时间di(必须在此之前完成),最多能完成多少个工作?工作只能串行完成.第一项任务开始的时间不早于时刻0. 分析:按截止时间 ...
- POJ 2031:Building a Space Station 最小生成树
Building a Space Station Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6083 Accepte ...
- windows driver 定时器的使用
#include < Ntifs.h> #pragma warning(disable:4995) #pragma comment(lib, "Ntoskrnl.lib" ...
- Java算法练习——字符串转换整数 (atoi)
题目链接 题目描述 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负 ...