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 ...
随机推荐
- redis安装,windows,linux版本并部署服务
一.使用场景 项目中采用数据库访问量过大或访问过于频繁,将会对数据库带来很大的压力.redis数据库是以非关系数据库的出现,后来redis的迭代版本支持了缓存数据.登录session状 ...
- Win10系列:C#应用控件进阶4
多边形 若要绘制多边形需要用到Polygon元素,并通过定义一系列的点绘制多边形.Polygon类型的对象有Points属性, 这个属性用来定义组成边的点集.在前台代码中,使用空格分隔各个点,然后利用 ...
- utf8与utf8mb4的区别
最近在写一个爬虫的多线程脚本,在异步插入数据库的时候总有部分数据插入失败,原因竟然是编码的问题.扪心自问,mysql最通用的中文字符编码就是utf-8了,通常情况下,utf-8作为中文编码是司空见惯的 ...
- Spring核心概念
Spring是一个轻量级的企业级框架,提供了loc容器,aop实现,DAO/OR支持,Web集成等功能,目标是使现有的JAVA EE技术更易用,并促进良好的编程习惯. 依赖注入让组件之间以配置文件的形 ...
- Spring详解
https://gitee.com/xiaomosheng888老师的码云 1.核心容器:核心容器提供 Spring 框架的基本功能(Spring Core).核心容器的主要组件是 BeanFacto ...
- 笨办法41学会说面向对象【pyinstaller安装使用
urllib库安装 先切换到pip所在目录 D:\Program Files\JetBrains\PyCharm 2017.3.3\untitled>cd /d c:\ c:\>cd c: ...
- 异常java.lang.NumberFormatException解决
原因一:超出了int类型的取值范围 项目中要把十六进制字符串转化为十进制, 用到了到了Integer.parseInt(str1.trim(), 16):这个是不是后抛出java.lang.Numbe ...
- python1-集合、函数-(全局变量与局部变量)
集合 # s=set('hello')# print(s)## s=set(['alex','alex','sb'])# print(s) # s={1,2,3,4,5,6} #添加# s.add(' ...
- springboot使用redisTemplate遇到的问题
概述 最近工作中新构建了一个项目,用的springboot,由于项目中要使用各种各样的缓存,就使用了spring-data-redis,这个东西比我想象中要难使用的多啊,而且我还遇到个问题,就是在用R ...
- jvm参数及分析工具
-Xmx4G 设置堆的最大内存大小为4GB,也可通过-XX:MaxHeapSize=4GB进行设置 -Xms256m 设置堆的初始内存大小为256兆,如果未设置此选项,则初始大小将设置为新生代和年老代 ...