健康降至零时发出警报

时间:2017-08-25 07:42:19

标签: javascript html

我正在尝试制作游戏,这是我第一次使用javascript。当我的健康状况下降到0时,我想知道是否有办法发出警报。

我尝试使用if / else语句,但这似乎不起作用。这是我的代码。谢谢。

PS。它可能是一个非常混乱的代码,但这是我知道如何做的唯一方法。



<!DOCTYPE HTML>
<html>
<head> 
</head>
<body onLoad="hideIntro()"> 
<h3 id="healthChange"></h3>
<h3 id='goblinHealthChange'></h3> 
<script>
var health = sessionStorage.setItem('health', 40); 
document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP";
var goblinHealth = sessionStorage.setItem('goblinHealth', 20); 
document.getElementById('goblinHealthChange').innerHTML = "Drogon has " + sessionStorage.getItem('goblinHealth') + " HP"; 
function hideIntro() {
                 document.getElementById('dodgeMove').style.visibility = "hidden";
                 document.getElementById('wait').style.visibility = "hidden"; 
                 document.getElementById('roll').style.visibility = "hidden";
                 document.getElementById('rules').style.visibility = "hidden";   
                 document.getElementById('win').style.visibility = "hidden"; 
                 document.getElementById('daggerRun').style.visibility = "hidden";  
                 document.getElementById('lose').style.visibility = "hidden"; 
                 document.getElementById('clubSmash').style.visibility = "hidden";
                 document.getElementById('kick').style.visibility = "hidden";
                 document.getElementById('rollTwo').style.visibility = "hidden";
                 document.getElementById('clubRules').style.visibility = "hidden";  
                 document.getElementById('clubThree').style.visibility = "hidden"; 
                 document.getElementById('clubSix').style.visibility = "hidden"; 
                 document.getElementById('lessThanThreeClub').style.visibility = "hidden"; 
} 
 
function wait() {
                document.getElementById('daggerRun').style.visibility = "visible"; 
                document.getElementById('dodgeMove').style.visibility = "visible";
                document.getElementById('wait').style.visibility = "visible";  
                document.getElementById('attack').style.visibility = "hidden";
                document.getElementById('waitFM').style.visibility = "hidden";
                document.getElementById('youFight').style.visibility = "hidden";
                document.getElementById('lose').style.visibility = "hidden"; 
                document.getElementById('secondAttack').style.visibility = "hidden";    
                document.getElementById('win').style.visibility = "hidden"; 
                document.getElementById('result').style.visibility = "hidden"; 
}
function showRoll() {
                     document.getElementById('roll').style.visibility = "visible"; 
                     document.getElementById('rules').style.visibility = "visible";
                     document.getElementById('daggerRun').style.visibility = "hidden";  
                     document.getElementById('wait').style.visibility = "hidden"; 
                     document.getElementById('dodgeMove').style.visibility = "hidden";
}

function roll() {
                 document.getElementById('rules').style.visibility = "hidden";
                 document.getElementById('roll').style.visibility = "hidden";
                 document.getElementById('result').style.visibility = "visible"; 
                 var x = Math.floor((Math.random() * 6) + 1); 
                 document.getElementById('result').innerHTML = x;
                 document.getElementById('waitFM').style.visibility = "visible";
                 document.getElementById('attack').style.visibility = "visible"; 
                if (x > 3) {
                   document.getElementById("win").style.visibility = "visible"; 
                 } else { 
                   document.getElementById("lose").style.visibility = "visible";
                   var health = sessionStorage.setItem('health', sessionStorage.getItem('health') - 10); 
                   document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP remaining."; 
}

}
function ndWait() {
                   document.getElementById("lose").style.visibility = "visible";
                   var health = sessionStorage.setItem('health', sessionStorage.getItem('health') - 10); 
                   document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP remaining.";
                   document.getElementById('attack').style.visibility = "visible"; 
}
function hit() {
                document.getElementById('clubSmash').style.visibility = "visible";
                document.getElementById('kick').style.visibility = "visible";
                document.getElementById('attack').style.visibility = "hidden";
                document.getElementById('waitFM').style.visibility = "hidden";
                document.getElementById('youFight').style.visibility = "hidden";
                document.getElementById('lose').style.visibility = "hidden";    
                document.getElementById('win').style.visibility = "hidden"; 
                document.getElementById('result').style.visibility = "hidden";
} 
function clubSmash() {
                  document.getElementById('clubSmash').style.visibility = "hidden";
                  document.getElementById('kick').style.visibility = "hidden"; 
                  document.getElementById('rollTwo').style.visibility = "visible";
                  document.getElementById('clubRules').style.visibility = "visible"; 
}                                   
function rollTwo() {
                 var rollTwo = Math.floor((Math.random() * 6) + 1); 
                 document.getElementById('resultTwo').innerHTML = rollTwo;
                 document.getElementById('clubRules').style.visibility = "hidden";  
                 document.getElementById('clubThree').style.visibility = "hidden"; 
                 document.getElementById('clubSix').style.visibility = "hidden"; 
                 document.getElementById('lessThanThreeClub').style.visibility = "hidden";
                 document.getElementById('rollTwo').style.visibility = "hidden";
                 document.getElementById('waitFM').style.visibility = "visible";
                 document.getElementById('attack').style.visibility = "visible"; 
                   
                 if (rollTwo === 6) {
                                     document.getElementById('clubSix').style.visibility = "visible";
                                     var goblinHealth = sessionStorage.setItem('goblinHealth', sessionStorage.getItem('goblinHealth') - 20); 
                                     document.getElementById('goblinHealthChange').innerHTML = "Drogon has " + sessionStorage.getItem('goblinHealth') + " HP remaining.";
              } else if (rollTwo > 3 && rollTwo !== 6) { 
                                     document.getElementById('clubThree').style.visibility = "visible";
                                     var goblinHealth = sessionStorage.setItem('goblinHealth', sessionStorage.getItem('goblinHealth') - 10); 
                                     document.getElementById('goblinHealthChange').innerHTML = "Drogon has " + sessionStorage.getItem('goblinHealth') + " HP remaining."; 
              } else { 
                                     document.getElementById('lessThanThreeClub').style.visibility = "visible";
                                     var health = sessionStorage.setItem('health', sessionStorage.getItem('health') - 10); 
                                     document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP remaining.";
              }             
}
                       
</script>
<h2 id="clubThree">You succesfully hit Drogon, he has lost 10 HP.</h2> 
<h2 id="clubSix">You critically hit Drogon, he has lost 20 HP.</h2>
<h2 id="lessThanThreeClub">Drogon dodged your swing, and stabbed you in the gut. You loose 10 HP.</h2>
<h2 id="youFight">You chose to FIGHT</h2>
<button id="waitFM" onClick="wait()">WAIT</button>
<button id="attack" onCLick="hit()">ATTACK</button>
<button id="dodgeMove" onClick="showRoll()">DODGE</button>
<div id="wait">
<button onClick="ndWait()">WAIT</button>
</div> 
<button id="roll" onClick="roll()">ROLL</button>
<button id="rollTwo" onClick="rollTwo()">ROLL</button>  
<div id="rules">
<li>If Roll > 3  - Succesful</li>
<li>If Roll < 4 - Failure</li> 
</div>
<div id="clubRules"> 
<li>If Roll < 4 - Miss</li>
<li>If Roll > 3 - Hit</li>
<li>If Roll = 6 - Critical Hit</li>
</div>
<h3 id="result"></h3>
<h3 id="resultTwo"></h3>
<h2 id="win">You Successfully dodged the little goblin</h2>
<h2 id="daggerRun">Drogon attempts to attack you with his dagger.</h2>
<h2 id="lose">You were stabbed by the goblin, and lost 10 HP.</h2>
<h1 id="dead"></h1>
<button id="clubSmash" onClick="clubSmash()">SMASH WITH CLUB</button>
<button id="kick" onClick="kick()">KICK</button>
</body> 
</html> 
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我添加了一个新功能来检查你和龙的健康状况,然后在每个动作结束时调用它。如果你已经达到0或者更低,你就会失去同样的龙

    <!DOCTYPE HTML>
<html>
<head> 
</head>
<body onLoad="hideIntro()"> 
<h3 id="healthChange" onchange="CheckHealth()"></h3>
<h3 id='goblinHealthChange'></h3> 
<script>
var health = sessionStorage.setItem('health', 40); 
document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP";
var goblinHealth = sessionStorage.setItem('goblinHealth', 20); 
document.getElementById('goblinHealthChange').innerHTML = "Drogon has " + sessionStorage.getItem('goblinHealth') + " HP"; 
function hideIntro() {
                 document.getElementById('dodgeMove').style.visibility = "hidden";
                 document.getElementById('wait').style.visibility = "hidden"; 
                 document.getElementById('roll').style.visibility = "hidden";
                 document.getElementById('rules').style.visibility = "hidden";   
                 document.getElementById('win').style.visibility = "hidden"; 
                 document.getElementById('daggerRun').style.visibility = "hidden";  
                 document.getElementById('lose').style.visibility = "hidden"; 
                 document.getElementById('clubSmash').style.visibility = "hidden";
                 document.getElementById('kick').style.visibility = "hidden";
                 document.getElementById('rollTwo').style.visibility = "hidden";
                 document.getElementById('clubRules').style.visibility = "hidden";  
                 document.getElementById('clubThree').style.visibility = "hidden"; 
                 document.getElementById('clubSix').style.visibility = "hidden"; 
                 document.getElementById('lessThanThreeClub').style.visibility = "hidden"; 
} 

function wait() {
                document.getElementById('daggerRun').style.visibility = "visible"; 
                document.getElementById('dodgeMove').style.visibility = "visible";
                document.getElementById('wait').style.visibility = "visible";  
                document.getElementById('attack').style.visibility = "hidden";
                document.getElementById('waitFM').style.visibility = "hidden";
                document.getElementById('youFight').style.visibility = "hidden";
                document.getElementById('lose').style.visibility = "hidden"; 
                document.getElementById('secondAttack').style.visibility = "hidden";    
                document.getElementById('win').style.visibility = "hidden"; 
                document.getElementById('result').style.visibility = "hidden"; 
}
function showRoll() {
                     document.getElementById('roll').style.visibility = "visible"; 
                     document.getElementById('rules').style.visibility = "visible";
                     document.getElementById('daggerRun').style.visibility = "hidden";  
                     document.getElementById('wait').style.visibility = "hidden"; 
                     document.getElementById('dodgeMove').style.visibility = "hidden";
}

function roll() {
                 document.getElementById('rules').style.visibility = "hidden";
                 document.getElementById('roll').style.visibility = "hidden";
                 document.getElementById('result').style.visibility = "visible"; 
                 var x = Math.floor((Math.random() * 6) + 1); 
                 document.getElementById('result').innerHTML = x;
                 document.getElementById('waitFM').style.visibility = "visible";
                 document.getElementById('attack').style.visibility = "visible"; 
                if (x > 3) {
                   document.getElementById("win").style.visibility = "visible"; 
                 } else { 
                   document.getElementById("lose").style.visibility = "visible";
                   var health = sessionStorage.setItem('health', sessionStorage.getItem('health') - 10); 
                   document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP remaining."; 
}

}
function ndWait() {
                   document.getElementById("lose").style.visibility = "visible";
                   var health = sessionStorage.setItem('health', sessionStorage.getItem('health') - 10); 
                   document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP remaining.";
                   document.getElementById('attack').style.visibility = "visible"; 
                   checkHealth();
}
function hit() {
                document.getElementById('clubSmash').style.visibility = "visible";
                document.getElementById('kick').style.visibility = "visible";
                document.getElementById('attack').style.visibility = "hidden";
                document.getElementById('waitFM').style.visibility = "hidden";
                document.getElementById('youFight').style.visibility = "hidden";
                document.getElementById('lose').style.visibility = "hidden";    
                document.getElementById('win').style.visibility = "hidden"; 
                document.getElementById('result').style.visibility = "hidden";
                checkHealth();
} 
function clubSmash() {
                  document.getElementById('clubSmash').style.visibility = "hidden";
                  document.getElementById('kick').style.visibility = "hidden"; 
                  document.getElementById('rollTwo').style.visibility = "visible";
                  document.getElementById('clubRules').style.visibility = "visible"; 
                  checkHealth();
}                                   
function rollTwo() {
                 var rollTwo = Math.floor((Math.random() * 6) + 1); 
                 document.getElementById('resultTwo').innerHTML = rollTwo;
                 document.getElementById('clubRules').style.visibility = "hidden";  
                 document.getElementById('clubThree').style.visibility = "hidden"; 
                 document.getElementById('clubSix').style.visibility = "hidden"; 
                 document.getElementById('lessThanThreeClub').style.visibility = "hidden";
                 document.getElementById('rollTwo').style.visibility = "hidden";
                 document.getElementById('waitFM').style.visibility = "visible";
                 document.getElementById('attack').style.visibility = "visible"; 

                 if (rollTwo === 6) {
                                     document.getElementById('clubSix').style.visibility = "visible";
                                     var goblinHealth = sessionStorage.setItem('goblinHealth', sessionStorage.getItem('goblinHealth') - 20); 
                                     document.getElementById('goblinHealthChange').innerHTML = "Drogon has " + sessionStorage.getItem('goblinHealth') + " HP remaining.";
              } else if (rollTwo > 3 && rollTwo !== 6) { 
                                     document.getElementById('clubThree').style.visibility = "visible";
                                     var goblinHealth = sessionStorage.setItem('goblinHealth', sessionStorage.getItem('goblinHealth') - 10); 
                                     document.getElementById('goblinHealthChange').innerHTML = "Drogon has " + sessionStorage.getItem('goblinHealth') + " HP remaining."; 
              } else { 
                                     document.getElementById('lessThanThreeClub').style.visibility = "visible";
                                     var health = sessionStorage.setItem('health', sessionStorage.getItem('health') - 10); 
                                     document.getElementById('healthChange').innerHTML = "You have " + sessionStorage.getItem('health') + " HP remaining.";
              }       
checkHealth();            
}

function checkHealth(){
    var h = sessionStorage.getItem('health');
    var dh = sessionStorage.getItem('goblinHealth');
    if(h<=0)
    alert("You Lost");
    else if(dh<=0)
    alert("Dragon Lost");
}
</script>
<h2 id="clubThree">You succesfully hit Drogon, he has lost 10 HP.</h2> 
<h2 id="clubSix">You critically hit Drogon, he has lost 20 HP.</h2>
<h2 id="lessThanThreeClub">Drogon dodged your swing, and stabbed you in the gut. You loose 10 HP.</h2>
<h2 id="youFight">You chose to FIGHT</h2>
<button id="waitFM" onClick="wait()">WAIT</button>
<button id="attack" onCLick="hit()">ATTACK</button>
<button id="dodgeMove" onClick="showRoll()">DODGE</button>
<div id="wait">
<button onClick="ndWait()">WAIT</button>
</div> 
<button id="roll" onClick="roll()">ROLL</button>
<button id="rollTwo" onClick="rollTwo()">ROLL</button>  
<div id="rules">
<li>If Roll > 3  - Succesful</li>
<li>If Roll < 4 - Failure</li> 
</div>
<div id="clubRules"> 
<li>If Roll < 4 - Miss</li>
<li>If Roll > 3 - Hit</li>
<li>If Roll = 6 - Critical Hit</li>
</div>
<h3 id="result"></h3>
<h3 id="resultTwo"></h3>
<h2 id="win">You Successfully dodged the little goblin</h2>
<h2 id="daggerRun">Drogon attempts to attack you with his dagger.</h2>
<h2 id="lose">You were stabbed by the goblin, and lost 10 HP.</h2>
<h1 id="dead"></h1>
<button id="clubSmash" onClick="clubSmash()">SMASH WITH CLUB</button>
<button id="kick" onClick="kick()">KICK</button>
</body> 
</html>