如何用JavaScript实现基于方向键控制的基础2D定向移动功能

现有代码问题排查 #

• 变量声明错误：重复定义了rightDirection，缺少leftDirection变量的声明，会导致左方向控制失效
• 位置变量未初始化：marginTopNow和marginLeftNow没有读取人物初始坐标，直接运算会得到NaN
• 无键盘事件监听：没有绑定按键按下、抬起的事件，无法同步按键状态
• 位置修改未生效：move函数仅完成了位置计算，没有将结果同步到人物元素的样式上
• 无动画驱动：没有持续触发move函数的机制，无法实现连续移动
• 无边界校验：没有限制移动范围，人物会移出黑色背景画布

完整可运行JavaScript代码 #

var canvas;
var ctx;
var person;

var marginTopNow;
var marginLeftNow;

// 修正变量声明错误
var leftDirection = false;
var upDirection = false;
var rightDirection = false;
var downDirection = false;

const LEFT_KEY = 37;
const UP_KEY = 38;
const RIGHT_KEY = 39;
const DOWN_KEY = 40;

function init() {
    canvas = document.getElementById('myCanvas');
    person = document.getElementById('person');
    ctx = canvas.getContext('2d');
    // 初始化人物坐标，读取初始style的top、left转成数字
    marginTopNow = parseInt(person.style.top);
    marginLeftNow = parseInt(person.style.left);
    // 绑定键盘事件
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);
    // 启动动画循环
    animationLoop();
}

function handleKeyDown(e) {
    switch(e.keyCode) {
        case LEFT_KEY:
            leftDirection = true;
            break;
        case UP_KEY:
            upDirection = true;
            break;
        case RIGHT_KEY:
            rightDirection = true;
            break;
        case DOWN_KEY:
            downDirection = true;
            break;
    }
}

function handleKeyUp(e) {
    switch(e.keyCode) {
        case LEFT_KEY:
            leftDirection = false;
            break;
        case UP_KEY:
            upDirection = false;
            break;
        case RIGHT_KEY:
            rightDirection = false;
            break;
        case DOWN_KEY:
            downDirection = false;
            break;
    }
}

function animationLoop() {
    move();
    // 持续调用动画循环，性能优于setInterval
    requestAnimationFrame(animationLoop);
}

function move() {
    // 把else if改成独立if，支持多键同时按实现斜向移动
    if(leftDirection) {
        marginLeftNow -= 1;
    }
    if(upDirection) {
        marginTopNow -= 1;
    }
    if(rightDirection) {
        marginLeftNow += 1;
    }
    if(downDirection) {
        marginTopNow += 1;
    }
    // 边界判断，不能移出黑色画布
    // 左边界
    if(marginLeftNow < 0) marginLeftNow = 0;
    // 右边界：画布宽度减去人物宽度
    if(marginLeftNow > 300 - 8) marginLeftNow = 300 - 8;
    // 上边界
    if(marginTopNow < 0) marginTopNow = 0;
    // 下边界：画布高度减去人物高度
    if(marginTopNow > 300 - 20) marginTopNow = 300 - 20;
    // 把计算后的位置赋值给人物元素，记得加px单位
    person.style.left = marginLeftNow + 'px';
    person.style.top = marginTopNow + 'px';
}

额外优化说明 #

如果需要调整移动速度，直接修改move函数里每次增减的数值即可，比如改成marginLeftNow += 2就能让移动速度翻倍。

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