I’m doing a school project of a dice game, the player select a number between 6-9 and afterwards throw two dices. If the dices show the chosen number, its game over. But i cant get the sum to add upp after each throw, it just shows each specific throws sum.
Also, how do i get the program to understand that it’s game over when the dices shows the “knockout” number?
let knockoutSiffra = 0;
const dices = document.querySelectorAll('.dice');
console.log(dices);
dices.forEach(bt =>{
bt.addEventListener('click', (e) =>{
knockoutSiffra = e.target.innerHTML;
console.log(knockoutSiffra)
})
})
document.getElementById('go')
.addEventListener('click', () => {
if(knockoutSiffra != 0){
choose.style.display = 'none'
play.style.display = 'block'
console.log('kör')
}
else{
console.log('välj ett nummer')
}
const showNumber = document.getElementById('showNumber');
showNumber.innerText = 'Ditt valda nummer är:' + " " + knockoutSiffra
})
// Slide 3
let lost = document.querySelector('.lost')
lost.style.display = 'none';
const dice1 = document.querySelector('.dice1');
const dice2 = document.querySelector('.dice2');
const result = document.querySelector('.dice-result');
const game = document.querySelector('.game');
let score = 0;
game.addEventListener('click', () => {
let d1 = GetRandomDice ();
let d2 = GetRandomDice ();
dice1.src = `Dice img/Dice-${d1}.png`;
dice2.src = `Dice img/Dice-${d2}.png`;
let sum = d1 + d2;
result.innerText = 'Antal poäng:' + " " + sum;
function GetRandomDice(){
return Math.ceil(Math.random() * 6);
}
})
This is just the last part of the HTML
<h1 id="showNumber">Ditt valda nummer är: </h1>
<h2 class="dice-result">Antal poäng:</h2>
<button class="game">Kasta tärningarna</button>
<section class="throw">
<img src="Dice img/Dice-3.png" alt="3" class="dice1">
<img src="Dice img/Dice-6.png" alt="6" class="dice2">
</section>
<section>
<h2 class="lost">Du förlorade!</h2>
<button class="playAgain">Spela igen</button>
Tried very much of different stuff but i can’t get the code to work properly.
