html5 canvas游戲中的更新功能無法正常工作

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

現在，我認為您是在從集合數組中清除平台之前，沒有任何機會應用坐標並將其重新繪制到畫布上。 如果刪除對“ Blocks.clear（）”的調用，平台將移動。

Answer 2

我正在嘗試詳細解釋，請耐心等待。

同樣，在您當前的小提琴中，調用Draw方法時，集合數組的大小正在增加。 您可以調試代碼，否。 的塊數在幾秒鍾內增加到數千。

因此，這就是您的代碼在循環中的工作方式：

1. 您的代碼僅修改第一個塊的位置，即this.collection[0].blockX

2. 在位置相同的集合數組中再添加5個塊。 例如：第二次調用Update方法時，下面的行將被執行

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

   因此，將在數組的第6個位置添加一個塊。

3. 渲染時，由於點1而繪制具有更新坐標的第一個塊，並由於點2而再次繪制該塊。

這就是它出現兩次的原因。

您需要稍微修改此邏輯以解決該問題。

希望這是有道理的。