JavaScript打砖块游戏球嵌入Paddle内晃动问题求助

问题描述 #

基于Mozilla开发者的Breakout（打砖块）游戏制作的游戏中，球与paddle碰撞的特定时刻会嵌入paddle内来回晃动后弹出，问题演示：

问题原因 #

1. 重复的边界检测：代码中存在两段完全相同的X轴边界碰撞检测，属于冗余代码。
2. 碰撞后未修正球的位置：当前碰撞逻辑仅反转球的Y轴速度，但未将球的位置重置到paddle上方，导致球可能已经部分嵌入paddle内部，下一帧再次触发碰撞检测，反复反转速度，出现晃动现象。
3. paddle碰撞的Y轴判断条件不准确：原代码用canvas.height - (ballRadius * 2)作为判断阈值，而正确的paddle顶部位置应该是paddleY - ballRadius（paddleY是paddle的Y坐标，需考虑球的半径）。

修复方案 #

修改关键点： #

• 移除重复的X轴边界检测代码。
• 修正paddle碰撞的Y轴判断条件，使用正确的paddle顶部位置。
• 碰撞触发时将球的Y坐标重置到paddle顶部，避免嵌入。

修复后的完整代码： #

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const ballRadius = 10;
const paddleHeight = 10;
const paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

const paddleY = canvas.height - paddleHeight;

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

    // X轴边界碰撞处理
    if (x + dx < ballRadius || x + dx > canvas.width - ballRadius) {
        dx = -dx;
    }

    // Y轴边界与paddle碰撞处理
    if (y + dy < ballRadius) {
        dy = -dy;
    } else if (y + dy > paddleY - ballRadius) {
        if (x > paddleX && x < paddleX + paddleWidth) {
            // 将球重置到paddle顶部，避免嵌入
            y = paddleY - ballRadius;
            dy = -dy;
        } else if (y + ballRadius > canvas.height) {
            alert("游戏结束");
            document.location.reload();
            clearInterval(interval);
        }
    }

    // paddle移动控制
    if (rightPressed) {
        paddleX += 7;
        if (paddleX + paddleWidth > canvas.width) {
            paddleX = canvas.width - paddleWidth;
        }
    } else if (leftPressed) {
        paddleX -= 7;
        if (paddleX < 0) {
            paddleX = 0;
        }
    }

    x += dx;
    y += dy;
}

// 键盘控制事件
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = true;
    } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = false;
    } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = false;
    }
}

const interval = setInterval(draw, 10);

额外说明 #

修复后，球碰撞paddle时会被立即重置到paddle上方，避免了嵌入情况，同时反转Y轴速度，恢复正常反弹逻辑；另外将canvas.clientWidth和canvas.clientHeight改为canvas.width和canvas.height，确保画布清除范围准确。

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