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 ...
随机推荐
- 从安装Mac OS X虚拟机到第一个IOS程序
对于纯粹地抄这种行为是比较抵触的,别人已经写得挺好的东西没必要又去写一遍,但如果不写经验来看下次再做时自己又要重复百度筛选一遍,所以还是要记一记. 之前要获取IOS静态库的版本,但一直以来没有Mac没 ...
- Cognos集成至portal平台运行报表时只出“#”
1. 问题描述 报表集成到平台后,运行报表过程中,当多次运行后,页面只显示“#” 2. 问题分析 这是因为浏览器筛选器限制问题 3. 解决方案 在IE浏览器设置中,Internet选项-安全-自定义级 ...
- 大数据Hadoop入门视频教程:Hadoop的快如入门
最新在学习hadoop .storm大数据相关技术,发现网上hadoop .storm 相关学习视频少之又少,这里整理了传智播客段海涛老师的hadoop学习视频,出来给大家学习交流. 视频下载地址:h ...
- 利用Delphi编写Socket通信程序
一.Delphi与Socket 计算机网络是由一系列网络通信协议组成的,其中的核心协议是传输层的TCP/IP和UDP协议.TCP是面向连接的,通信双方保持一条通路,好比目前的电话线,使用telnet登 ...
- 最长公共子串和子序列的Python实现,带图示。
使用矩阵来记录两个子串之间各个字符之间的对应关系. 最长子串:矩阵中数字最大的就是最长子串的长度.若对应位置字符相同,则c[i][j] = c[i-1][j-1] + 1 def longSubStr ...
- 汽车行业解决方案_K2助力车企实现费控/生产“端到端流程”
如今汽车行业正面对一轮全球范围内新变革周期,这种“变革”一方面来源于在新能源技术.人工智能.信息技术.物联网技术等高新科技地猛烈敲击,另一方面源于全球的经济政策变幻莫测,贸易保护时代地到来,车企深陷发 ...
- http协议与https协议的前世今生
一.Http与Https的区别: HTTP 的URL 以http:// 开头,而HTTPS 的URL 以https:// 开头 HTTP 是不安全的,而 HTTPS 是安全的 HTTP 标准端口是80 ...
- 【Java集合系列四】HashSet和LinkedHashSet解析
2017-07-29 16:58:13 一.简介 1.Set概念 Set可以理解为集合,非常类似数据概念中的集合,集合三大特征:1.确定性:2.互异性:3.无序性,因此Set实现类也有类似的特征. 2 ...
- [模板]quicksort快速查找、排列算法
1.快速排序 //快速排序 void quick_sort(int s[], int l, int r) { if (l < r) { //Swap(s[l], s[(l + r) / 2]); ...
- 记录linux配置
只写成功过程:1.配置sshd: 首先开启安全组端口,选择合适端口(tcp),shell输入vi /etc/services ->ssh修改(21变更为合适端口) 接着shell输入vi /et ...