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

Question

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

the code :

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;

                        }

the first block from top is drawn twin and i can't figure out why i guess the problem is in drawing the levels can someone please help me figure out what i did wrong in my code

Answer 1

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.

Answer 2

I am trying to explain this in detail, please bear with me.

Again in your current fiddle, collection array is increasing in its size when Draw method is called. You can debug your code, no. of blocks increases to thousands in few seconds.

So now this is how your code works in loop:

1. Your code only modifying position of 1st block ie this.collection[0].blockX

2. Adds 5 more blocks in collection array with same position. for ex: While Update method is called for the second time, below line will get execute

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

   So one more block will get added in 6th position of array.

3. While rendering, it draws first block with updated coordinates because of point 1. and draws that block again because of point 2.

This is the reason it is appearing twice.

You need to modify this logic a little bit to solve the problem.

Hope this makes sense.