Question

In: Computer Science

After reading chapter 7 of the textbook and watching the videos “JavaScript Tutorial - Dice Roll...

After reading chapter 7 of the textbook and watching the videos “JavaScript Tutorial - Dice Roll Programming For Web Browser Games JavaScript Tutorial - Dice Roll Programming For Web Browser Games or “Make a JavaScript Dice Game” Make a JavaScript Dice Game

Create a page that allows the user to play a game with the computer. In this game, the player will roll two dice and the computer will roll two dice. The Math.random() method will be used to generate each roll of a die, from 1 to 6. The sum of the computer’s roll should be compared to the sum of the player’s roll and whoever has the greater sum is the winner of that round. The sum of the winner’s roll for that round should be added to his or her point total. Use functions to call for each roll of two dice and the sum, for keeping track of the points, and to allow the player to continue or quit after a round of play. The following are the game rules: n If one player rolls doubles (i.e., two fours or two sixes, etc.) and is a winner for that round, he or she should get double points. n If one player rolls doubles but is not a winner, nothing special happens. n If the two sums for any round are a tie, no one gets any points. n The game ends when either player reaches at least 100 points or when the human player wants to quit. Save your page as dice.html and be sure to include an appropriate page title.

Please upload a screenshot of the working program along with a zipped folder with the .HTML file and any other files or pictures.

Solutions

Expert Solution

NOTE:- I am providing you the code for the dice game you can run this code and play the game by yourself and then take the screenshot of the game. Enjoy.( Hope it will fullfill the above question requirement).

Here i will guide you step by step so that you can understand the concept:-

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.

  • Dice 1

  • Dice 2

  • Dice 3

  • Dice 4

  • Dice 5

  • Dice 6

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).

<!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>

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

<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>

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.

<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>

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

<!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>

Output:

I hope you liked the concept and the game please do upvote if you are happy sorry if the game is different form the question but i know it will help you either in clearing your conecpts.

Thanks and have a nice day buddy.

All the very best.


Related Solutions

After reading chapter 5 of the textbook and watching the video “JavaScript Loops” JavaScript Loops and...
After reading chapter 5 of the textbook and watching the video “JavaScript Loops” JavaScript Loops and “JavaScript Decision Statements” 11 JavaScript Decision Statements Create a html web page that allows the coach of a town’s soccer league to enter the ages of all the children who have registered for soccer this year. Children between the ages of 4 and 15 are allowed to sign up for soccer but there can be a lot of variation in the number of children...
After reading Chapter 3 of the text and watching the tutorial videos below, craft an initial...
After reading Chapter 3 of the text and watching the tutorial videos below, craft an initial post that answers the following questions: What are the possible reasons why the government may make a market intervention? What are the possible implications of such interventions? How might the wedge between consumers and firms lead to market distortions?
After reading Chapter 9 of the textbook, discuss the following questions to the best of your...
After reading Chapter 9 of the textbook, discuss the following questions to the best of your abilities: -Let's pretend that you recently moved from Italy to the United States. How can you adjust to a new society and connect to people in a different community? -In your own words, state what does “living in a diverse world” mean to you? -Name two positive effects and two negative effects of using communication technology. -Define “prejudice” and name three causes of prejudice....
After reading the chapter in your textbook, focus on documentation and informatics. Think about the principles...
After reading the chapter in your textbook, focus on documentation and informatics. Think about the principles of reporting and documentation. Identify and briefly discuss three challenges a nurse has in ensuring accurate and confidential documentation. Then discuss what actions a nurse can take to overcome these challenges including how informatics might make a difference.
Part A: Instructions After reading Chapters 5, 7, & 8 in the textbook, spend a few...
Part A: Instructions After reading Chapters 5, 7, & 8 in the textbook, spend a few moments thinking about and reflecting upon the messages and lessons you have received from your family, friends, education, community, and society (Ecological Model of Health and Wellness) on food and nutrition. In the space below, answer the following questions. For each question, please reflect and respond with at least one thorough paragraph per question. a. Growing up, what are some messages you received from...
Define Instructions: After reading Chapter 4 of the textbook, define the following terms: -System of linear...
Define Instructions: After reading Chapter 4 of the textbook, define the following terms: -System of linear equations -Solution to a system of equations -Consistent system of equations -Inconsistent system of equations Write a good paragraph with at least 5 sentences using a minimum of 75 words.
Part 1: Marketing & Community Relations: After reading chapter 16 of your textbook, you are to...
Part 1: Marketing & Community Relations: After reading chapter 16 of your textbook, you are to use the Internet and research a long-term care facility in your area. After studying the organization, you are to address the following questions: a. How does the facility “brand” its product? b. Does the long-term care facility engage in community involvement? 3. Your initial response must be 250 words in length and posted on or before Wednesday.
Ethical issues on the data collection After watching the two videos on ethical issues on the...
Ethical issues on the data collection After watching the two videos on ethical issues on the data collection titled “Belmont Report Educational” and “Belmont Report Educational(Part One: Basic Ethical Principles)” available to you in this week's course material, please reflect your understanding of the subject and provide us your perspective on this concept from your perspective Your post should be 500-700 words long without counting the references and/or direct quotes.
After reading the chapter chapter 7 content folder answer one of the following questions. 1. Describe...
After reading the chapter chapter 7 content folder answer one of the following questions. 1. Describe the characteristics of a proprietary funds? Explain the difference between an Enterprise Fund and an Internal Service Fund? 2. When is it required to establish an enterprise fund? How does a enterprise fund show up in the Governmental Wide financial statements both the statement of Net Assets and Statements of Activities? 3. List at least 5 differences between a proprietary fund and a general...
After doing the readings and watching the videos. Answer the following. Killtrol® is a patent drug...
After doing the readings and watching the videos. Answer the following. Killtrol® is a patent drug of Clark Pharmaceuticals. As of April 1, 2019, it will go off patent and become a generic drug (everyone can manufacture it). Answer the following questions.       a) What market structure best describes the market structure for Killtrol® while on patent?       b) What market structure best describes the market structure for Killtrol® when it goes off patent?       c) What will happen to the...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT