Javascript、スイッチ/変数に基づいて背景イメージを変更する必要があります

私は、html、javascript、cssを受け入れるTwineでコンピュータゲームを作っています。Javascript、スイッチ/変数に基づいて背景イメージを変更する必要があります

私はゲームの状態に基づいて画像を表示しようとしています。

このコードは正しく動作します。正しく重なり合っている3つの画像がすべて表示されます。

しかし、私はゲームの状態に基づいて他の画像を表示したいと思います。例えばプレイヤーが、それは代わりに2.pgn の2a.pgn表示すべきか、それが毒されている場合、それは代わりに3

などなどなどの3a.pgn表示する必要があり、20％の健康であればすべての可能な組み合わせを指定する必要はありません。代わりに、変数/スイッチに基づいて一度に1つのレイヤーを変更したいだけです。

<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>

助けてください。

ありがとうございました。

乾杯、

出典

2017-05-14 Magma

あなたは.pngではなく.pgnを意味すると思いますか？画像の拡張子を正しく取得するには、常に良いスタートです！ –

あなたのjavascriptを投稿し、ゲームの仕組みについての説明も参考になります。私たちは心配者ではありません - 健康は何に依存していますか？ switch文はかなり簡単です。 Googleを試してください –

ねえ、マグマ！私はあなたを助けたいと思っていますが、私はあなたのJSが助けになる必要があります。私は、画像の代わりにコードを使って画像をプログラミングする可能性も考慮する必要があると思います。 –

複数の方法があります - ）（URLの設定（および負荷にすべてをプリロード）、可視性、不透明度またはzインデックスを変更しますが、複数の背景に固執する場合：

//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(', ')

出典

2017-05-14 21:42:06

あなたは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(...)を変更したいとき。私はこれをテストしていませんが、これらの行に沿ったものはうまくいくはずです。

出典

2017-05-14 21:43:50 Emonadeo

Javascript、スイッチ/変数に基づいて背景イメージを変更する必要があります

答えて

関連する問題