在 HTML5 蛇游戏中为食物生成随机位置时未捕获的 TypeError答案

【问题标题】：Uncaught TypeError while generating a random position for the food in a HTML5 snake game在 HTML5 蛇游戏中为食物生成随机位置时未捕获的 TypeError
【发布时间】：2012-03-08 10:29:53
【问题描述】：

我目前正在使用 Javascript 在 HTML5 Canvas 中制作多人 Snake 游戏。

下面的代码是处理蛇食物随机放置的函数。这段代码的问题在于它在 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);                                      
                    }

这是另一个定义地图的代码 sn-p。

                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);  

                    }

【问题讨论】：

标签： javascript html canvas scope while-loop

【解决方案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];
    }
};

【讨论】：

另请参阅Module Pattern 了解略有不同的方法
MR函数，this.rect，this.ctx呢？这些也应该在包含对象中声明（您现在似乎已经制作了 SnakeGame）。 Here 是一篇很好的 javascript OO 介绍性文章，它可能有助于理清思路。
MR函数是一个局部变量，rect_w和rect_h是公共变量，ctx也是公共变量。我使用“this”使它们都相同（公开）。但到目前为止没有任何效果。感谢您的文章，我刚刚阅读了该文章，但它对解决我的问题并没有多大帮助。我现在将继续在这个问题上打破我的头绪。再次感谢您的宝贵时间。
是否可以链接到您所拥有的公开版本，以便我们在上下文中查看代码？
好的，很抱歉我的回复迟了，但我昨天没有时间看它了。还有其他事情要做。你可以在这里下载项目link。打开 .rar 并查看 Snake2.html 和 JS 文件夹中的 snake.js。这些是我正在处理的文件。感谢您的宝贵时间。

【解决方案2】：

如果未定义地图，您通常会得到一个 ReferenceError，因此地图已定义但可能：

没有分配给任何东西
在蜜蜂使用后定义/分配
在不执行的条件下被定义的蜜蜂提升

例子

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

【讨论】：