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的反思的更多相关文章

  1. javascript实现贪吃蛇

    <html> <head> <style> body { background:#444; } .rect { border:1px solid #94F; wid ...

  2. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

  3. JS仿贪吃蛇:一串跟着鼠标的Div

    贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...

  4. JavaScript—面向对象贪吃蛇_1

    前面说了.面向对象的思考方式和面向过程的思考方式有着本质的区别. 贪吃蛇.作为各大培训机构.面向对象的练手项目,的确好.我昨天看完视频,有一种领悟面向对象的感觉,当然可能只针对贪吃蛇..要想在实际开发 ...

  5. 使用javascript实现贪吃蛇游戏

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. JavaScript—面向对象 贪吃蛇最终

    效果 代码 //食物对象 ;(function () { function Food(element) { this.width = 20 this.height = 20 this.backgrou ...

  7. JavaScript—面向对象 贪吃蛇_3 蛇对象

    蛇对象 function Snake(element) { this.width = 20 this.height = 20 //蛇身 位置 颜色 this.body = [ {x: 6, y: 4, ...

  8. javascript写贪吃蛇游戏(20行代码!)

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  9. JavaScript—面向对象 贪吃蛇_2 游戏对象

    游戏对象 function Game(map) { this.map = map; this.food = new Food(this.map) this.snake = new Snake(this ...

随机推荐

  1. 2015-11-06 ajax

    一:登录页面.html 制作登录页面html后缀,是客户端控件,不能直接和后台交互,而服务端aspx可以和后台交互,所以要通过js获得内容,通过aspx和后台交互 前台: <body>   ...

  2. js 取得当天0点 / 23:59:59 时间

    js 取得当天0点 / 23:59:59 时间   js 取得今天0点: const start = new Date(new Date(new Date().toLocaleDateString() ...

  3. (转)Windows10下的docker安装与入门 (一)使用docker toolbox安装docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  4. echarts 自适应方法 x和y x2和y2

    grid:{ x:65, y:20, x2:30, y2:30},

  5. win10系统开机输入密码黑屏解决方法

    方法一: 第一步:首先打开笔记本电脑开机,输入开机密码进入 第二步:输入密码后显示黑屏,按"Ctrl+Alt+Del"组合键打开任务管理器 第三步:在打开的任务管理器中,点击&qu ...

  6. 【持续更新】JAVA面向对象多线程编程的一些tips

    sleep()和wait()的区别 sleep()方法是Thread类的方法,wait()方法是Object类的方法. 调用sleep()方法的过程中,线程不会释放对象锁,睡眠时间一过,就又开始执行. ...

  7. python 生成器(generator)的生成方式

    generator包括生成器和带yield的generator函数. 写了一个生成杨辉三角的小例子: # -*- coding:utf-8 -*- def triangles(): l = [1] w ...

  8. C++中_T的用途

    1    C++语言中“_T”是什么意思? Visual C++里边定义字符串的时候,用_T来保证兼容性,VC支持ascii和unicode两种字符类型,用_T可以保证从ascii编码类型转换到uni ...

  9. 2017年4月13日用VS写C程序遇到的一些问题

    在网上找到一篇展示计算机浮点数格式的文章,且有C代码如下: #include <stdio.h> #include <stdlib.h> #include <string ...

  10. for ,foreach ,map 循环的区别

    一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...