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 ...
随机推荐
- cron 配置
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...
- 关于Javascript中页面动态钟表的简单实现
1.问题并不繁琐,在于HTML中 DOM(文档对象模型)方法的掌握,我的钟表实现重点用到了三个函数和一个事件 A)setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.s ...
- 用switch组件控制一个元素的显示和隐藏状态
微信小程序开发(交流QQ群:604788754) WXML: <view class="body-view"> <switch bindchange=" ...
- linux jpg文件查找木马
find ./ -type f -name "*.jpg" | xargs grep "eval"
- 常被问到的十个 Java 面试题
在这篇文章中,我试图收录最有趣和最常见的问题.此外,我将为您提供正确的答案. 接下来,就让我们来看看这些问题. 1. 以满分十分来评估自己——你有多擅长 Java? 如果你并不完全确信你自己或是你对 ...
- QT + OpenCV + MinGW 在windows下配置开发环境
由于研究项目需要,最近开始接触C++界面设计,关于“QT + OpenCV + MinGW在windows下配置开发环境”着实让人头疼,单次配置时间相当长,也十分不容易,本人第一次配置成 ...
- 使用线程操作刷新Winform界面
主窗体中添加代码 public FrmMain() { InitializeComponent(); System.Threading.Thread thread = new System.Threa ...
- [tour]2019HUST onsite签到
先定一个小目标,从签到题开始讲清楚 虽然因为我喜欢签到题的气球导致签到题并没有行使责任.. F.Mesh 和某CF题(我找不到了)完 全 一 致,由于某些玄学原因没有get到(orz谢罪) 给出一个6 ...
- Linux SSH登录服务器报ECDSA host key "ip地址" for has changed and you have requested strict checking错误
错误:ECDSA host key "ip地址" for has changed and you have requested strict checking. 解决方案:在终端 ...
- sql排列组合
一个表中4条记录,如何查询所有可能组成的结果. 例如: 1 2 3 4 四条记录,最后组成(12),(13),(14),(23),(24),(34) 最后sql如下: SELECT a.name ...