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. messageQ 消息队列

    之后就是对MessageQ的打开,关闭, 消息的发送和接受. MessageQ_create(),MessageQ_delete(): 对消息的创建和删除. MessageQ_open(); Mess ...

  2. Apache Spark 3.0 将内置支持 GPU 调度

    如今大数据和机器学习已经有了很大的结合,在机器学习里面,因为计算迭代的时间可能会很长,开发人员一般会选择使用 GPU.FPGA 或 TPU 来加速计算.在 Apache Hadoop 3.1 版本里面 ...

  3. linux-centos系统下安装python3.5.4步骤

    查看当前python版本:python -V 查看Python可执行文件位置:which python [root@localhost bin]# which python/usr/bin/pytho ...

  4. 关于node_js的比较

    node_js的比较是我自己初学遇到的第一个绕脑的事情. 在比较的函数多了之后,一些函数的调用和变量提升, 搞得自己头晕,有时候函数是没有返回值的,自己还在 用变量值去比较,实际上却是undefine ...

  5. history program(language)

    1950与1960年代 有三个现代编程语言于1950年代被设计出来,这三者所衍生的语言直到今日仍旧广泛地被采用: Fortran (1955),名称取自"FORmula TRANslator ...

  6. Forth 编译程序

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  7. 电脑小白和ta的小白电脑——PowerDesigner的安装与破解

    (一)下载 网盘链接:https://pan.baidu.com/s/1Ts_4D4LL7OukaMPgErp6ng 提取码:werf (二)安装 进入解压缩后的安装包文件夹: 1.双击运行Power ...

  8. 关于FFmpeg工具的使用总结

    FFmpeg官网:http://ffmpeg.org/ 安装ffmpeg: http://www.cnblogs.com/freeweb/p/6897907.html 主要参数: -i 设定输入流 - ...

  9. C++之 自定义数据类型 枚举、结构体、共用体

    1.枚举 枚举类型的声明形式为:   enum  枚举类型名   {  变量值列表 };    变量值列表里都是整型变量,另外不要忘记最后面的分号! 比如,enum  weekday   { sun, ...

  10. java算法03 - 常用的8种排序算法

    Java常用的八种排序算法: 插入排序 - 直接插入排序 每次将待排序的记录按照关键字的大小,插入到前面已经排好序的记录的适当位置.直到全部记录插入完成. 代码实现 /** * 直接插入排序 O(n^ ...