如何通过方向键控制Canvas中的蓝色方块移动？

我来帮你补全方向键控制蓝色方块移动的功能，基于你给出的代码片段，我会完善所有关键逻辑，同时加入边界检测防止方块移出画布，让整个交互更流畅。

完整代码实现 #

const WIDTH = 640;
const HEIGHT = 480;
const PLAYER_SIZE = 20;
const REPAINT_DELAY = 50;
const EASY_DELAY = 1750;
const MODERATE_DELAY = 1000;
const HARD_DELAY = 750;
const MAX_BLOCKS = 100;

var context;
// 初始化方块到画布中心位置
var DX = WIDTH / 2 - PLAYER_SIZE / 2;
var DY = HEIGHT / 2 - PLAYER_SIZE / 2;
var rightKey = false;
var leftKey = false;
var upKey = false;
var downKey = false;
// 控制方块移动速度，可按需调整
const MOVE_SPEED = 5;

window.onload = init;

function init() {
    // 获取Canvas元素和绘图上下文
    const canvas = document.getElementById('gameCanvas');
    context = canvas.getContext('2d');
    
    // 设置Canvas尺寸与常量匹配
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    
    // 绑定键盘按下/松开事件
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);
    
    // 启动游戏循环，定时更新画面
    setInterval(gameLoop, REPAINT_DELAY);
}

// 处理键盘按下事件，记录方向键状态
function handleKeyDown(e) {
    switch(e.key) {
        case 'ArrowRight':
            rightKey = true;
            e.preventDefault(); // 阻止浏览器默认的页面滚动行为
            break;
        case 'ArrowLeft':
            leftKey = true;
            e.preventDefault();
            break;
        case 'ArrowUp':
            upKey = true;
            e.preventDefault();
            break;
        case 'ArrowDown':
            downKey = true;
            e.preventDefault();
            break;
    }
}

// 处理键盘松开事件，重置方向键状态
function handleKeyUp(e) {
    switch(e.key) {
        case 'ArrowRight':
            rightKey = false;
            break;
        case 'ArrowLeft':
            leftKey = false;
            break;
        case 'ArrowUp':
            upKey = false;
            break;
        case 'ArrowDown':
            downKey = false;
            break;
    }
}

// 游戏主循环：先更新位置，再绘制画面
function gameLoop() {
    updatePlayerPosition();
    drawGame();
}

// 更新方块位置，加入边界检测防止移出画布
function updatePlayerPosition() {
    if (rightKey) {
        DX += MOVE_SPEED;
        // 限制方块右侧不超出画布
        if (DX + PLAYER_SIZE > WIDTH) {
            DX = WIDTH - PLAYER_SIZE;
        }
    }
    if (leftKey) {
        DX -= MOVE_SPEED;
        // 限制方块左侧不超出画布
        if (DX < 0) {
            DX = 0;
        }
    }
    if (upKey) {
        DY -= MOVE_SPEED;
        // 限制方块顶部不超出画布
        if (DY < 0) {
            DY = 0;
        }
    }
    if (downKey) {
        DY += MOVE_SPEED;
        // 限制方块底部不超出画布
        if (DY + PLAYER_SIZE > HEIGHT) {
            DY = HEIGHT - PLAYER_SIZE;
        }
    }
}

// 绘制游戏画面：先清屏，再画蓝色方块
function drawGame() {
    // 用白色填充整个画布，清除上一帧内容
    context.fillStyle = '#ffffff';
    context.fillRect(0, 0, WIDTH, HEIGHT);
    
    // 绘制蓝色玩家方块
    context.fillStyle = '#0000ff';
    context.fillRect(DX, DY, PLAYER_SIZE, PLAYER_SIZE);
}

关键逻辑说明 #

• 键盘状态记录：通过keydown和keyup事件跟踪方向键的按下/松开状态，支持按住方向键持续移动，同时阻止了浏览器默认的页面滚动行为。
• 游戏循环：以REPAINT_DELAY（50ms）为间隔重复执行更新和绘制操作，保证画面流畅。
• 边界检测：在更新位置时判断方块是否超出画布范围，及时修正位置，避免方块消失在视野外。
• 移动速度控制：新增MOVE_SPEED常量，你可以根据需求调整这个值来改变方块移动的快慢。

需补充的HTML代码 #

别忘了在你的页面中添加Canvas元素：

<canvas id="gameCanvas"></canvas>

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