0

estou tentando criar um sistema á algum tempo mais não consigo. Tenho Uma barra de vida na qual se mexe de acordo com o valor atual e o máximo, com um dado ao lado que cria um valor aleatório de 1 a 100 no console, O que estou tentando a um tempo é: um script que quando eu rodo um dado ele detecta o numero do valor atual é roda o dado, caso o numero do dado seja menor que o valor atual aparecer a uma mensagem na tela, caso o valor do dado seja maior que o valor atual aparecer uma mensagem diferente na tela. (estou tentando a 3 dias e não consigo.)

<html>
<script>
setInterval(function(){
    var max = document.getElementById('max-hp').value
    var hp = document.getElementById('atual-hp').value
    var barraHP = document.getElementById('vida')
    barraHP.style.width = (hp*100)/max + '%'

},1)

</script>

<script>
 
function rollDice() {
    var roll = Math.floor(Math.random() * 100) + 1;
    console.log(`${roll}`);
}

</script>

<style>

@import url('http://fonts.cdnfonts.com/css/secret-service-typewriter');

</style>



</style>
<div id="vidaNumbers">
<input value="0" id="atual-hp" type=number>&nbsp;/&nbsp; 
<input value="0" id="max-hp" type=number>
</div>
<br><br>

<div id="barravida">
    <div id="vida"></div>
    
<style>

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

    #barravida {
        wid
        overflow: hidden;
        width: 80%;
        background-color: #436DDF;
    }

    #vida {
        width: 30%;
        background-color: #002CA6;
        height: 29px;
    }
    

    input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
    #atual-hp, #max-hp {
    background: none;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    font-family: 'CMU Typewriter Text', sans-serif;
    font-size: 12pt;
     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    #atual-hp{
    text-align: right;
    }
    #vidaNumbers {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin-top: 7.7%;
    margin-left: -3.5%;
    color: white;
    font-weight: bold;
    font-family: 'CMU Typewriter Text', sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    #max-hp {
    text-align: left;
    }
</style>

<input type="image" src="img/dice.png" id="sanibotao" onclick="rollDice()">

<style>
    
#sanibotao {
 position: absolute;
 top: 7%;
 left: 80%;
 width: 25px;
 height: 25px;
}

</style>

</html>

1 Resposta 1

0

bem não sei se entendi direito mas, é tipo isso que você quer fazer? Segue:

function rodar(){
     var roll = Math.floor(Math.random() * 100) + 1;
     if(hp < roll){
          console.log("1");
     }else{
          console.log("2");
     }
}

outra coisa boa que você pode tirar, é esse ",1" do setInterval deixa puro sem nada que ele fica rodando toda hora e pode evitar bugs. Mas pelo o que entendi é isso que você quer fazer, se não for edita um pouquinho aí que tá meio difícil de saber, todo mundo conhece if else

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .