Canvas角色跳跃异常：特定按键与下蹲移动键冲突问题求助

问题现象 #

• 使用特定按键作为跳跃键时，按住下蹲键+移动键组合会无法触发跳跃：
  • 跳跃键设为w时，按住下蹲+左/右移动键都无法跳跃
  • 跳跃键设为c时，按住下蹲+左移可正常跳跃，但按住下蹲+右移无法跳跃
• 已排查出存在异常的按键列表（r：下蹲+右移无法跳跃；l：下蹲+左移无法跳跃；x：下蹲+双向移动均无法跳跃）：

  q: r,
  w: x,
  e: l,
  u: x,
  o: x,
  p: x,
  a: r,
  s: x,
  d: r,
  z: r,
  x: x,
  c: l
  

• 其余按键均正常；移除下蹲和移动函数后，按住按键的问题仍存在；仅测试玩家2的i键，发现仅部分正常，玩家1完全正常。

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body {
            margin: 0;
            background: rgb(255,255,255)
        }

        canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <canvas></canvas>
    <script src="script.js"></script>
</body>

</html>

JavaScript代码 #

const canvas = document.querySelector('canvas')
const context = canvas.getContext("2d")
const SPEED = 8
const GRAVITY = 1

canvas.width = 16 * 50
canvas.height = 9 * 50

const FLOOR = canvas.height - 30

jumpKey = 'w'

const keys = ['a', 's', 'd', 'j', 'k', 'l', jumpKey, 'i']

const pressed = {}
for (key of keys) {
    pressed[key] = false
}

const playerOneKeys = {
    up: jumpKey,
    left: 'a',
    down: 's',
    right: 'd',
}

const playerTwoKeys = {
    up: 'i',
    left: 'j',
    down: 'k',
    right: 'l',
}

window.addEventListener('keydown', (event) => {
    if (keys.includes(event.key)) {
        pressed[event.key] = true
    }
})

window.addEventListener('keyup', (event) => {
    if (keys.includes(event.key)) {
        pressed[event.key] = false
    }

})


class Player {
    constructor(keys, xValue) {
        this.width = 95
        this.height = 230

        this.position = {
            x: xValue,
            y: FLOOR - this.height
        }
        this.velocity = {
            x: 0,
            y: 0
        }

        this.keys = keys

        this.lookingRight = true
    }

    move() {
        if (pressed[this.keys.right]) {
            this.velocity.x = SPEED
            this.lookingRight = true

        } else if (pressed[this.keys.left]) {
            this.velocity.x = - SPEED
            this.lookingRight = false

        } else {
            this.velocity.x = 0
        }

        this.position.x += this.velocity.x
    }

    crouch() {
        if (pressed[this.keys.down] && this.position.y == FLOOR - this.height) {
            this.height = 230 * 1 / 2
            this.width = 95 + 20
            this.position.y = FLOOR - this.height
        
        } else if (!pressed[this.keys.down] && this.height == 230 / 2) {
            this.height = 230
            this.width = 95
            this.position.y = FLOOR - this.height
        }
    }

    jump() {
        this.velocity.y += GRAVITY

        if (pressed[this.keys.up] && this.position.y == FLOOR - this.height) {
            this.velocity.y = -14
        }

        this.position.y += this.velocity.y
        if (this.position.y >= FLOOR - this.height) {
            this.velocity.y = 0
            this.position.y = FLOOR - this.height
            pressed[this.keys.up] = false
        }
    }

    update() {
        this.jump()
        this.move()
        this.crouch()
    }

    draw() {
        context.fillStyle = (this.lookingRight) ? '#CEFCBA' : '#747ddc'
        context.fillRect(this.position.x, this.position.y, this.width, this.height)
    }
}

const firstPlayer = new Player(playerOneKeys, 100)
const secondPlayer = new Player(playerTwoKeys, canvas.width - 100 - 95)

function clearScreen() {
    context.fillStyle = 'Black'
    context.fillRect(0, 0, canvas.width, canvas.height)
}

function animation() {
    window.requestAnimationFrame(animation)
    clearScreen()
    firstPlayer.update()
    firstPlayer.draw()
    secondPlayer.update()
    secondPlayer.draw()
}

animation()

内容的提问来源于stack exchange，提问作者Seran16