Question

嗨，目前我正在制作一些RPG游戏。我想用箭头移动我的角色。哪个正在运作。但是当我点击让我们说右箭头时我想改变图像。现在，当我点击带有此代码的右箭头时：

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

这样可以使每次右击时都使用不同的图像。

Answer 2

您可以使用arry imeges来源制作场景

function rightArrowPressed() {
    var slides=['/img/run_1.png','/img/run_2.png','/img/run_1.png'];
    slides.forEach(slide => {

         setTimeout(function(){ 
             var element = document.getElementById("image1").src = slide;
             element = document.getElementById("image1");
            element.style.left = parseInt(element.style.left) + 5 + 'px';
         }, 500);//add a time in screen
    });

}

JavaScript移动角色。单击右箭头更改图像

2 个答案: