【JavaScript—面向对象 贪吃蛇最终】的更多相关文章

JavaScript—面向对象 贪吃蛇最终

效果 代码 //食物对象 ;(function () { function Food(element) { this.width = 20 this.height = 20 this.backgroundColor = '#ff8500' this.x = 0 this.y = 0 this.elemen = element this.arr = [] } Food.prototype.remove=function() { for (let i = 0; i < this.arr.length…

JavaScript—面向对象贪吃蛇_1

前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发当中去用面向对象.需要项目的累积和时间的沉淀. 贪吃蛇 1,食物对象 属性 大小 位置 样式(背景颜色) 方法 随机坐标 出现 消失 2, 蛇对象 属性 大小 位置 蛇身(位置样式) 样式(背景颜色) 移动方向 方法 出现 移动 吃食物   3, 游戏对象 属性 食物 地图 蛇 方法 开始游戏 (蛇…

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

蛇对象 function Snake(element) { this.width = 20 this.height = 20 //蛇身 位置 颜色 this.body = [ {x: 6, y: 4, bc: 'red'}, {x: 5, y: 4, bc: 'blue'}, {x: 4, y: 4, bc: 'blue'}, ] this.direction = 'right' this.elemen = element //保存当前蛇 this.arr = [] } //吃食物 Snake.…

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

游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this.map) } Game.prototype.go = function () { let food=this.food let snake=this.snake; food.show() snake.show() let go_time = setInterval(function () { co…

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;…

javascript实现贪吃蛇

<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; width:680px; height:680px; } .gridred { width:38px; height:38px; background:red; border:1px #555 solid; float:left } .gridgreen { width:38px; height:38px; bac…

JavaScript版—贪吃蛇小组件

最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级别.因此,想用 js 去封装一个小模块,还有诸多的不适应的地方.下面介绍一下,使用js如何模块化的编写贪吃蛇. 1 写在前面 看来<JavsScript高级编程>,想做一个小demo练练自己的手,选择了贪吃蛇游戏.由于以前都是用c#写的,将贪吃蛇写到一个类里面,然后一个一个小方法的拆分,只向外提供…

使用javascript实现贪吃蛇游戏

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"&…

javascript写贪吃蛇游戏（20行代码！）

<!doctype html> <html> <body> <canvas id="can" width="400" height="400" style="background:Black"></canvas> <script> var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("c…

Javascript仿贪吃蛇出现Bug的反思

bug现象:    图一…