html5画布游戏中的更新功能无法正常工作

时间:2014-02-03 10:38:35

标签: javascript html5 canvas

Jsfiddle:http://jsfiddle.net/seekpunk/6eeKH/15/

代码:

if (this.collection.length > 0) {
                            if (((this.collection[0].blockX + this.collection[0].blockW) >= cw) || (this.collection[0].blockX <= 0)) {
                                this.collection[0].blockSpeed *= -1;
                            }
                            this.collection[0].blockX += this.collection[0].blockSpeed;

                        }

从顶部的第一个块是双胞胎,我无法弄清楚为什么我猜问题是在绘制水平可以有人请帮我弄清楚我在我的代码中做错了什么

2 个答案:

答案 0 :(得分:0)

现在我认为你在从任何坐标获得应用并重新绘制到画布之前清除集合数组中的平台。如果您删除对“Blocks.clear()”的调用,平台就会移动。

答案 1 :(得分:0)

我想详细解释一下,请耐心等待。

再次在当前的小提琴中,当调用Draw方法时,集合数组的大小会增加。您可以调试代码,不。在几秒钟内,块数增加到数千个。

现在,这就是你的代码在循环中的工作方式:

  1. 您的代码仅修改第1个区块的位置,即this.collection[0].blockX
  2. 在具有相同位置的集合数组中再添加5个块。对于前: 当第二次调用Update方法时,下面的行将获得执行

    addBlocks(4, "Red", 50, 70, 50, 5);
    

    因此,将在阵列的第6个位置添加一个块。

  3. 渲染时,由于第1点,它会使用更新的坐标绘制第一个块,并因第2点再次绘制该块。

  4. 这就是它出现两次的原因。

    您需要稍微修改此逻辑以解决问题。

    希望这是有道理的。