Javascript骰子游戏：如何根据骰子结果删除HP？

Question

所以我是 JavaScript 的初学者，我必须制作一个骰子游戏。首先，这里是规则：

• 玩家和怪物各有 2 个骰子。每个骰子必须在用户点击它时停止（总共点击 4 次）。
• 如果英雄的 2 个骰子的总和大于怪物的 2 个骰子的总和，则英雄获胜，我们从怪物的生命中移除 20 HP。否则我们会从英雄的生命中移除 10 点生命值。
• 现在我们成功移除了生命值，我们需要让 4 个骰子上的数字再次可用，以便用户再次点击所有骰子，直到英雄或怪物死亡。

这是我已经写好的代码：

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>

当然，如果您愿意，也可以找到JSFiddle link here。

所以你可以看到我已经有了一些功能，我主要需要以下内容：

• 当每个骰子都被点击（是的，4 次点击）时，停止每个骰子滚动
• 检查2个英雄骰子的总和是否大于2个怪物骰子
• 根据结果删除HP
• 让掷骰子重新开始，这样用户就可以再次点击其中任何一个并继续玩！

如果您有任何问题或有任何建议，我将随时为您服务。谢谢！

Answer 1

我喜欢这个游戏。 只需修改您的代码，现在它就可以运行了。

jsfiddle

希望您添加更多功能。

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