Roll dice and display result with score update

by Tan

HTML

<div class="heading">Smallest Fruit Machine!</div>
<div class="machineBg">
<div class="bank">Bank: <span id="bank"></span></div>
<div class="wheel">
<span id="r1">-</span> <span id="r2">-</span> <span id="r3">-</span> 
</div>
<div class="resText" id="resText">-</div>
<div class="rollBut"><a href="javascript:;" onclick ="start();">Roll</a></div>
</div>

<div class="machineScore">
<div class=""><span class="fruit1">&diams;&diams;</span> = 2</div>
<div class=""><span class="fruit2">&spades;&spades;&spades;</span> = 5</div>
<div class=""><span class="fruit2">&clubs;&clubs;&clubs;</span> = 10</div>
<div class=""><span class="fruit1">&diams;&diams;&diams;</span> = 20 Jackpot!</div>
</div>

CSS

body {font-family:Arial;}
.heading {max-width:200px;padding:10px;margin:auto;text-align:center;font-size:17px;font-weight:bold;}
.machineBg {max-width:200px;border:1px solid green;padding:10px;margin:auto;}
.machineScore {max-width:200px;border:1px solid #cccccc;padding:10px;margin:10px auto;}

.wheel {padding:10px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    gap:10px;
    }

    .wheel span {font-size:30px;
border:1px solid #cccccc;border-radius:5px;
width:33.3%;text-align:center;line-height:60px;
    }

    .bank {text-align:right;}

.rollBut {text-align:center;margin:10px 0 0 0;}
.rollBut a {display:block;background-color:green;color:#ffffff;text-decoration:none;padding:5px 0;
        border-radius:5px;}
        .resText {text-align:center;}

.fruit1 {color:red;font-size:24px;}
.fruit2 {color:black;font-size:24px;}

JavaScript

var cash = 100;
var bank = document.getElementById('bank');
bank.innerHTML = cash;
var r1 = document.getElementById('r1');
var r2 = document.getElementById('r2');
var r3 = document.getElementById('r3');
var resText = document.getElementById('resText');

function start() {cash = (cash - 1);bank.innerHTML = cash;
var score = 0;var txt = "";resText.innerHTML = "-";

r1.innerHTML = "-";r1.style.color = "#cccccc";
r2.innerHTML = "-";r2.style.color = "#cccccc";
r3.innerHTML = "-";r3.style.color = "#cccccc";

var roll1 = roll();
var roll2 = roll();
var roll3 = roll();

var cherryCount = 0;
if (roll1 == 3) {cherryCount = (cherryCount+1);r1col = "red";} else {r1col = "black";}
if (roll2 == 3) {cherryCount = (cherryCount+1);r2col = "red";} else {r2col = "black";}
if (roll3 == 3) {cherryCount = (cherryCount+1);r3col = "red";} else {r3col = "black";}

if (roll1 == 1 && roll2 == 1 && roll3 == 1) {
score = 5;  txt = "Win: 5";
}
else if (roll1 == 2 && roll2 == 2 && roll3 == 2) {
score = 10; txt = "Win: 10";
}
else if (roll1 == 3 && roll2 == 3 && roll3 == 3) {
score = 20; txt = "Jackpot! 20";
}
else if (cherryCount == 2) {
score = 2;  txt = "Win: 2";
}
else {score = 0; txt = "Lose: 0";}

setTimeout(function(){ r1.innerHTML = symbol(roll1);r1.style.color = r1col;}, 1000);
setTimeout(function(){ r2.innerHTML = symbol(roll2);r2.style.color = r2col;}, 1500);
setTimeout(function(){ r3.innerHTML = symbol(roll3);r3.style.color = r3col;}, 2000);

setTimeout(function(){ 
cash = (cash + score);
if (cash < 1) {txt = "Bankrupt!"; cash = 0;}
bank.innerHTML = cash;
resText.innerHTML = txt;
 }, 2500);


}


function roll(x) {
var x = Math.floor(Math.random() * 3) + 1;
return x;
}

function symbol(x) {
if (x == 1) {y = "&spades;";}
else if (x == 2) {y = "&clubs;";}
else {y = "&diams;";}
return y;
}