Как я могу перемещать элемент изображения по оси x при нажатии клавиши с помощью Javascript?

В моем проекте Django у меня есть "спрайт", который является элементом изображения в шаблоне HTML. Я хочу сделать небольшую интерактивную игру на странице, когда при нажатии на клавишу "A", изображение будет двигаться по оси x. Как я могу добиться этого с помощью JavaScript? Я пытался изменить значение offsetLeft с помощью .offsetLeft и значение x position с помощью обновления атрибута .style, но не смог справиться с этим двумя способами.

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;
            }
        });
    };
})

Я думаю, что самым простым способом позиционирования элементов относительно контейнера будет установка позиции для контейнера как relative и для дочернего элемента как absolute, затем используйте свойства стиля left и top для позиционирования элемента по своему усмотрению. Таким образом, в вашем случае вы можете сделать что-то вроде этого -

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    function limitInPercent(value) {
      if (value < 0) return 0;
      if (value > 100) return 100;
      return value;
    }
    const SCALE = 10;
    document.addEventListener("DOMContentLoaded", function() {

      const sprite = document.getElementById("sprite");


      document.addEventListener("keypress", function(event) {
        const top = sprite.style.top || 0;
        const left = sprite.style.left || 0;
        if (event.key == "a") {
          sprite.style.left = limitInPercent(parseInt(left) - SCALE) + "%";
        } else if (event.key == "d") {
          sprite.style.left = limitInPercent(parseInt(left) + SCALE) + "%";
        } else if (event.key == "w") {
          sprite.style.top = limitInPercent(parseInt(top) - SCALE) + "%";
        } else if (event.key == "s") {
          sprite.style.top = limitInPercent(parseInt(top) + SCALE) + "%";
        }
      });
    })
  </script>

</head>

<body>
  <div class="col">
    <div id="sprite">x</div>
  </div>
</body>

</html>
Вернуться на верх