Функция обновления в html5 игре не работает должным образом

Question

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;

                        }

первый блок сверху нарисован близнецом, и я не могу понять, почему, я думаю, проблема в том, чтобы рисовать уровни, может кто-нибудь, пожалуйста, помогите мне выяснить, что я сделал неправильно в своем коде

Answer 1

Я пытаюсь объяснить это подробно, пожалуйста, потерпите меня.

Снова в вашей текущей скрипке, массив коллекции увеличивается в размере, когда Draw метод называется. Вы можете отладить свой код, нет. блоков увеличивается до тысяч за несколько секунд.

Итак, вот как ваш код работает в цикле:

1. Ваш код только изменяет позицию 1-го блока, т.е. this.collection[0].blockX

2. Добавляет еще 5 блоков в массив коллекции с той же позиции. Например: пока Update метод вызывается во второй раз, ниже строка получит выполнение

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

   Таким образом, еще один блок будет добавлен в 6-ю позицию массива.

3. При рендеринге он рисует первый блок с обновленными координатами из-за точки 1. и снова рисует этот блок из-за точки 2.

Это причина, по которой он появляется дважды.

Вам нужно немного изменить эту логику, чтобы решить проблему.

Надеюсь, это имеет смысл.

Answer 2

Now I think you're clearing the platforms from the collection array before any coordinates get chance to be applied and redrawn to the canvas. If you remove the call to 'Blocks.clear()', the platform moves.