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.
venereology answered 2 years agoRelated Solutions
After reading chapter 5 of the textbook and watching the video “JavaScript Loops” JavaScript Loops and...
After reading Chapter 3 of the text and watching the tutorial videos below, craft an initial...
After reading Chapter 9 of the textbook, discuss the following questions to the best of your...
After reading the chapter in your textbook, focus on documentation and informatics. Think about the principles...
Part A: Instructions After reading Chapters 5, 7, & 8 in the textbook, spend a few...
Define Instructions: After reading Chapter 4 of the textbook, define the following terms: -System of linear...
Part 1: Marketing & Community Relations: After reading chapter 16 of your textbook, you are to...
Ethical issues on the data collection After watching the two videos on ethical issues on the...
After reading the chapter chapter 7 content folder answer one of the following questions. 1. Describe...
After doing the readings and watching the videos. Answer the following. Killtrol® is a patent drug...
- Baked potatoes are normally wrapped in aluminum foil. How does this affect the cooling of the...
- What is the process to obtain biomass production
- A labor market has 50,000 people in the labor force. Each month, a fraction p of...
- A road with a radius of 72 m is banked so that a car can navigate...
- 1) If you had not dried the solid, would the calculated percent yield have been higher,...
- Two structures of alanine can be drawn that have a net charge of zero, but the...
- Co(II) was used as an internal standard to analyze a sample of Ti(IV) with atomic absorption...