Игра в кости Javascript: Как удалить HP в зависимости от результата игры в кости? - PullRequest
Новая
       15

Игра в кости Javascript: Как удалить HP в зависимости от результата игры в кости?

0 голосов
/ 19 декабря 2018

Итак, я новичок в 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 здесь , если хотите,

Так как выЯ вижу, у меня уже есть некоторые функции, в основном мне нужно следующее:

  • Остановить каждую игру в кости, когда каждый из них нажал (да, 4 щелчка)
  • Проверьте, еслисумма 2 кубиков героев больше, чем 2 кубика монстров
  • Удалите HP в зависимости от результата
  • Пусть бросок игральных костей начнется снова, чтобы пользователь мог снова щелкнуть по любому из них ипродолжайте играть!

Я буду доступен, если у вас есть какие-либо вопросы или предложения.Спасибо!

1 Ответ

0 голосов
/ 19 декабря 2018

Я люблю эту игру.Просто измените ваш код, и теперь он может работать.

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