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

2023年7月31日 218次阅读

所以我是
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
>让骰子重新开始,以便用户可以再次点击它们并继续播放！

如果您有任何问题或有任何建议,我会随时为您服务.谢谢！

最佳答案 我爱这游戏.

只需修改您的代码,现在它就可以运行了.

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