Building a Dice Game using JavaScript

We will be building a Dice Game Project using HTML, CSS, and JavaScript. The Dice Game is based on a two-player. Both players roll the dice and the player who gets the highest phase value will win the game.

Images of Dice Phases: The list of dice phases images are given below. Save all the images in a folder where you save your HTML, CSS, and JavaScript files. You can save all HTML, CSS, and JavaScript files separately and link CSS and JavaScript files to the HTML file or combine all codes (HTML, CSS and JavaScript) in a single file and execute it.

HTML Code: HTML code is used to design the basic structure of the project. The HTML code contains the container class that holds the player’s name and initial dice phase. Another bottom div contains the two buttons (one button for roll the dice and another button for rename the player name).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Dice Game</title>
</head>
  
<body>
    <div class="container">
        <h1>Let's Play</h1>
  
        <div class="dice">
            <p class="Player1">Player 1</p>
            <img class="img1" src="dice6.png">
        </div>
  
        <div class="dice">
            <p class="Player2">Player 2</p>
            <img class="img2" src="dice6.png">
        </div>
    </div>
  
    <div class="container bottom">
        <button type="button" class="butn"
            onClick="rollTheDice()">
            Roll the Dice
        </button>
    </div>
    <div class="container bottom">
        <button type="button" class="butn" 
            onClick="editNames()">
            Edit Names
        </button>
    </div>
</body>
  
</html>

chevron_right


CSS Code: In this section, we will use some CSS property to style the Dice Game.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    .container {
        width: 70%;
        margin: auto;
        text-align: center;
    }
  
    .dice {
        text-align: center;
        display: inline-block;
        margin: 10px;
    }
  
    body {
        background-color: #042f4b;
        margin: 0;
    }
  
    h1 {
        margin: 30px;
        font-family: "Lobster", cursive;
        text-shadow: 5px 0 #232931;
        font-size: 4.5rem;
        color: #4ecca3;
        text-align: center;
    }
  
    p {
        font-size: 2rem;
        color: #4ecca3;
        font-family: "Indie Flower", cursive;
    }
  
    img {
        width: 100%;
    }
  
    .bottom {
        padding-top: 30px;
    }
  
    .butn {
        background: #4ecca3;
        font-family: "Indie Flower", cursive;
        border-radius: 7px;
        color: #ffff;
        font-size: 30px;
        padding: 16px 25px 16px 25px;
        text-decoration: none;
    }
  
    .butn:hover {
        background: #232931;
        text-decoration: none;
    }
</style>

chevron_right


JavaScript Code: The JavaScript code contains the functionality of Dice Game. The first functionality is to rename the player name after clicking the button. Another functionality is to roll the dice after clicking the button. After rolling the dice by both the player, anyone player will win who get the highest phase value. If both players get the same phase value then the game will draw.



filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
    // Player name
    var player1 = "Player 1";
    var player2 = "Player 2";
  
    // Function to change the player name
    function editNames() {
        player1 = prompt("Change Player1 name");
        player2 = prompt("Change player2 name");
  
        document.querySelector("p.Player1").innerHTML = player1;
        document.querySelector("p.Player2").innerHTML = player2;
    }
  
    // Function to roll the dice
    function rollTheDice() {
        setTimeout(function () {
            var randomNumber1 = Math.floor(Math.random() * 6) + 1;
            var randomNumber2 = Math.floor(Math.random() * 6) + 1;
  
            document.querySelector(".img1").setAttribute("src",
                "dice" + randomNumber1 + ".png");
  
            document.querySelector(".img2").setAttribute("src",
                "dice" + randomNumber2 + ".png");
  
            if (randomNumber1 === randomNumber2) {
                document.querySelector("h1").innerHTML = "Draw!";
            }
  
            else if (randomNumber1 < randomNumber2) {
                document.querySelector("h1").innerHTML
                                = (player2 + " WINS!");
            }
  
            else {
                document.querySelector("h1").innerHTML
                                = (player1 + " WINS!");
            }
        }, 2500);
    }
</script>

chevron_right


Complete Code: After combining the above three sections (HTML, CSS, and JavaScript) code, we will get the complete Dice Game.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content
        ="width=device-width, initial-scale=1.0">
    <title>Dice Game</title>
  
    <style>
        .container {
            width: 70%;
            margin: auto;
            text-align: center;
        }
  
        .dice {
            text-align: center;
            display: inline-block;
            margin: 10px;
        }
  
        body {
            background-color: #042f4b;
            margin: 0;
        }
  
        h1 {
            margin: 30px;
            font-family: "Lobster", cursive;
            text-shadow: 5px 0 #232931;
            font-size: 4.5rem;
            color: #4ecca3;
            text-align: center;
        }
  
        p {
            font-size: 2rem;
            color: #4ecca3;
            font-family: "Indie Flower", cursive;
        }
  
        img {
            width: 100%;
        }
  
        .bottom {
            padding-top: 30px;
        }
  
        .butn {
            background: #4ecca3;
            font-family: "Indie Flower", cursive;
            border-radius: 7px;
            color: #ffff;
            font-size: 30px;
            padding: 16px 25px 16px 25px;
            text-decoration: none;
        }
  
        .butn:hover {
            background: #232931;
            text-decoration: none;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>Let's Play</h1>
  
        <div class="dice">
            <p class="Player1">Player 1</p>
            <img class="img1" src="dice6.png">
        </div>
  
        <div class="dice">
            <p class="Player2">Player 2</p>
            <img class="img2" src="dice6.png">
        </div>
    </div>
  
    <div class="container bottom">
        <button type="button" class="butn"
            onClick="rollTheDice()">
            Roll the Dice
        </button>
    </div>
    <div class="container bottom">
        <button type="button" class="butn"
            onClick="editNames()">
            Edit Names
        </button>
    </div>
  
    <script>
  
        // Player name
        var player1 = "Player 1";
        var player2 = "Player 2";
  
        // Function to change the player name
        function editNames() {
            player1 = prompt("Change Player1 name");
            player2 = prompt("Change player2 name");
  
            document.querySelector("p.Player1")
                            .innerHTML = player1;
                              
            document.querySelector("p.Player2")
                            .innerHTML = player2;
        }
  
        // Function to roll the dice
        function rollTheDice() {
            setTimeout(function () {
                var randomNumber1 = Math.floor(Math.random() * 6) + 1;
                var randomNumber2 = Math.floor(Math.random() * 6) + 1;
  
                document.querySelector(".img1").setAttribute("src",
                    "dice" + randomNumber1 + ".png");
  
                document.querySelector(".img2").setAttribute("src",
                    "dice" + randomNumber2 + ".png");
  
                if (randomNumber1 === randomNumber2) {
                    document.querySelector("h1").innerHTML = "Draw!";
                }
  
                else if (randomNumber1 < randomNumber2) {
                    document.querySelector("h1").innerHTML
                        = (player2 + " WINS!");
                }
  
                else {
                    document.querySelector("h1").innerHTML
                        = (player1 + " WINS!");
                }
            }, 2500);
        }
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.