Javascript仿贪吃蛇出现Bug的反思
bug现象: 图一
图一 ,代码分析
Snake.prototype.move=function (food,map) {
// 头先移动,
switch (this.direction)
{
case "right":
this.body[0].x +=1;
break;
case "left":
this.body[0].x -=1;
break;
case "top":
this.body[0].y -=1;
break;
case "bottom":
this.body[0].y +=1;
break;
}
var i=this.body.length-1;
for(i;i>0;i--){
this.body[i].x=this.body[i-1].x;//第二节X坐标==第一节X坐标
this.body[i].y=this.body[i-1].y;
}
// 运行的结果
/* this.body=[
{x:4,y:2,color:"red"},
{x:2,y:2,color:"orange"},
{x:1,y:2,color:"orange"}
];
this.body=[
0 {x:4,y:2,color:"red"},
1 {x:4,y:2,color:"orange"},
2 {x:2,y:2,color:"orange"}
];
*/
图二正确
图二代码分析
Snake.prototype.move=function (food,map) {
var i=this.body.length-1;
for(i;i>0;i--){
this.body[i].x=this.body[i-1].x;//第二节X坐标==第一节X坐标
this.body[i].y=this.body[i-1].y;
}
// 头后移动
switch (this.direction)
{
case "right":
this.body[0].x +=1;
break;
case "left":
this.body[0].x -=1;
break;
case "top":
this.body[0].y -=1;
break;
case "bottom":
this.body[0].y +=1;
break;
}
/* 运行结果
this.body=[
{x:3,y:2,color:"red"},
{x:2,y:2,color:"orange"},
{x:1,y:2,color:"orange"}
];
this.body=[
0 {x:4,y:2,color:"red"},
1 {x:3,y:2,color:"orange"},
2 {x:2,y:2,color:"orange"}
];
*/
结论:
1,bug逻辑错误导致,提醒了自己特别是在学习东西,清楚逻辑实现原理,数据哪里产生,哪里有在用。
2,调试能力得到极大锻炼,这次从发现现象,到不断尝试背后的原因,最后开始在文件中写测试代码,最后准确找到出错的地方,前后经历了1个小时左右。
3,错误并不可怕,可怕的是不犯错误,一点问题都没有。经验,这次不会,犯错了,把它攻克了那你就会了。
Javascript仿贪吃蛇出现Bug的反思的更多相关文章
- javascript实现贪吃蛇
<html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
- JS仿贪吃蛇:一串跟着鼠标的Div
贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...
- JavaScript—面向对象贪吃蛇_1
前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发 ...
- 使用javascript实现贪吃蛇游戏
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 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写贪吃蛇游戏(20行代码!)
<!doctype html> <html> <body> <canvas id="can" width="400" ...
- JavaScript—面向对象 贪吃蛇_2 游戏对象
游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this ...
随机推荐
- 基于Protostuff实现的Netty编解码器
在设计netty的编解码器过程中,有许多组件可以选择,这里由于咱对Protostuff比较熟悉,所以就用这个组件了.由于数据要在网络上传输,所以在发送方需要将类对象转换成二进制,接收方接收到数据后,需 ...
- learning makefile call func
- 微信小程序开发学习(一):开发前准备
开发前准备 Step1:注册 微信小程序开放平台: https://mp.weixin.qq.com/cgi-bin/wx 开发者注册: https://mp.weixin.qq.com/wxopen ...
- 笨办法41学会说面向对象【pyinstaller安装使用
urllib库安装 先切换到pip所在目录 D:\Program Files\JetBrains\PyCharm 2017.3.3\untitled>cd /d c:\ c:\>cd c: ...
- js操作对象
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 整数中x出现的次数
求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了.ACMer ...
- maven项目的配置
软件151 王帅 1.增加web.xml Maven项目最重要的配置文件是pom.xml,pom是“项目对象模型”的意思.现在pom.xml中有一个错误,提示缺少web.xml: 展开目录src—m ...
- 软件151 王楚博 maven的导入
一.maven 包的导入 清单如下: <!-- Inherit defaults from Spring Boot --> <parent> <groupId>or ...
- java AQS(AbstractQueuedSynchronizer)同步器详解
除了内置锁(synchronized)外,java AQS(AbstractQueuedSynchronizer)同步器几乎是所有同步容器,同步工具类的基础.ReentrantLock.Reentra ...
- 修改docker出现中文字符出现乱码的问题
修改docker出现中文字符出现乱码的问题 在启动容器时 指定选项 -e LANG=en_US.UTF-8