碰撞检测简单的蛇游戏

时间:2014-01-18 11:43:15

标签: javascript html5 collision-detection

我和我的一个朋友一起创造了一个多人游戏。我们都是JavaScript的初学者,所以对我们来说这是一个真正的挑战。 到目前为止,我已经设法创建了这个:

http://jsfiddle.net/tbmluijten/RG76t/3/

这是我到目前为止的碰撞检测代码:

    Snake.prototype.collision = function (x, y, array) {
         for(var i = 0; i < Snake.length; i++){
            if(Snake.pieces[0].x == x && Snake.pieces[0].y == y)
            return true;
    }   
    return false;
   };

我遇到的问题是与蛇本身的碰撞。我无法弄清楚我做错了什么。请注意,我正在寻找与蛇本身的碰撞,而不是与边界的碰撞,因为我们要将循环放入其中。 : - )

1 个答案:

答案 0 :(得分:2)

简短的回答是 - 你根本没有检查碰撞!

工作碰撞:http://jsfiddle.net/RG76t/10/

说明:

首先,你需要将碰撞方法放在游戏循环函数中。

// line 32
if (game.snakes.length !== 0) {
    for (i = 0; i < game.snakes.length; i++) {
        var s = game.snakes[i];
        s.paint(ctx, game);

        // Check for collision.
        if (s.collision()) {
            // Do something, if the collision happens.
            alert('collision');
        }
    }
}

然后在碰撞方法中检查第一件是否与任何其他件碰撞。循环从第4件开始,因为蛇的头部不能真正触及它的“颈部”(第2和第3件)。

Snake.prototype.collision = function () {
    // Loop the snake pieces from the 4th one.
    for(var i = 3; i < this.length; i++){
        // Check if this piece collides with the first piece.
        if(
            this.pieces[0].x === this.pieces[i].x &&
            this.pieces[0].y === this.pieces[i].y
        ) {
            return true; // collision
        }
    }   
    return false;
};

另请注意,Snake.lengthSnake.pieces[i]已更改为this.lengththis.pieces[i]。关键字this指的是调用碰撞方法的Snake实例。当您在这段代码中使用Snake时,您正在检查构造函数的属性。