JavaScript游戏——无法跨越的物体

Question

我在学习 JavaScript 时有一个项目要做。这是一个简单的游戏。您必须从 Canvas 的底部到顶部。我想在 Canvas 上放置一 block 无法跨越的岩石，玩家需要绕过它。你能帮我解决这个问题吗？

这就是我控制播放器的方式

Player.prototype.handleInput = function () {
    var self = this;
    console.log(self);
    document.addEventListener('keyup', function (event) {
        var keyName = event.which || event.keyCode;

        switch (keyName) {
            case true:
                return self.x = 0, self.y = 0;


            case 37:
            case 65:
            case 100:
                return self.x -= 20;

            case 38:
            case 87:
            case 104:
                return self.y -= 20;

            case 39:
            case 68:
            case 102:
                return self.x += 20;

            case 40:
            case 83:
            case 101:
                return self.y += 20;
        }
    })

}

这是岩石构造函数

Rock = function(){
    this.x = getRandomInt(50, 700);
    this.y = getRandomInt(50, 400);
    this.width = 101;
    this.height = 171;
}

我还有一个冲突检测以及来自 MDN 站点的内容

function objectCollision(obj1, obj2) {
    var rect1 = obj1;
    var rect2 = obj2;
    if (rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.height + rect1.y > rect2.y) {
        return true;
    }
    return false;
}

我尝试过不同的方法，但我无法弄清楚。当玩家从任何一侧击中岩石而无法进一步移动时，我需要一个解决方案。

谢谢

Answer 1

在您的 keyup 事件处理程序中，在现有开关周围尝试类似以下操作:

    var old_x = self.x;
    var old_y = self.y;
    switch (keyName) {
        ...
    }
    for (var i in obstacles) {
        if (obstacles[i] != self && objectCollision(self, obstacles[i])) {
            self.x = old_x;
            self.y = old_y;
            break;
        }
    }

我假设你会遇到一系列障碍物，而不仅仅是一 block 石头。