I am currently working on creating a dice game. I have not figured out how to...

I am currently working on creating a dice game. I have not figured out how to make it work? What should I do to make it work?

Here is what I have so far:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dice Game</title>
<link rel="stylesheet" type="text/css" href="dice.css">

</head>

<h3>Opponent's Dice</h3>
<img src="dice images/o1.png" width="100" height="100" alt="roll: 1" id="opdice1"/>
<img src="dice images/o1.png" width="100" height="100" alt="roll: 1" id="opdice2"/>
</div>
<div class="col-4">
<img src="dice images/goodluck.png" width="150" height="150" alt="Good Luck" id="message"/>
<button class="roll" onlick="throwdice()">Roll Dice</button>
</div>
</div>

// Set Images scr
document.getElementById("mydice1").src = "images/m" + rand1 + ".png";
document.getElementById("mydice2").src = "images/m" + rand2 + ".png";
getElementById("opdice1").src = "images/o" + rand3 + ".png";
document.getElementById("opdice2").src = "images/o" + rand4 + ".png";

//Set Images alt
var side_alt = ["roll:1", "roll: 2", "roll: 3", "roll: 4", "roll: 5", "roll: 6",
document.getElementById('mydice1').alt = side_alt[rand1-1];
document.getElementById('mydice2').alt = side_alt[rand2-1];
document.getElementById('opdice1').alt = side_alt[rand3-1];
document.getElementById('opdice2').alt = side_alt[rand4-1];
}
</script>
</body>

</html>

Solutions

Expert Solution

Here is the code you can try running for dice game.

Steps to run the code :

Create a folder dice on your desktop
Create another folder with name "images" in the current "dice" folder
Add the images given below into the folder "images"
Now create a text file in folder "dice" and name it as index.html and copy the code given next point.
index.html

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta charset="UTF-8">
<title>Dice Game</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">
<p id="message"> Good Luck!</p>
<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 result = winner(player_points,enemy_points);
document.getElementById("message").innerHTML = result;
}

function winner(player, enemy) {
if (player < enemy) {
return "looser";
}
if (enemy < player) {
return "winner"
}
if (player == enemy) {
return "equal"
}
}

</script>
</body>
</html>
Now create another text file in folder "dice" and rename it as style.css and copy the code given below.
style.css
body {
background-color: lightblue;
color: darkblue;
}

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

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

/* 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;
}
Save both the files and run the file index.html using a web browser
Below is the output of the code.

venereology answered 11 months ago

Next > < Previous

Related Solutions

I am working on creating a Wiebull distribution from a large set of data I have....

I am working on creating a Wiebull distribution from a large set of data I have. Everything I find online says that I should be given the shape parameter (beta), and scale parameter (eta/apha). I do not have these numbers and I am not sure how to find them to accurately create a Weibull dist.

I figured it out thanks

I am working on creating a Broadcast Receiver. I am extremely new to Android development and...

I am working on creating a Broadcast Receiver. I am extremely new to Android development and Java. I added my code at the bottom. Whenever I press the button the app crashes. I'm assuming something is wrong with connecting the broadcastIntent() function. I appreciate any help :) Here are the directions from my professor: Create an empty project Create a method in MainActivity.java which creates a Broadcast. public void broadcastIntent(View view){ Intent intent = new Intent(); intent.setAction("my.CUSTOM_INTENT"); sendBroadcast(intent);...

I have figured out the first part of this question in that there is no significant...

I have figured out the first part of this question in that there is no significant difference because 1.78<2.306. But this second part is confusing to me. Can you explain the formula I need to use? Thanks .Menstrual cycle lengths (days) in an SRS of nine women are as follows: {31, 28, 26, 24, 29, 33, 25, 26, 28}. Use this data to test whether mean menstrual cycle length differs significantly from a lunar month using a one sample t-test....

I am creating SAS code, but am receiving an errors " ERROR: Value is out of...

I am creating SAS code, but am receiving an errors " ERROR: Value is out of range or inappropriate. ERROR: No body file. HTML5(WEB) output will not be created." This is the code: option ls=65 ps=65; data one; input IQ; cards; 145 139 122 ; title 'Normal Quantile - Quantile Plot for IQ'; ods graphics on; proc univariate data=one; qqplot IQ / normal (mu=est sigma=est); run;

Forget it, I figured it out on my own, S&H I figured everyone new that it...

Forget it, I figured it out on my own, S&H I figured everyone new that it was Shipping and Handling or that Circ. was circulation. Question was, is it profitable at .10%? 2nd question was How many units and what is the response rate needed to Breakeven? I'm sorry I thought I had all the information and thought the question was enough to understand. Sorry if confused hope that helped. Explain how to get answers, excel would be great. Facts:...

Explain applying for a position that I am currently working as a para-educator, however, I am...

Explain applying for a position that I am currently working as a para-educator, however, I am hired as an adult assistant. We are a new school short staff so I am needed to do more of the Para-educator's work alongside taking care of my student. How do I explain that showing I am qualified to do the new posting of Para-educator?

Hello, I am working on an assignment but I am unsure of how to solve it....

Hello, I am working on an assignment but I am unsure of how to solve it. Please help me. The assignment details are below. Consider this scenario: Your friend starts a website, nothingbutflags.com, which is not making money. Your friend asks you to help generate more traffic. You ask your friend how much traffic the website had last month? And your friend replies and says only 500 visits. You also ask how many flags did you sell? Your friend replies...

Hello, I am working on an assignment but I am unsure of how to solve it....

Game of dice - fair dice: If I throw a number >= 5 I win. If...

Game of dice - fair dice: If I throw a number >= 5 I win. If he throws a number =< 4 he wins. I throw the first dice. Given that he loses(throws a number >4) what is the probability of me winning ? What is the expected number of throws before either of us wins?

Subjects