<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fight!</title>
</head>
<body>
<h1>FIGHT!</h1>
<br>
<p>Your Fighter's Hit Points: <span id="fighter-HitPoints"></span> (<span id=fighter-OriginalHitPoints></span>)</p>
<p>The Challenger's Hit Points: <span id="challenger-HitPoints"></span> (<span id=challenger-OriginalHitPoints></span>)</p>
<br>
<p>(a)ttack or (r)un away?</p>
<br>
<p><span id="fighterTakes-damage"></span></p>
<p><span id="challengerTakes-damage"></span></p>
<br>
<p><span id="result"></span></p>
<script>
//javascript kept inline to work on google sites
const fighterHitPointsDisplay = document.getElementById('fighter-HitPoints')
const challengerHitPointsDisplay = document.getElementById('challenger-HitPoints')
const fighterTakesDamageDisplay = document.getElementById('fighterTakes-damage')
const challengerTakesDamageDisplay = document.getElementById('challengerTakes-damage')
const resultDisplay = document.getElementById('result')
const fighterOriginalHPDisplay = document.getElementById('fighter-OriginalHitPoints')
const challenOriginalHPDisplay = document.getElementById('challenger-OriginalHitPoints')
let fighterHitPoints
let challengerHitPoints
let fighterTakesDamage
let challengerTakesDamage
let fightOver = false
fighterHitPoints = Math.floor(Math.random()*6+2)
challengerHitPoints = Math.floor(Math.random()*6+1)
const fighterOriginalHP = fighterHitPoints
const challengerOriginalHP = challengerHitPoints
fighterOriginalHPDisplay.innerHTML = fighterOriginalHP
challenOriginalHPDisplay.innerHTML = challengerOriginalHP
fighterHitPointsDisplay.innerHTML = fighterHitPoints
challengerHitPointsDisplay.innerHTML = challengerHitPoints
//what happens when a or r is pressed feels like it's getting cumbersome
window.addEventListener("keyup", function(event) {
// keeps fight from going on after won or lost
if (fightOver === false){
// (a)ttack
if (event.key == "a"){
fighterTakesDamage = Math.floor(Math.random()*2)
challengerTakesDamage = Math.floor(Math.random()*3)
fighterHitPoints = fighterHitPoints - fighterTakesDamage
challengerHitPoints = challengerHitPoints - challengerTakesDamage
fighterHitPointsDisplay.innerHTML = fighterHitPoints
challengerHitPointsDisplay.innerHTML = challengerHitPoints
fighterTakesDamageDisplay.innerHTML = "Fighter Takes " +fighterTakesDamage +" damage"
challengerTakesDamageDisplay.innerHTML = "Challenger Takes " +challengerTakesDamage +" damage"
if (fighterHitPoints > 0 && challengerHitPoints < 1){
resultDisplay.innerHTML = "Your fighter won!"
fightOver = true
}
if (fighterHitPoints < 1 && challengerHitPoints > 0){
resultDisplay.innerHTML = "The challenger won."
fightOver = true
}
if (fighterHitPoints < 1 && challengerHitPoints < 1){
resultDisplay.innerHTML = "A double knockout!"
fightOver = true
}
if (fighterHitPoints > 0 && challengerHitPoints > 0){
resultDisplay.innerHTML = "The fight continues..."
}
}
// (r)un away
if (event.key == "r"){
fighterTakesDamageDisplay.innerHTML = "You ran away..."
challengerTakesDamageDisplay.innerHTML = "to fight another day"
resultDisplay.innerHTML = "Refresh the page for a new fight";
fightOver = true
}
}
});
</script>
</body>
</html>