자바 스크립트, 배경 이미지/스위치/변수를 기반으로 변경해야합니다

나는 꼬투리에서 컴퓨터 게임을 만들고 있는데, HTML, 자바 스크립트, CSS를 사용할 수 있습니다.자바 스크립트, 배경 이미지/스위치/변수를 기반으로 변경해야합니다

게임의 상태에 따라 이미지를 표시하려고합니다.

아래 코드는 올바르게 작동합니다. 올바르게 겹쳐져있는 3 개의 이미지를 모두 보여줍니다.

그러나 게임 상태에 따라 다른 이미지를 표시하고 싶습니다. 예를 들어 플레이어의 건강 상태가 20 % 인 경우, 플레이어는 2.pgn 대신 2a.pgn을 표시해야하며, 중독되면 3 대신에 3a.pgn을 표시해야합니다.

등등. 가능한 모든 조합을 지정하는 것은 의미가 없습니다. 대신 변수/스위치를 기반으로 한 번에 하나의 레이어 만 변경하려고합니다.

<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을 의미한다고 생각하십니까? 항상 이미지 확장을 올바르게 시작하는 데 좋은 시작입니다! –

자바 스크립트를 게시하고 게임 작동 방식에 대한 설명도 도움이 될 것입니다. 우리는 마음가짐이 아닙니다. 건강은 무엇에 달려 있습니까? switch 문은 매우 쉽습니다. google –

안녕하세요, 마그마! 도움을 드리고 싶지만, JS가 도움이 필요합니다. 나는 당신이 또한 조작하기 쉽기 때문에 이미지 대신 코드를 사용하여 이미지를 프로그래밍 할 수있는 가능성을 고려해야한다고 생각한다. –

가 여러 가지 방법 - 가시성, 불투명도 또는 z 색인을 변경, URL을() 설정 (및 부하에 대한 모든 것을 미리로드),하지만 당신은 여러 배경을 고수 할 경우 :

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

당신이 자바 스크립트로 다스 려하는 경우이 (당신이 이것에 대한 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

자바 스크립트, 배경 이미지/스위치/변수를 기반으로 변경해야합니다

답변

관련 문제