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 ...
随机推荐
- A context-aware personalized travel recommendation system based on geotagged social media data mining
文章简介:利用社交网站Flickr上照片的geotag信息将这些照片聚类发现城市里的旅游景点,通过各照片的拍照时间得到用户访问某景点时的时间上下文和天气上下文(利用时间和public API of W ...
- System.out.print()执行顺序
今天使用递归调用计算的时候发现一个很奇怪的问题 代码: public class practice20 { public static double nStep(double N) { if (N&l ...
- MFC界面分割以及挂载
MFC中文档与视图(二) Last Edit 2013/11/19 这篇主要是介绍一下怎么去分割视图. 视图的分割分为:动态分割,静态分割.所谓的静态分割是指软件一启动视图就分割完成,而动态分割是在 ...
- HTML特殊字符编码对照表(备记)
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι ...
- 《程序设计入门——C语言》翁恺老师 第二周编程练习记录
1 逆序的三位数(5分) 题目内容: 逆序的三位数: 程序每次读入一个正三位数,然后输出逆序的数字.注意,当输入的数字含有结尾的0时,输出不应带有前导的0.比如输入700,输出应该是7. 提示:用%1 ...
- unity中编辑器直接截屏代码
using UnityEngine; using System.Collections; using System.Windows.Forms; public class screenshots : ...
- flask 第三章 特殊装饰器 CBV Flask-Session WTForms
1.flask中的特殊装饰器 前面我们讲过的装饰器函数中,用来登录验证,这次我们来介绍几个flask中的特殊装饰器 1). @app.before_request 具体的用途是: 在请求进入视图函数之 ...
- 基本promise
function myPromise(fn) { var value = null, callbacks = []; this.then = function (onFulfilled) { call ...
- 活代码LINQ——01
序言 此系列的所有代码都是运行在Win 7 64位 + Visual Basic 2008 Express Edition的环境中 之所以学习List集合类,是因为我们先前学习的数组自身的缺陷: 1. ...
- tf.contrib.slim
https://blog.csdn.net/mao_xiao_feng/article/details/73409975