Question

我在Twine上制作电脑游戏，它接受html，javascript，css。

我正在尝试根据游戏状态显示图像。

以下此代码正常工作，我会正确显示所有3张图片重叠。

但是，我想根据游戏状态显示其他图像。例如，如果玩家的生命值为20％，则应显示2a.pgn而不是2.pgn 或者如果它中毒，它应该显示3a.pgn而不是3.

依此类推，指定所有可能的组合是没有意义的。相反，我只想基于变量/开关一次更改单个图层。

<html>
<div class="a1"></div>
<style>
.a1 {
width: 100%;
height: 1000px;
background-image: url(3.png),url(2.png),url(1.jpg);
background-repeat: no-repeat;}
</style>
</html>

你能帮忙吗？

非常感谢。

干杯，

Answer 1

有多种方法 - 设置url（）（并在加载时预加载所有内容），更改可见性，不透明度或z-index，但如果你想坚持使用多个背景：

//imageIndex - your image for given HP
//imagesLen - images count
var HPimgArr = Array(imagesLen).fill('-9999px 0');
HPimgArr[imageIndex] = '0 0';
document.querySelector('.a1').style.backgroundPosition = HPimgArr.join(', ')

Answer 2

如果你正在引用Javascript试试这个（你需要jQuery）：

var maxHealth = 10;
var health = 10; //He is apparently at full health

function updateHealth(newHealth){
    health = newHealth;
    if(health < maxHealth / 5) {
        var stats = $('.a1').css('background-image').split(','); //Put every different stat in array
        stats[1] = 'url(2a.png)';
        $('.a1').css('background-image', stats.toString());
    }
}

每当您想要更改健康通话时updateHealth(...)。我没有对此进行过测试，但这些方面的内容应该可行。

Javascript，需要根据开关/变量

2 个答案: