如何用JavaScript实现按键触发图片元素沿X轴移动？

在Django项目的HTML模板中，有一个作为sprite的图片元素，想要实现按下A键时让该图片沿X轴移动的交互效果。尝试通过offsetLeft修改偏移值、更新.style属性调整X位置均未成功，求可行的JavaScript实现方案。

现有代码 #

contact.html #

{% load static %}
{% block script %}
    <script src="{% static 'potbs/contact.js' %}"></script>
{% endblock %}

{% block body %}
<div class="col">
    <img src="media/images/phone.png" alt="phone" class="rounded floar-start">
    <img src="media/images/stick.png" class="rounded float-end" id="sprite" alt="..." style="margin-top:100px;">
    <img src="media/images/wasd.png"  class="rounded float-end" id="wasd" alt="..." style="margin-top:100px;display: none;">
    <button class="btn btn-primary float-end" id="start">Start</button>
</div>
{% endblock %}

contact.js #

document.addEventListener("DOMContentLoaded", function(){

    const button = document.getElementById("start");
    const wasd = document.getElementById("wasd");
    const sprite = document.getElementById("sprite");

    
    button.onclick = function(){
        button.style.display = "none";
        wasd.style.display = "block"
        document.addEventListener("keypress",function(event){
            if(event.key == "a"){
                wasd.style.display = "none";
                sprite.offsetLeft = sprite.offsetLeft + 10;
            }
        });
    };
})

问题原因分析 #

1. offsetLeft是只读属性，无法直接赋值修改元素位置
2. 图片元素默认是static定位，这种定位模式下修改left属性不会生效
3. keypress事件已被废弃，且对大小写按键、非字符按键的兼容性较差

解决方案 #

步骤1：给sprite添加非静态定位 #

修改HTML中sprite元素的样式，添加position: relative（或absolute，根据页面布局需求选择），只有非静态定位的元素，修改位置属性才会生效：

<img src="media/images/stick.png" class="rounded float-end" id="sprite" alt="..." style="margin-top:100px; position: relative;">

步骤2：修改JavaScript逻辑实现移动 #

推荐两种实现方式：

方式一：修改style.left属性

需要维护当前位置变量，并给值添加单位（如px）：

document.addEventListener("DOMContentLoaded", function(){
    const button = document.getElementById("start");
    const wasd = document.getElementById("wasd");
    const sprite = document.getElementById("sprite");
    // 初始化X轴位置
    let currentX = 0;

    button.onclick = function(){
        button.style.display = "none";
        wasd.style.display = "block";
        // 使用keydown替代keypress，兼容性更好
        document.addEventListener("keydown",function(event){
            // 同时支持小写a和大写A
            if(event.key.toLowerCase() === "a"){
                wasd.style.display = "none";
                currentX += 10;
                // 必须添加px单位
                sprite.style.left = `${currentX}px`;
            }
        });
    };
})

方式二：使用transform: translateX()（推荐）

transform不会触发页面重排，性能更优，适合动画场景：

document.addEventListener("DOMContentLoaded", function(){
    const button = document.getElementById("start");
    const wasd = document.getElementById("wasd");
    const sprite = document.getElementById("sprite");
    let currentX = 0;

    button.onclick = function(){
        button.style.display = "none";
        wasd.style.display = "block";
        document.addEventListener("keydown",function(event){
            if(event.key.toLowerCase() === "a"){
                wasd.style.display = "none";
                currentX += 10;
                sprite.style.transform = `translateX(${currentX}px)`;
            }
        });
    };
})

额外注意事项 #

• 若使用absolute定位，需确保父元素（如.col）设置position: relative，避免sprite脱离预期布局范围
• 可添加边界判断逻辑，防止sprite移出可视区域
• 若需要连续按下A键持续移动，可结合setInterval和clearInterval实现

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