Make a JavaScript Dice Game

JavaScript > Make a JavaScript Dice Game

Play Dice Game

Dice Roller Durby - JavaScript Dice Game

Watch Video: Make a JavaScript Dice Game

Make a JavaScript Dice Game Video Tutorial

Dice Game File Structure

The file structure is how you organize the files in your website. Here is our project's file structure:

Mouse Hover over the ➼ blue text in the description to highlight.

dice
images
index.html
style.css

➼ Main Project Folder

➼ images - This is the folder that contains images used to create the dice game.

➼ index.html - This is the main page users will be directed to when entering your web address. HTML is the markup language that displays your content in the web browser. Our index.html file also contains the JavaScript used for the game.

➼ style.css - CSS formats HTML: color, size, shape, font ect.

CSS

Our JavaScript Dice Game uses a little bit of CSS. Click here for CSS tutorials.

Click here to learn about the responsive CSS used in this tutorial..

Project Code

************************
index.html
*************************

<html>
  <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta charset="UTF-8">
    <title>Dice Roller Durby</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="row" align="center">
      <div class="col-4">
        <h3>Your Dice</h3>
        <img src="images/d1.png" id="mydice1">
        <img src="images/d1.png" id="mydice2">
      </div>
      <div class="col-4">
        <h3>Enemy's Dice</h3>
        <img src="images/e1.png" id="hisdice1">
        <img src="images/e1.png" id="hisdice2">
        <div id="enemy_score"></div>
      </div>
        <div class="col-4" align="center">
          <img src="images/good-luck.gif" id="message" alt="Good Luck!"/>
          <button class="greenBut" onClick="throwdice()">Play!</button>
          </form>
        </div>
    </div>
      <script>
      // var sides = ["d1.png", "d2.png", "d3.png", "d4.png", "d5.png", "d6.png"];
      var side_alt = ["roll: 1", "roll: 2", "roll: 3", "roll: 4", "roll: 5", "roll: 6"];

function throwdice(){
      //create a random integer between 1 and 6
      var rand1 = Math.round(Math.random()*5) + 1;
      var rand2 = Math.round(Math.random()*5) + 1;
      var rand3 = Math.round(Math.random()*5) + 1;
      var rand4 = Math.round(Math.random()*5) + 1;

// Set Image src
      document.getElementById("mydice1").src = "images/d" + rand1 + ".png";
      document.getElementById("mydice2").src = "images/d" + rand2 + ".png";
      document.getElementById("hisdice1").src = "images/e" + rand3 + ".png";
      document.getElementById("hisdice2").src = "images/e" + rand4 + ".png";

// Set Image alt
      document.getElementById("mydice1").alt = side_alt[rand1];
      document.getElementById("mydice2").alt = side_alt[rand2];
      document.getElementById("hisdice1").alt = side_alt[rand3];
      document.getElementById("hisdice2").alt = side_alt[rand4];

who_won(rand1,rand2,rand3,rand4);
      }

function who_won(rand1,rand2,rand3,rand4){
        let player_points = rand1 + rand2 + 2;
        let enemy_points = rand3 + rand4 + 2;
        let giffy = winner(player_points,enemy_points);
        document.getElementById("message").src = "images/" + giffy;
        document.getElementById("message").alt = giffy;
      }

function winner(player, enemy) {
        if (player < enemy) {
          return "looser.gif";
        }
        if (enemy < player) {
          return "twerk-win.gif"
        }
        if (player == enemy) {
          return "equal.gif"
        }
      }

</script>
  </body>
</html>

************************
style.css
*************************

body {
 background-color: darkblue;
 color: yellow;
}

/* All elements width includes borders and padding*/
* {
box-sizing: border-box;
}

/* Rows*/
.row::after {
content: "";
clear: both;
display: table;
}

/* Classes containing "col-"*/
[class*="col-"] {
float: left;
padding: 15px;
}

/* Column width for small devices (i.e. smart phones)*/
[class*="col-"] {
width: 100%;
}

/* Column width for large devices (i.e. computers)*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

/* Column width for large devices (i.e. tablets)*/
@media only screen and (min-width: 600px) {
.col-t-1 {width: 8.33%;}
.col-t-2 {width: 16.66%;}
.col-t-3 {width: 25%;}
.col-t-4 {width: 33.33%;}
.col-t-5 {width: 41.66%;}
.col-t-6 {width: 50%;}
.col-t-7 {width: 58.33%;}
.col-t-8 {width: 66.66%;}
.col-t-9 {width: 75%;}
.col-t-10 {width: 83.33%;}
.col-t-11 {width: 91.66%;}
.col-t-12 {width: 100%;}
}

/* Button */
.greenBut {
color: darkblue;
padding: 12px; /* Some padding */
background-color: yellow;
font-size: 24px;
border: 1px solid #ccc; /* Gray border */
border-radius: 6px; /* Rounded borders */
margin: 10px;
}

img {
  max-width: 100%;
  margin: 10px;
}

button:hover {
  opacity: .5;
}

Download Dice Face Images

Click Here to Download

Wanna add scoring to your game?

Watch Video 2: Keeping Score - JavaScript Dice Game v1.5

JavaScript Game Keeping Score - Dice Game YouTube Video

JavaScript Dice Game Version 2

In version 2 we add a high score list! Continue to JavaScript Dice Game V2 or go back to learn about JavaScript random numbers?

JavaScript Random Numbers | JavaScript Dice Game V2

Language Tutorials

Linux

Mathematics

Projects

More!

Support