Javascript dice game: How to remove HP depending on dice result?

Question

So I am a beginner about JavaScript and I have to make a dice game. First of all, here are the rules:

• The player and the monster have 2 dice each. Each dice must be stopped when the user clicks on it (so 4 clicks in total).
• If the total of the 2 dice of the heroes is larger than the total of the 2 dice of the monster, then the hero wins & we remove 20 HP from the monster's life. Otherwise we remove 10 HP from the hero's life.
• Now that we successfully removed HP, we need to make the number on the 4 dice available again for the user to click on all of them again, until either the hero or the monster is dead.

Here is the code I've already written:

rollDice2(); 
removeHealth();

function rollDice2(){

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    var ms = 800;
    var func = function () {
        var randNum = getRandomInt(1, 6);    // Gets random number between 1 and 6
        var randNum2 = getRandomInt(1, 6);
        var randNum3 = getRandomInt(1, 6);
        var randNum4 = getRandomInt(1, 6);
        document.getElementById("dice-hero1").innerHTML = randNum;
        document.getElementById("dice-hero2").innerHTML = randNum2;
        document.getElementById("dice-monster1").innerHTML = randNum3;
        document.getElementById("dice-monster2").innerHTML = randNum4;
    };
    
    func();
    setInterval(func, ms);
  
}

function removeHealth(){
    let health = document.getElementById("hero_lifebar")
    let health2 = document.getElementById("monster_lifebar")
 
    health.value -= 10;
    health2.value -= 20;
}

#dice-hero1, #dice-hero2{
    width: 95px;
    height: 95px;
    border-radius: 20px;
    background-color: green;
    
    color: white;
    font-size: 90px;
    text-align: center;
    margin-left: 200px;
    
}

#dice-monster1, #dice-monster2{
    width: 95px;
    height: 95px;
    border-radius: 20px;
    background-color: red;
    
    color: white;
    font-size: 90px;
    text-align: center;
    margin-left: 200px;
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="dice-hero1"></div>
<div id="dice-hero2"></div>
<div>hero_lifebar<progress id="hero_lifebar" value="150" max="150"></progress></div>

<div id="dice-monster1"></div>
<div id="dice-monster2"></div>
<div>monster_lifebar<progress id="monster_lifebar" value="80" max="80"></progress></div>

Of course you can also find a JSFiddle link here if you prefer.

So as you can see I already have some functionalities, I mainly need the following:

• Stop each dice from rolling, when each of them are clicked (yes, 4 clicks)
• Check if the sum of the 2 heroes dice are bigger than the 2 monster dice
• Remove HP depending on the result
• Let the dice roll start again, so that the user can click on any of them again and keep playing!

I'll be available if you have any questions or have any suggestions. Thanks!

Answer 1

I love this game. Just modify your code, and now it can run.

jsfiddle

Hope you add more functions.

rollDice2(); 
//removeHealth();
var tid
var stopped=false
document.addEventListener('click',function(e){
  if(!stopped){
    clearInterval(tid)
    removeHealth()
   }else{
    rollDice2()
   }
   stopped=!stopped
})
function rollDice2(){

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var ms = 800;
    var func = function () {
        var randNum = getRandomInt(1, 6);    // Gets random number between 1 and 6
        var randNum2 = getRandomInt(1, 6);
        var randNum3 = getRandomInt(1, 6);
        var randNum4 = getRandomInt(1, 6);
        document.getElementById("dice-hero1").innerHTML = randNum;
        document.getElementById("dice-hero2").innerHTML = randNum2;
        document.getElementById("dice-monster1").innerHTML = randNum3;
        document.getElementById("dice-monster2").innerHTML = randNum4;
    };

    func();
    tid=setInterval(func, ms);

}

function removeHealth(){

    let health = document.getElementById("hero_lifebar")
  let health2 = document.getElementById("monster_lifebar")
    var vh1=parseInt(document.getElementById('dice-hero1').innerText)
  var vh2=parseInt(document.getElementById('dice-hero2').innerText)
  var vm1=parseInt(document.getElementById('dice-monster1').innerText)
  var vm2=parseInt(document.getElementById('dice-monster2').innerText)

  vh=vh1+vh2
  vm=vm1+vm2
  if(vh>vm){
    health2.value -= 10;
  }else if(vh<vm){
    health.value -= 20;
  }
  if(health.value<=0){
    // monster win
    alert('monster win')
    reset()
  }
  if(health2.value<=0){
    // hero win
    alert('hero win')
    reset()
  }
    function reset(){
    health.value=150
    health2.value=150
  }
}