CODEWITHSUNDEEP
javascript
Elton Frederik
Elton Frederik

Reputation: 259

Dice roll in javascript

function rolldice() {
    var x = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var y = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var dicetotal = x + y;
    var double = 0;
    $('.dice1').attr('id', "dice" + x);
    $('.dice2').attr('id', "dice" + y);
    if (x == y) { //<----checking if there is a double
        var double = double++; //<---increment double count
        //Now reroll the dice, but if you hit 3 doubles in a row, you get message go to jail.
    }
};

I want to know if I am going to need some loop...Please help me. This is part of a monopoly game. What do i have to add in the code, to make it loop if there is a double.

Upvotes: 2

Views: 26900

Answers (8)

GMKHussain
GMKHussain

Reputation: 4681

Created Dice Roll with Rolling animation effect using Vanilla JavaScript.

This will allow you to "roll" dice in 2D, giving you a random set of dice after 1 second.

const DICE_NUMBER = {
  1: '⚀',
  2: '⚁',
  3: '⚂',
  4: '⚃',
  5: '⚄',
  6: '⚅'
}


function rollDice(){
   const [dice1, dice2, status] = [document.getElementById("dice1"), document.getElementById("dice2"), document.getElementById("status")] 
   
  const MAX_NUM = 6;
  let d1 = 0
  let d2 = 0
  
  // Rolling Dice Animation
  const interval = setInterval(() => {
    d1 = (Math.random()*MAX_NUM) + 1 | 0
    d2 = (Math.random()*MAX_NUM) + 1 | 0
    dice1.innerText = DICE_NUMBER[d1]
    dice2.innerText = DICE_NUMBER[d2]
    dice1.setAttribute('data-num',  d1)
    dice2.setAttribute('data-num',  d2)
  }, 80)
  
  // Final Result
  setTimeout(()=> {
    clearInterval(interval)
    const result = (d1 == d2) ? `<mark>DOUBLES!</mark> You get a <mark>FREE</mark> turn!!` : ''
    status.innerHTML = result
  }, 1000)
  
}
.dice { font-size: 90px; }
[data-num='1'] { color: hotpink }
[data-num='2'] { color: blue }
[data-num='3'] { color: tan }
[data-num='4'] { color: purple }
[data-num='5'] { color: orange }
[data-num='6'] { color: green }
<button onclick="rollDice()">Click here 👉 Roll Dice</button>
<div id="status"></div>
<span class="dice" id="dice1"></span>
<span class="dice" id="dice2"></span>

Upvotes: 0

Paul Schmitz
Paul Schmitz

Reputation: 101

This is one possible solution.

function rolldice(dbl=0){
var x = Math.floor(Math.random()*((6-1)+1) + 1);
var y = Math.floor(Math.random()*((6-1)+1) + 1);
if(x===y){
   if(dbl!==3){
      dbl++;
      rolldice(dbl);
   }else{
      //goto jail
   }
}else{
    //no double
    dbl=0;
}
}

or

function rolldice(dbl=0){
var x = Math.floor(Math.random()*((6-1)+1) + 1);
var y = Math.floor(Math.random()*((6-1)+1) + 1);
if(x===y&&dbl!==3)
    dbl++;
    rolldice(dbl);
}else if(x===y&&dbl===3){
    //goto jail
}else{
    //no double
    dbl=0;
}
}

Upvotes: 0

Marcus Schack-Abildskov
Marcus Schack-Abildskov

Reputation: 80

This script works:

function rollDice(){
   var dice1 = document.getElementById("dice1");
   var dice2 = document.getElementById("dice2");
   var status = document.getElementById("status");
   var d1 = Math.floor(Math.random() * 6) + 1;
   var d2 = Math.floor(Math.random() * 6) + 1;
   var diceTotal = d1 + d2;
   dice1.innerHTML = d1;
   dice2.innerHTML = d2;
   status.innerHTML = "You rolled "+diceTotal+".";
   if(d1 == d2){
      status.innerHTML += "<br />DOUBLES! You get a free turn!!";
   }
}

Upvotes: 0

user1781290
user1781290

Reputation: 2864

Ok, besides this is more than two hours old and has already 4 answers, I want to add my 2 cents.

You state you want to make a Monopoly game. After most, if not all, dice rolls the player has to make decisions. That means after each roll you wait for user input (e.g., some button presses).

All other answers postet suggest to use recursive calls in some way. Instead I suggest to store the number of doubles alongside with the current player in some global variable. You do not use a loop, but instead something like:

var doubleCount = 0;

function rolldice() {
    var x = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var y = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var dicetotal = x + y;
    $('.dice1').attr('id', "dice" + x);
    $('.dice2').attr('id', "dice" + y);
    if (x == y) { //<----checking if there is a double
        doubleCount++; //<---increment double count
        if (doubleCount > 2) {
          // Got to Jail
        }
    }
    // Proceed as usual and come back to this, when the user presses the "Roll" Button again
};

Upvotes: 0

Dan Iveson
Dan Iveson

Reputation: 936

Don't use a loop.

Instead add the doubles counter as a parameter for the rolldice() function and call the function from within itself:

function rolldice(doubleCount) {
    var x = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var y = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var dicetotal = x + y;
    $('.dice1').attr('id', "dice" + x);
    $('.dice2').attr('id', "dice" + y);
    if (x == y) { //<----checking if there is a double
       doubleCount++;
       if (doubleCount == 3)
       {
           //go to jail
       }
       else
       {
           rolldice(doubleCount);
       }
    }
};

The initial call for a player's first roll would look like rolldice(0);

Upvotes: 0

Aashray
Aashray

Reputation: 2763

This has some complications. When there is a change of player, you need to reset the value of your variable for checking double rolls.

Do the following:

var dblRolls;
function userChange(){//call this on change of user
    dblRolls=0;
    rollDice();
}
function rolldice() {
    var x = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var y = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var dicetotal = x + y;
    var double = 0;
    $('.dice1').attr('id', "dice" + x);
    $('.dice2').attr('id', "dice" + y);
    if (x == y) { //<----checking if there is a double
        dblRoll++; //<---increment double count
        if(dblRoll==3)
        //jail
        else
            rollDice();
    }

};

Upvotes: 0

MSzucs
MSzucs

Reputation: 178

I think you need to create something like this:

var double = 0;

function rolldice(){

    var x = Math.floor(Math.random() * ((6-1)+1) + 1);
    var y = Math.floor(Math.random() * ((6-1)+1) + 1);

    var dicetotal = x + y;
    $('.dice1').attr('id',  "dice" + x);
    $('.dice2').attr('id', "dice" +y);

    if(x==y) {
       if (double < 3) {
          double++; // increase dobule
          rolldice(); // Call rolldice again...
       } else {
          // Here there is 3 in a row....
       }
    }
}

Upvotes: 0

LXSoft
LXSoft

Reputation: 596

You only need to make an recursive call:

var dbl = 0;
function rolldice() {
    var x = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var y = Math.floor(Math.random() * ((6 - 1) + 1) + 1);
    var dicetotal = x + y;
    $('.dice1').attr('id', "dice" + x);
    $('.dice2').attr('id', "dice" + y);
    if (x == y) { //<----checking if there is a double
        dbl++; //<---increment double count
        if(dbl%3==0) $('.out').attr('id', "jail");
        //Now reroll the dice, but if you hit 3 doubles in a row, you get message go to jail.
        rolldice();
    }
};

Upvotes: 1

Related Questions