为什么我的角度偏离但运动在我的 2D 鸟瞰游戏中有效？

Question

我正在 JS 中创建鸟瞰图 2D 游戏，不使用 engine/library（更多用于学习挑战）。我已经让角色移动与 WASD 一起工作，角色将前进 (W) 或后退 (S)，具体取决于他们当前的 direction（A 向左转，D 向右转），但是当我输出角度时(direction) 在游戏时间我得到了意想不到的结果。

例如，当玩家面朝“向上”时，我按下“W”，玩家向上移动，得到输出的 direction 是 90° - 正如预期的那样。当面向“向下”并按下“S”时，玩家向下移动，并且 direction 是 270° - 正如预期的那样。

但是，当面向左时，我按下“W”，字符确实向左移动但是输出direction是0°，当面向+右移时，是180°——和我预期的完全相反。

这些是让我的玩家感动的功能：

// Turning
    _resetAngle(angle) {
        if (angle >= 360) { return 0 }
        if (angle < 0) { return 359 }
        return angle
    }

    updateDirection(player, keyboardInput) {
        let currentDirection = player.direction
        const turnedLeft = keyboardInput['a']
        const turnedRight = keyboardInput['d']

        if (turnedLeft) { currentDirection -= this.turnAngle }
        if (turnedRight) { currentDirection += this.turnAngle }

        player.setDirection(this._resetAngle(currentDirection))
    }

//Moving
    _calculateNewCoords(movingForward, entity) {
        let newX
        let newY

        // please ignore the code duplication, just testing for now
        if (movingForward) {
            newX = entity.getX() - entity.speed * Math.cos(entity.direction * (Math.PI / 180))
            newY = entity.getY() - entity.speed * Math.sin(entity.direction * (Math.PI / 180))
        }
        else {
            newX = entity.getX() + entity.speed * Math.cos(entity.direction * (Math.PI / 180))
            newY = entity.getY() + entity.speed * Math.sin(entity.direction * (Math.PI / 180))
        }
        return { newX, newY }
    }

    updateCoordinatesByKeyboard(entity, keyboardInput) {
        const movingForward = keyboardInput['w']
        const movingBackwards = keyboardInput['s']

        if ((movingForward && movingBackwards) || !(movingForward || movingBackwards)) { return }
        
        const { newX, newY } = this._calculateNewCoords(movingForward, entity)
        if (this._canMove(entity, newX, newY)) { return entity.setXY(newX, newY) }
    }

这是渲染玩家的部分：

drawCharacter(character, image) {
    const scale = this._getScale(character) // for a 'breathing' effect, makes character grow and shrink

    this.context.setTransform(scale, 0, 0, scale, this.windowDimensions.width / 2, this.windowDimensions.height / 2)
    this.context.rotate(character.direction * Math.PI / 180)
    this.context.drawImage(image, -image.width / 2, -image.height / 2)
}

打印结果player.direction:

输出：90（如预期）

输出：180（预期为 0）

输出：270（如预期）

输出：0（预计为 180）

输出：135（预计为 45）

输出：315（预计为 225）

再次重申 - 玩家移动符合预期（即按下 WASD 使玩家正确转身和移动） - 但输出 directions 是意外的，我想解决这个问题，因为将来我想将 NPC 设置为特定角度（即面向 45°）并期望他们面向该方向而无需计算 'mirror' 方向。

在此先感谢您的帮助！

Answer 1

我不会说你得到的值没有意义——恰恰相反——因为这是我所期望的。所以它更像是一个 'cosmetical' 问题，因为它对你的其他游戏对象来说也是一样的。

尽管如此，您可以通过以下方式轻松地将输出重新计算为您想要的值：

output = Math.abs((input + 90) % 360 - 270)

这将使：

90 -> 90

180 -> 0

270 -> 270

0 -> 180

135 -> 45

315 -> 225

为什么我的角度偏离但运动在我的 2D 鸟瞰游戏中有效？

Why are my angles off but movement works in my 2D, birds-eye view game?

javascript

trigonometry

html5-canvas

2d-games