Javascript:可以访问对象并显示它，但不是该对象的有效属性

我的控制台消息：

未捕获的类型错误： 无法读取未定义的属性"x"。

但是，当我登录到控制台时，snake.head对象，它给了我一个有效的"响应"！怎么可能定义了一个对象，但是当尝试将该对象的属性存储在变量中时，它不起作用？我还尝试继续游戏，而不将 x 和 y 位置存储在变量中，而是在头部对象中访问它，你猜怎么着？不行。我什至尝试只访问game.SNAKE[game.SNAKE.length-1].(property)但它也不起作用！但是，当我在 snake.init 函数中尝试它时，它工作正常，但我不能这样做，因为我的 init 只运行一次！

var game = {};
game.contextBackground = document.getElementById("bgCanvas").getContext("2d");
game.contextSnake = document.getElementById("snakeCanvas").getContext("2d");
game.contextFruit = document.getElementById("fruitCanvas").getContext("2d");
game.keys = [];
game.SNAKE = [];
game.width = document.getElementById("snakeCanvas").width;
game.height = document.getElementById("snakeCanvas").height;

game.COLUMNS = 35;
game.ROWS = 35;
game.boxSide = game.width/game.COLUMNS;

game.snake = {
    snakeLength: 3,
    tailx: null,
    taily: null,
    head: null,
    headx: null,
    heady: null,
    direction: "right",
    createSnake: function (snakeLength) {
        game.SNAKE.length = this.snakeLength;
        for (i=0;i<snakeLength;i++) {
            game.SNAKE[i] = {
                x: i ,
                y: 0
            };
        }
    },
    updateSnake: function (length) {
        this.head = game.SNAKE[length-1];
        this.headx = this.head.x;
        for (i in game.SNAKE) {
        }
    },
    init: function() {
        this.createSnake(this.snakeLength);

    },
    update: function() {
        this.updateSnake(game.SNAKE.length);
        console.log(this.head);
        for (i in game.SNAKE) {
            game.SNAKE[i].x ++;
        }
    },

    render: function() {
        game.contextSnake.clearRect(0,0,game.width,game.height);
        for (i in game.SNAKE) {
            drawBox(game.SNAKE[i].x,game.SNAKE[i].y,game.contextSnake,"green");
        }
    }
};
game.fruit = {
    x: null,
    y: null,
    newFruitNecessary: true,
    init: function() {
    },
    update: function() {
    },
    render: function() {
    }
};
function init() {
    loop();
    game.snake.init();
    game.fruit.init();
}
function update() {
    game.snake.update();
    game.fruit.update();
}
function render() { 
    game.fruit.render();
    game.snake.render();
}
function loop() {
    setTimeout(function(){
        loop();
    },1000/10);
    update();
    render();
} 
function drawBox (gridx,gridy,context,color) {
    if (color == null) {
        color = "black";
    }
    context.fillStyle = color;
    context.fillRect((gridx * game.boxSide), (gridy * game.boxSide), game.boxSide,game.boxSide);
}
init();