在HTML5蛇游戲中為食物生成隨機位置時發生TypeError錯誤

Question

我目前正在使用HTML5 Canvas和Javascript制作多人蛇游戲。

下面的代碼是處理蛇食物隨機放置的功能。 這段代碼的問題是它在while（map [x] [y]）;中給了我x和y。 返回，盡管它確實會生成一個隨機數，但仍無法讀取。

這是確切的錯誤：

    "Uncaught TypeError: Cannot read property '20' of undefined"

“ 20”是隨機生成的數字（將是二維數組中食物的網格位置），並且每次我重新啟動程序或刷新網頁時都會更改。 有人可以解釋一下我需要進行哪些更改才能定義x和y並放置我的食物嗎？

                   function rand_food(){
                        var x, y;

                        do {
                            x = MR() * this.rect_w|0;
                            y = MR() * this.rect_h|0;
                        } 
                        while (map[x][y]);       <-- Here is the error                                              
                            map[x][y] = 1;

                            this.ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);                                      
                    }

這是定義地圖的另一個代碼段。

                this.map = [];
                    // Map positions
                    //*
                    for (i = 0; i < this.rect_w; i++){
                        map[i] = [];
                }//*/

在嘗試了Sean的建議之后，我的代碼現在看起來像這樣：但是它仍然給我同樣的錯誤。 還有其他建議嗎？

function SnakeGame(){                       
                    this.map = [];

                    for (i = 0; i < this.rect_w; i++){
                        this.map[i] = [];                           
                    }


                    function rand_food(){
                        var x, y;
                        console.log("Map length: " + this.map.length);
                        do {
                            x = MR() * this.rect_w|0;
                            y = MR() * this.rect_h|0;
                            console.log("x: " + x);
                            console.log("y: " + y);
                        } 
                        while (this.map[x][y]);                                                     
                            this.map[x][y] = 1;

                            this.ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);  

                    }

Answer 1

this.map和map不是同一件事。

如果您在對象內部，則this.map是對象的公共變量，而map是局部變量。

嘗試這樣的事情：

this.map = [];
// Map positions
for (var i = 0; i < 10; i++){
    this.map[i] = [];
}

並且在rand_food函數中還使用this.map 。

您可以通過以下兩種方式進行操作：

//using public variable
function SnakeGame() {
    this.map = [];
    // Map positions
    for (var i = 0; i < 10; i++){
        this.map[i] = [];
    }

    function rand_food() {
        // refer to this.map here
        this.map[0];
    }
};

// using local variable
function SnakeGame() {
    var map = [];
    // Map positions
    for (var i = 0; i < 10; i++){
        map[i] = [];
    }

    function rand_food() {
        // refer to map here
        map[0];
    }
};

Answer 2

如果未定義地圖，則通常會收到ReferenceError，因此已定義了地圖，但可能：

• 沒有分配給任何東西
• 蜜蜂使用后定義/分配
• 在沒有執行的條件下被蜜蜂吊起

例

if (0) {
    var foo = 1;
}
console.log(foo) //= undefined
console.log(foo[20]) // TypeError…
console.log(bar) // ReferenceError…