skip to Main Content

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.

2

Answers


  1. Try the following code snippet:

    let totalsum = totalsum + sum;
    

    You want totalsum to be 0 at the beginning and be updated after each throw

    Login or Signup to reply.
  2. the program can’t understand it’s game over, make the game look like it’s over.
    When d1 + d2 = the input, you can show a message with the content ‘Congratulations to you. Your answer is correct’.

    alert(‘Congratulations to you. Your answer is correct’);

    and do anything else to show that the game is over already

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search