JavaScript 移动字符。单击右箭头更改图像

Question

大家好，我目前正在制作一些 Angular 色扮演游戏。我想用箭头移动我的 Angular 色。现在正在工作。但是我想在单击右箭头时更改图像。现在，当我使用此代码单击向右箭头时:

function rightArrowPressed() {
    var element = document.getElementById("image1").src = "/img/run_1.png";
    element = document.getElementById("image1");
    element.style.left = parseInt(element.style.left) + 5 + 'px';
}

图像更改为 run_1.png 并且保持原样。不仅仅是图像以一个姿势滑动。单击右箭头时如何再次更改图像？

HTML

<img id="image1" src="{{Auth::user()->char_image}}" style="position:absolute;left:0; top:0;height: 45px; image-rendering: -webkit-optimize-contrast;">

Answer 1

您可以使用计数器变量:

var counter = 0;
function rightArrowPressed() {
    counter = (counter === 4) ? 1 : counter+1;
    var image = "/img/run_"+counter+".png";
    var element = document.getElementById("image1");
    element.src = image;

    var left = parseInt(element.style.left)+5;
    element.style.left = left + "px";
}

这样一来，每次您右键单击时，都会使用不同的图像。