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 ...
随机推荐
- messageQ 消息队列
之后就是对MessageQ的打开,关闭, 消息的发送和接受. MessageQ_create(),MessageQ_delete(): 对消息的创建和删除. MessageQ_open(); Mess ...
- Apache Spark 3.0 将内置支持 GPU 调度
如今大数据和机器学习已经有了很大的结合,在机器学习里面,因为计算迭代的时间可能会很长,开发人员一般会选择使用 GPU.FPGA 或 TPU 来加速计算.在 Apache Hadoop 3.1 版本里面 ...
- linux-centos系统下安装python3.5.4步骤
查看当前python版本:python -V 查看Python可执行文件位置:which python [root@localhost bin]# which python/usr/bin/pytho ...
- 关于node_js的比较
node_js的比较是我自己初学遇到的第一个绕脑的事情. 在比较的函数多了之后,一些函数的调用和变量提升, 搞得自己头晕,有时候函数是没有返回值的,自己还在 用变量值去比较,实际上却是undefine ...
- history program(language)
1950与1960年代 有三个现代编程语言于1950年代被设计出来,这三者所衍生的语言直到今日仍旧广泛地被采用: Fortran (1955),名称取自"FORmula TRANslator ...
- Forth 编译程序
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- 电脑小白和ta的小白电脑——PowerDesigner的安装与破解
(一)下载 网盘链接:https://pan.baidu.com/s/1Ts_4D4LL7OukaMPgErp6ng 提取码:werf (二)安装 进入解压缩后的安装包文件夹: 1.双击运行Power ...
- 关于FFmpeg工具的使用总结
FFmpeg官网:http://ffmpeg.org/ 安装ffmpeg: http://www.cnblogs.com/freeweb/p/6897907.html 主要参数: -i 设定输入流 - ...
- C++之 自定义数据类型 枚举、结构体、共用体
1.枚举 枚举类型的声明形式为: enum 枚举类型名 { 变量值列表 }; 变量值列表里都是整型变量,另外不要忘记最后面的分号! 比如,enum weekday { sun, ...
- java算法03 - 常用的8种排序算法
Java常用的八种排序算法: 插入排序 - 直接插入排序 每次将待排序的记录按照关键字的大小,插入到前面已经排好序的记录的适当位置.直到全部记录插入完成. 代码实现 /** * 直接插入排序 O(n^ ...