Question

我目前正在尝试使用JavaScript和Canvas中的tutorial构建一个蛇游戏。目前我在这一行收到错误：grid.set(FOOD, randPos.x, randPos.y);这是setFood功能的一部分。我不明白.x的来源，因为我没有看到在该范围内定义的X或Y.如果有人能指出我正确的方向，那么我真的很感激，所以我可以完成我的第一场比赛！谢谢。

<script>
    //CONSTANTS
    var COLS=26;
    var ROWS=26;

    //ID's
    var EMPTY=0;
    var SNAKE=1;
    var FOOD=2;

    //Direction
    var LEFT=0;
    var UP=1;
    var RIGHT=2;
    var DOWN=3;

    var grid = {
        width: null, 
        height: null,
        _grid: null,

        init: function(d,c,r){
            this.width = c;
            this.height = r;

            this._grid = [];
            for(var x=0; x<c; x++){
                this._grid.push([]);
                for(var y=0; y < r; y++){
                    this._grid[x].push(d);
                }
            }
        },

        set: function(val,x,y){
            this._grid[x][y] = val;
        },

        get: function(x,y){
            this._grid[x][y];
        }
    }

    var snake = {
        direction: null,
        last: null,
        _queue: null,

        init: function(d,x,y){
            this.direction = d;
            this._queue = [];
            this.insert(x,y);
        },

        insert: function(x,y){
            this._queue.unshift({x:x, y:y});
            this.last = this._queue[0];
        },

        remove: function(){
            return this._queue.pop();
        }
    }

    function setFood(){
        var empty = [];
        for(var x=0; x<grid.width; x++){
            for(var y=0; y<grid.height; y++){
                if(grid.get(x,y)===EMPTY){
                    empty.push({x:x, y:y});
                }
            }
        }
        var randPos = empty[Math.floor(Math.random()*empty.length)];
        console.log("working");
        grid.set(FOOD, randPos.x, randPos.y);
        console.log("working???")
    }

    //Game objects
    var canvas, ctx, keystate, frames;

    function main(){
        canvas = document.createElement('canvas');
        canvas.width = COLS*20;
        canvas.height = ROWS*20;
        ctx = canvas.getContext('2D');
        document.body.appendChild(canvas);

        frames = 0;
        keystate = {};

        init();
        loop();
    }

    function init(){
        grid.init(EMPTY, COLS, ROWS);

        var sp = {x:Math.floor(COLS/2), y:ROWS-1};
        snake.init(UP, sp.x, sp.y);
        grid.set(SNAKE, sp.x, sp.y);

        setFood();
    }

    function loop(){
        update();
        draw();

        window.requestAnimationFrame(loop, canvas);
    }

    function update(){
        frames++;
    }

    function draw(){
        var tw = canvas.width/grid.width;
        var th = canvas.height/grid.height;

        for(var x=0; x<grid.width; x++){
            for(var y=0; y<grid.height; y++){
                switch(grid.get(x,y)){
                    case EMPTY:
                        ctx.fillStyle = "#fff";
                        break;
                    case SNAKE:
                        ctx.fillStyle = "#0ff";
                        break;
                    case FOOD:
                        ctx.fillStyle = "#f00";
                        break;
                }
                ctx.fillRect(x*tw, y*th, tw, th);
            }
        }
    }

    main();
</script>

Answer 1

查看setFood功能。在您收到错误的行上方几行，有一个循环使用包含empty和x字段的对象填充y集合。其中一个对象被分配给randPos变量。

错误可能是由于将值无效分配给randPos变量引起的。它未定义，因此它不包含必需的x字段。

<强>更新

您似乎错过了return函数中的grid.get(x,y)关键字，因此它应该如下所示：

get: function(x,y){
        return this._grid[x][y];
    }

请确认添加它是否解决了您的问题。

Answer 2

让我帮你调试：

grid.set(FOOD, randPos.x, randPos.y);正在给您一个错误，说您正在尝试从未定义的内容中获取x属性。

好的，所以randPos未定义。

randPos来自empty[Math.floor(Math.random()*empty.length)];。

empty是在嵌套for循环中创建的数组：empty.push({x:x, y:y});。你看到x来自何处？

正如Lukasz指出的那样，只有一个特定的情况，即像这样的数组解除引用是未定义的。如果您尝试执行类似

的操作，该怎么办？

var a = [];
console.log(a[0]);

原因empty是空的吗？没有网格单元=== EMPTY。

 get: function(x,y){
     this._grid[x][y];
 }

由于缺少return。

Answer 3

新答案。看看你的功能

    get: function(x,y){
        this._grid[x][y];
    }

并将其与您关联的视频中的内容进行比较

    get: function(x,y){
        return this._grid[x][y];
    }

你需要添加返回部分，否则函数将返回undefined并且名为empty的数组将不会获得任何内容，因此你的随机数生成器会建议你使用空[0]，这是undefined。

最后一个答案是用randPos [“x”替换randPos.x但是bbill在下面的评论中告知，那不是它。

无法阅读财产＆＃39; x＆＃39;未定义的（JavaScript）

3 个答案: