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

Uncaught TypeError while generating a random position for the food in a HTML5 snake game

本文关键字：位置 TypeError 随机 游戏 HTML5      更新时间：2023-09-26

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

下面的代码是处理蛇食物随机放置的函数。这段代码的问题是，它给了我while中的x和y（map[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);  
                    }

this.map和map不是一回事。

如果您在对象内部，则this.map是该对象的公共变量，map是局部变量。

试试这样的东西：

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

并且在CCD_ 5函数中也使用CCD_。

这里有两种可能的方法：

//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];
    }
};

如果没有定义映射，通常会得到ReferenceError，所以定义了映射，但可能是：

  • 未分配给任何内容
  • 使用后定义/分配
  • 通过在不执行的条件下定义的直线吊装

示例

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