Кто-нибудь может помочь с кодом на JavaScript?

Как можно создать 4 кнопки для перемещения персонажа в разные направления при их нажатии? У меня есть код, но он работает только для одной кнопки, а при добавлении второй кнопки возникают проблемы. Можете помочь исправить код, чтобы все кнопки работали правильно? Вот мой текущий код:

```html
<img src="https://steamuserimages-a.akamaihd.net/ugc/450740801075385013/CF7624F9D506C516C1D248007A07A46CE622125E/?imw=512&amp;imh=456&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true" 
            id="character">

<img id="moveButtonRight" onclick="moveCharacterRight()" src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614525823_30-p-strelka-na-belom-fone-33.png">
<img src="https://avatars.mds.yandex.net/i?id=e79d1013b5de5d094bb851d70a15b6d9d8654de0-11516533-images-thumbs&n=13" onclick="moveCharacterLeft()" id="moveButtonLeft">
*{
    margin: 0;
    padding: 0;
}

#character{
    position: absolute;
    margin-top: 510px;
    margin-left: 900px;
    width: 150px;
    height: 100px;
}

#moveButtonRight{
    position: fixed;
    width: 150px;
    height: 100px;
    margin-top: 700px;
    margin-left: 400px;
}

#moveButtonLeft{
    position: fixed;
    width: 150px;
    height: 100px;
    margin-top: 700px;
    margin-left: 200px;
}
```

```javascript
function moveCharacterRight(){
    var character= document.getElementById("character")
    var currentPosition= parseInt(character.style.left,10)||0;
    var shiftAmount = 50;
    character.style.left=currentPosition+shiftAmount+"px";
}

function moveCharacterLeft(){
    var character= document.getElementById("character")
    var currentPosition= parseInt(character.style.right,10)||0;
    var shiftAmount = 50;
    character.style.right=currentPosition+shiftAmount+"px";
}
```
  • 30 января 2024 г. 15:28
Ответы на вопрос 2
Ваш текущий код немного неправильно реализует передвижение влево. Вы используете для этого `style.right`, но вам следует также использовать `style.left`, чтобы управлять положением элемента `#character`. Мы просто будем изменять это значение в обоих функциях, но для движения влево будем отнимать значение сдвига.

Вот обновленный код:

```javascript
function moveCharacterRight() {
    var character = document.getElementById("character");
    var currentPosition = parseInt(character.style.marginLeft, 10) || 900; // По умолчанию margin-left для #character задан в CSS
    var shiftAmount = 50;
    character.style.marginLeft = currentPosition + shiftAmount + "px"; // сдвиг вправо
}

function moveCharacterLeft() {
    var character = document.getElementById("character");
    var currentPosition = parseInt(character.style.marginLeft, 10) || 900; // используйте ту же переменную для положения element
    var shiftAmount = 50;
    character.style.marginLeft = currentPosition - shiftAmount + "px"; // сдвиг влево
}
```

Теперь функция `moveCharacterLeft` будет корректно передвигать вашего персонажа влево, а `moveCharacterRight` - вправо.

Также заметьте, что я изменил использование `style.left` на `style.marginLeft`, чтобы совпадать со свойством, установленным в CSS (`margin-left`). Вам нужно будет убедиться, что у элементов нет противоречивых стилей позиционирования.

Если вы хотите добавить кнопки для движения вверх и вниз, вы можете создать дополнительные функции следующим образом:

```javascript
function moveCharacterUp() {
    var character = document.getElementById("character");
    var currentPosition = parseInt(character.style.marginTop, 10) || 510; // По умолчанию margin-top для #character задан в CSS
    var shiftAmount = 50;
    character.style.marginTop = currentPosition - shiftAmount + "px"; // сдвиг вверх
}

function moveCharacterDown() {
    var character = document.getElementById("character");
    var currentPosition = parseInt(character.style.marginTop, 10) || 510; // используйте ту же переменную для положения element
    var shiftAmount = 50;
    character.style.marginTop = currentPosition + shiftAmount + "px"; // сдвиг вниз
}
```
И добавьте соответствующие кнопки в ваш HTML-код. Не забудьте присвоить правильные ID и добавить обработчики событий `onclick`.

Если вы захотите добавить анимацию или сделать движение более плавным, вам понадобится использовать `requestAnimationFrame` или CSS-анимации. Но для базовой функциональности предложенные изменения должны работать.
Мой вам совет: пользуйтесь в обоих случаях только left, а right установите в auto. 
Тут надо просто включить логику.
Представьте, что у вас окно браузера имеет ширину 1080px. Ваш #character в ширину только 50px.
Как вы думаете, где спозиционируется #character, если ему задать left: 10px и одновременно right: 20px ?
Похожие вопросы