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高级---案例:随机小方块 (贪吃蛇的食物部分)
案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上 给原型对象添加方法,产 ...
随机推荐
- 用QEMU模拟运行uboot从SD卡启动Linux
平台:Qemu + vexpress-a9 u-boot:u-boot-2019.10 Linux:linux-4.14.13 之前介绍过用Qemu模拟运行uboot,然后从网络启动lin ...
- MongoDB_04_插入和查询
案列需求: 存在文章评论的数据存放到MongoDB中,数据结构参考如下: 数据库:articledb 专栏文章评论 comment / / 字段名称 字段含义 字段类型 备注 _id ID Objec ...
- Ubuntu安装Python版本管理工具pyenv
gyf@gyf-VirtualBox:~$ git clone https://github.com/yyuu/pyenv.git ~/.pyenvCloning into '/home/gyf/.p ...
- netty权威指南学习笔记三——TCP粘包/拆包之粘包现象
TCP是个流协议,流没有一定界限.TCP底层不了解业务,他会根据TCP缓冲区的实际情况进行包划分,在业务上,一个业务完整的包,可能会被TCP底层拆分为多个包进行发送,也可能多个小包组合成一个大的数据包 ...
- windows平台上运行Flink_转载于CSDN
Flink安装部署-window 本地部署原创冰上浮云 发布于2019-08-17 15:56:06 阅读数 633 收藏分类专栏: flink版权声明:本文为博主原创文章,遵循 CC 4.0 BY- ...
- 047-PHP数字前面补零,固定位数补0
<?php #PHP 数字前面补零 固定位数补0 $num=128; $num=str_pad($num,8,"0",STR_PAD_LEFT); echo $num; // ...
- 091-PHP数组过滤函数array_filter,过滤非整数
<?php function not_int($x){ //定义过滤非整数的函数 if(is_int($x)) return TRUE; } $arr=array(1,2,'a',3,4,'c' ...
- python爬取网页文本、图片
从网页爬取文本信息: eg:从http://computer.swu.edu.cn/s/computer/kxyj2xsky/中爬取讲座信息(讲座时间和讲座名称) 注:如果要爬取的内容是多页的话,网址 ...
- Java JDK for Windows
目录 JDK简介下载安装配置JAVA_HOME和Path测试禁止Java自动更新(可选操作) JDK简介 JDK是Java语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK ...
- slave_net_timeout, MASTER_HEARTBEAT_PERIOD, MASTER_CONNECT_RETRY,以及 MASTER_RETRY_COUNT设置和查看
在主从复制中,有几个参数是非常重要的,包括slave_net_timeout, MASTER_HEARTBEAT_PERIOD, MASTER_CONNECT_RETRY,以及 MASTER_RETR ...