HTML buttons showing text without interrupting the script

74 views Asked by At

Ok so I'm kind of new in HTML/javascript, but I'm working on a project, which is a text-based game, basically, I want to have a function, which takes an array of text, print the first one in a text zone, and wait until the "ok" button in pressed before printing the next string of the array.this function is in the middle of a bunch of other ones. Here is my code at the moment:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Retro-Fighting</title>
</head>

<body>

<br><br><br>

<input id="hpPlayer" type="text" value="" size="40" readonly>
<input id="hpBoss" type="text" value="" size="40" readonly>


<div id="sound_element"></div>
<script>
var player={
    //Bunch of characteristics
};
var boss={
  //Bunch of characteristics

};

var playerTurn=function()
{

 var action =prompt("Do you want to : ATTACK , use MAGIC , or drink a POTION?").toLowerCase();

 switch(action)
 {
   case 'attack':
       var rand=10+(player.luck-50)-Math.floor(Math.random() *20  + 1);
        var damage= Math.floor(player.attack+rand-(boss.defense/2));
        alert("You hit "+boss.name+" and deal "+damage+" damage points!" );
        boss.hp-=damage;
        if(boss.hp<0){boss.hp=0;}
        showHp()
       break;
   case 'magic':
       var rand=10+(player.luck-50)-Math.floor(Math.random() *20  + 1);
        var damage= Math.floor(player.attackM+rand-(boss.defenseM/2));
        alert("You use "+player.magicName1+" on "+boss.name+" and deal "+damage+" damage points!" );
        boss.hp-=damage;
        if(boss.hp<0){boss.hp=0;}
        showHp()
       break;
   case 'potion':
       if(player.potion)
        {
        var heal = player.luck-Math.floor(Math.random()*20+1);
        alert("You drink a potion and restore "+heal+" HP");
        player.potion--
        player.hp+=heal;
        if(player.hp>player.hpMax){player.hp=player.hpMax;}
        }
        else {
              alert("You don't have any potions left!")
              playerTurn();
             }
        showHp()
        break;
   default:
    confirm("You can't do that!");
    playerTurn();
} 



};

var bossTurn=function() 
{
    if(Math.floor(Math.random()+0.5))
    {
        var rand=10+(boss.luck-50)-Math.floor(Math.random() *20  + 1);
        var damage= Math.floor(boss.attackM+rand-(player.defenseM/2));
        alert(boss.name+" use "+boss.magicName+" and deal "+damage+" damage points!" );
        player.hp-=damage;
        if(player.hp<0){player.hp=0;}
    }
    else
    {
        var rand=10+(boss.luck-50)-Math.floor(Math.random() *20  + 1);
        var damage= Math.floor(boss.attack+rand-(player.defense/2));
        alert(boss.name+" hit you and deal "+damage+" damage points!" );
        player.hp-=damage;
        if(player.hp<0){player.hp=0;}

    }
showHp()
};
var startBattle=function()
{
    showHp()
    while(player.hp>0&&boss.hp>0)
     {
         if(player.speed>boss.speed)
         {
          playerTurn();
          if(boss.hp)
          {bossTurn();}
         }
         else
         {
          bossTurn();
          if(player.hp)
          playerTurn();
         }
     }        
 if(player.hp)
 {
     alert("You won!")
     //play victory sound
     soundPlay("victory.mp3")
     //Go to loot !
     alert("Thank you for playing the demo of Retro-fighting!")
}
else
{
    alert("You lost...The woodman is now free to destroy the world...")
    soundPlay("gameover.mp3")
}


};

var showHp=function()
{
    var outputHpPlayer = document.getElementById('hpPlayer')
    var outputHpBoss = document.getElementById('hpBoss')
    var stringHpPlayer= " "+ player.fName + ":  " +player.hp+"/"+player.hpMax+" HP"
    outputHpPlayer.value=stringHpPlayer
    var stringHpBoss= " "+ boss.name + ":  " +boss.hp+"/"+boss.hpMax+" HP"
    outputHpBoss.value=stringHpBoss
}
var soundPlay=function(music)
{
document.getElementById("sound_element").innerHTML= 
"<embed src="+music+" hidden=true autostart=true loop=false>";
}




confirm("You wake up...");
alert("You're wearing strange green clothes, and a sword is laying down, next to you...");
alert("You pick up the sword...An inscription on the blade say : Link" );
alert("You notice that you are in a dark corridor, a strange woodman is looking at you");
alert("The woodman is attacking you!");
startBattle();


</script>

</body>
</html>

Basically, I just want to get rid of the pop-up showing with the alert() command, while still waiting for a confirmation before showing more text

Since I'm really a beginner in programmation, tell me if my method isn't the right one ect...

Thank you! PS: English is not my native language, sorry

1

There are 1 answers

0
Buzu On

Is this how your code is originally?

getBoss(//depending on the position o the player)

If so, then there is an error. The comment is extending all the way to the closing parenthesis.