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 ...
随机推荐
- rsyslog及loganalyzer
日志:历史日志 历史事件: 时间记录,事件的关键性程度,loglevel 系统日志服务: syslogd,守护进程 syslogd:system klogd:kernel rsyslog: sys ...
- Monkey
什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...
- Angular2 之父子组件交互方式
父子组件交互方式,这里介绍主要的三种方式 1.事件传值 下面以列表页和分页组件举例. list.component.html <pagination *ngIf="pageParams ...
- js的关于for的语句
JavaScript for...in 语句 for...in 语句用于对数组或者对象的属性进行循环操作. for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作. ...
- Java数据库连接池详解
http://www.javaweb1024.com/java/JavaWebzhongji/2015/06/01/736.html 对于共享资源,有一个很著名的设计模式:资源池(Resource P ...
- Unity3d KeyCode 键盘各种键值详情
KeyCode :KeyCode是由Event.keyCode返回的.这些直接映射到键盘上的物理键. 值 对应键 Backspace 退格键 Delete Delete ...
- 有时候union或者union all比左连接查询速度快
原来的语句 select count(1) from ( SELECT CustCode,ShopCode,CreateTime,UniqCode,SaleType,TotalMoney,Exami ...
- 九州动态ip的特色
九州代理是一款高覆盖的换ip软件,范围可覆盖全国160多个城市.软件可用于游戏试玩.游戏挂机.营销.优化.文档分享.管理.问答推广.数据采集.点赞.增效回访.用户注册等.“九州代理”仅提供国内网络节点 ...
- PLC之六部十层电梯整体框架
1.基本框架 此图基于西门子杯逻辑控制赛项中电梯题目的变量表以及功能设计 1.I/O输入是指变量表中的input数字量,包括电梯所有的内呼按钮.外呼按钮.电梯平层开关等 2.逻辑处理是指根据相对应的输 ...
- 关于Python课程的思考和意见
老师您好,我是信息管理与信息系统专业的一名学生,由于专业原因,我在大一下学期第一次接触Python,并因为它简洁的语言和强大的函数库所吸引,刚好在选课时得知学校有开python选修课,就慕名而来. 首 ...