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

Question

所以我是JavaScript的初学者，我必须做一个骰子游戏。首先，规则如下：

玩家和怪物各有2个骰子。当用户点击它时，每个骰子都必须停止（所以总共点击 4 次）。
如果英雄的2个骰子的总和大于怪物的2个骰子的总和，那么英雄获胜并且我们从怪物的生命中移除20 HP。否则我们会从英雄的生命中移除 10 HP。
既然我们成功移除了 HP，我们需要让 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
  }
}

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

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

html

javascript

css

jquery

dice