食物对象

//自调用
(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. 接口测试基础----postman、jmeter

    一,什么是接口 接口一般接口分两种: 系统对外接口:与外部系统对接的接口,用来获取或者传递数据给外部系统 系统内部接口:系统模块.方法之间用来获取或者传递数据的接口 二.接口分类 webservice ...

  2. DP(动态规划求含有冻结期的买卖股票)-05-动态规划-买卖股票

    题目描述 Alice这次决定去股市里当一波韭菜. 她希望你设计一个算法,在满足以下3个约束条件下,计算出最大利润. 1.  你可以多次买卖一支股票,但是对于每支股票,你不能同时参与多笔交易(你必须在再 ...

  3. 二十四、SAP中打开帮助文件

    一.在代码输入界面,选中一个关键词,按一下F1,或者问号 二.显示出的帮助内容

  4. Char、float、Double、BigDecimal

    Char初识 char: char类型是一个单一的 16 位 Unicode 字符 char 在java中是2个字节("字节"是byte,"位"是bit ,1 ...

  5. int, float, double 等转化为 string

    一般有以下两种方法: QVecotr<int> vec; QString(QByteArray().setNum(vec.at(3))) float f; QString("%1 ...

  6. Spark 资源调度包 stage 类解析

    spark 资源调度包 Stage(阶段) 类解析 Stage 概念 Spark 任务会根据 RDD 之间的依赖关系, 形成一个DAG有向无环图, DAG会被提交给DAGScheduler, DAGS ...

  7. opencv运动物体识别

    import cv2 import time import datetime import os def mkdir(path): folder = os.path.exists(path) if n ...

  8. Docker 容器(container)

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  9. 一、VIP课程:互联网工程专题 05-快速掌握Jenkins原理与核心功能

    第五课:快速掌握jenkins核心功能.docx 2.164 (2019-02) and newer: Java 8 or Java 11 一.jenkins 概述与环境配置 知识点: 关于可持续化集 ...

  10. 国内OLED产业与三星到底是差之千里还是近在咫尺?

    此前,市面上几乎大部分智能手机搭载的刘海屏,都是来自三星的AMOLED屏幕.虽然三星总是被诟病为中国手机厂商提供的是"次品",不过没办法,OLED屏幕的核心技术.产能等都掌握在三星 ...