JavaScript 实现HTML元素持续按键移动教程

// 示例：使用 keyup 无法实现持续移动
let myCircle = document.querySelector('.ball');
// 假设 myCircle 已经定位
// myCircle.style.position = 'absolute';
// myCircle.style.left = '0px';

window.addEventListener('keyup', (event) => {
    if (event.key === 'ArrowLeft') {
        // 这段代码只会在 'ArrowLeft' 键被释放时执行一次
        myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';
    }
});

// 示例：使用 while 循环导致浏览器卡死
window.addEventListener('keyup', (event) => {
    if (event.key === 'ArrowLeft') {
        let key_left = true; // 在这里设置一个局部变量
        while (key_left) {
            // 这将导致一个无限循环，阻塞主线程
            // 浏览器会无响应甚至崩溃
            myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';
            // 实际上，这里没有机制能让 key_left 变为 false
            // 即使有，这种同步的、高频的 DOM 操作也会导致性能问题
        }
    }
});

// HTML 结构示例：
// <div class="ball" style="width:50px; height:50px; background-color:red;"></div>

// JavaScript 代码：
let myCircle = document.querySelector('.ball');

// 页面加载时初始化元素位置
window.addEventListener('load', () => {
    myCircle.style.position = 'absolute'; // 确保元素可以被定位
    myCircle.style.left = '0px';
    myCircle.style.top = '120px'; // 示例初始位置
});

// 使用 keydown 事件监听器
window.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft') {
        // 每次 keydown 事件触发时，将元素向左移动 5 像素
        myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';
    } else if (event.key === 'ArrowRight') {
        myCircle.style.left = parseInt(myCircle.style.left) + 5 + 'px';
    }
    // 阻止默认滚动行为，例如按下方向键时页面滚动
    event.preventDefault();
});

// HTML 结构示例：
// <div class="ball" style="width:50px; height:50px; background-color:red; border-radius:50%;"></div>

// JavaScript 代码：
let myCircle = document.querySelector('.ball');
const moveSpeed = 5; // 定义移动速度

// 存储按键状态的对象
const keysPressed = {
    ArrowLeft: false,
    ArrowRight: false,
    ArrowUp: false,
    ArrowDown: false
};

// 页面加载时初始化元素位置
window.addEventListener('load', () => {
    myCircle.style.position = 'absolute';
    myCircle.style.left = '0px';
    myCircle.style.top = '120px';
    // 启动动画循环
    gameLoop();
});

// 监听按键按下事件
window.addEventListener('keydown', (event) => {
    if (keysPressed.hasOwnProperty(event.key)) {
        keysPressed[event.key] = true;
        // 阻止默认行为，例如方向键滚动页面
        event.preventDefault();
    }
});

// 监听按键释放事件
window.addEventListener('keyup', (event) => {
    if (keysPressed.hasOwnProperty(event.key)) {
        keysPressed[event.key] = false;
    }
});

// 动画循环函数
function gameLoop() {
    let currentLeft = parseInt(myCircle.style.left);
    let currentTop = parseInt(myCircle.style.top);

    if (keysPressed.ArrowLeft) {
        currentLeft -= moveSpeed;
    }
    if (keysPressed.ArrowRight) {
        currentLeft += moveSpeed;
    }
    if (keysPressed.ArrowUp) {
        currentTop -= moveSpeed;
    }
    if (keysPressed.ArrowDown) {
        currentTop += moveSpeed;
    }

    // 更新元素位置
    myCircle.style.left = currentLeft + 'px';
    myCircle.style.top = currentTop + 'px';

    // 请求浏览器在下一次重绘时再次调用 gameLoop
    requestAnimationFrame(gameLoop);
}