0

js/jquery で基本的なスネーク ゲームを実装しようとしています。そして、これが私がこれまでに持っているものです：

$('document').ready(function() {

    Game = {
        Snake: function(startingLength) {
            this.snakeComponents = [], this.direction = 'right', this.length = startingLength;

            growSnake = function() {
                this.length += 1;
            }
        },

        gameSnake: {},

        gameSpeed: 0,

        init: function(startingSnakeLength, gameSpeedParam) {


            $.extend(this.gameSnake, new Game.Snake(startingSnakeLength));
            this.gameSpeed = gameSpeedParam;

            for (var i = 0; i < startingSnakeLength; i++) {
                this.gameSnake.snakeComponents.push({
                    x: i,
                    y: 0
                });
            }
            setInterval(Game.update, this.gameSpeed);
        },

        update: function() {
            dx = {
                right: 1,
                left: -1,
                up: 0,
                down: 0
            };
            dy = {
                right: 0,
                left: 0,
                up: 1,
                down: -1
            };

            var snakeLength = this.gameSnake.snakeComponents.length;
            var newSnakeHeadX = this.gameSnake.snakeComponents[snakeLength - 1].x + dx[this.gameSnake.direction];
            var newSnakeHeadY = this.gameSnake.snakeComponents[snakeLength - 1].y + dy[this.gameSnake.direction];

            //update snake components
            this.gameSnake.snakeComponents[snakeLength - 1].x = newSnakeHeadX;
            this.gameSnake.snakeComponents[snakeLength - 1].y = newSnakeHeadY;

            for (var i = 0; i < snakeLength - 1; i++) {
                this.gameSnake.snakeComponents[i].x = this.gameSnake.snakeComponents[i + 1].x;
                this.gameSnake.snakeComponents[i].y = this.gameSnake.snakeComponents[i + 1].y;
            }

            Game.render();
        },

        render: function() {
            for (var i = 0; i < this.gameSnake.length; i++) {
                console.log('Snake position: (' + this.gameSnake.snakeComponents[0].x + ',' + this.gameSnake.snakeComponents[0].y + '), ' + '(' + gameSnake.snakeComponents[1].x + ',' + gameSnake.snakeComponents[1].y + '), (' + gameSnake.snakeComponents[1].x + ',' + gameSnake.snakeComponents[1].y + ')')
            };
        }

    };


    Game.init(3, 1000);


});

これで、init メソッドで Snake インスタンス (this.gameSnake) にアクセスできるようになりましたが、コードが update メソッドにあると undefined になります。私は何が欠けていますか/間違っていますか?

4

1 に答える 1

1

setInterval を使用すると、実行コンテキストが正しくないという古くからの問題に直面しています。コードを次のように変更しますrender。

    render: function() {
        for (var i = 0; i < Game.gameSnake.length; i++) {
            console.log('Snake position: (' + Game.gameSnake.snakeComponents[0].x + ',' + Game.gameSnake.snakeComponents[0].y + '), ' + '(' + Game.gameSnake.snakeComponents[1].x + ',' + Game.gameSnake.snakeComponents[1].y + '), (' + Game.gameSnake.snakeComponents[1].x + ',' + Game.gameSnake.snakeComponents[1].y + ')')
        };
    }

機能しない理由thisは、次のように関数を呼び出していないためですGame.update();。

代わりに、関数を に引数として渡し、setIntervalグローバル スコープで実行します (つまり、update実行時thisにウィンドウ オブジェクトになります)。thisはもう参照しないのでGame、代わりにGame明示的に参照することにします。

JS スコープに関する優れたチュートリアルがたくさんあります。それらを参照することをお勧めします。幸運を！

于 2012-12-01T11:10:21.593 に答える