如何在CodeHS的JS Graphics中实现图形平滑移动？

你当前的代码通过keyDownMethod实现了按键单次移动，但要实现按住按键时的平滑持续移动，需要借助状态跟踪+定时动画循环的方式，以下是具体解决方案：

问题分析 #

你之前尝试的for循环和setTimeout无效的原因：

• for循环执行速度极快，方块会瞬间完成所有位移，视觉上就是跳转
• 循环内的setTimeout会被一次性全部调度，等待结束后批量执行，无法形成连续动画

解决方案代码 #

let centerX = getWidth()/2;
let centerY = getHeight()/2;
let sqr;
// 记录按键按下状态
const keys = {
    up: false,
    down: false,
    left: false,
    right: false
};

function start(){
    createSquare();
    // 绑定按键按下/抬起事件，更新状态
    keyDownMethod(onKeyDown);
    keyUpMethod(onKeyUp);
    // 启动动画循环，每16ms执行一次（约60帧/秒）
    setInterval(updateMovement, 16);
}

function createSquare(){
    sqr = new Rectangle(50,50);
    sqr.setPosition(centerX - 25, centerY - 25);
    add(sqr);
}

function onKeyDown(e){
    // 更新对应按键的按下状态
    if(e.keyCode === Keyboard.letter('W') || e.keyCode === Keyboard.UP){
        keys.up = true;
    } else if(e.keyCode === Keyboard.letter('S') || e.keyCode === Keyboard.DOWN){
        keys.down = true;
    } else if(e.keyCode === Keyboard.letter('A') || e.keyCode === Keyboard.LEFT){
        keys.left = true;
    } else if(e.keyCode === Keyboard.letter('D') || e.keyCode === Keyboard.RIGHT){
        keys.right = true;
    }
}

function onKeyUp(e){
    // 更新对应按键的抬起状态
    if(e.keyCode === Keyboard.letter('W') || e.keyCode === Keyboard.UP){
        keys.up = false;
    } else if(e.keyCode === Keyboard.letter('S') || e.keyCode === Keyboard.DOWN){
        keys.down = false;
    } else if(e.keyCode === Keyboard.letter('A') || e.keyCode === Keyboard.LEFT){
        keys.left = false;
    } else if(e.keyCode === Keyboard.letter('D') || e.keyCode === Keyboard.RIGHT){
        keys.right = false;
    }
}

function updateMovement(){
    // 根据按键状态持续移动，步长设为1-2像素提升平滑度
    if(keys.up){
        sqr.move(0, -2);
    }
    if(keys.down){
        sqr.move(0, 2);
    }
    if(keys.left){
        sqr.move(-2, 0);
    }
    if(keys.right){
        sqr.move(2, 0);
    }
}

关键说明 #

• 按键状态跟踪：用keys对象记录每个方向键是否被按住，替代单次触发的move函数
• 动画循环：setInterval(updateMovement, 16)会每隔16毫秒执行一次移动逻辑，接近屏幕刷新率，保证动画流畅
• 小步长移动：将每次移动的步长从5像素改为2像素，视觉上更平滑，你可以根据需求调整这个数值

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