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