Question

I have created images that I would like to have placed where the message is revealed?...

I have created images that I would like to have placed where the message is revealed? What is the best way to make it work. I tried to make it work and have not had much success. My images are saved as png's. Here is my original code.

<!Doctype html>
<html>
<head>

<meta charset="UTF-8">
<title>Dice Game</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="row" align="center">
<div class="col-4">
<h3>Your Dice</h3>
<img src="images/d1.png" width="100" height="100" alt="roll: 1" id="mydice1">
<img src="images/d1.png" width="100" height="100" alt="roll: 1" id="mydice2">
</div>
<div class="col-4">
<h3>Enemy's Dice</h3>
<img src="images/e1.png" width="100" height="100" alt="roll: 1" id="hisdice1">
<img src="images/e1.png" width="100" height="100" alt="roll: 1" 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>

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

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Here is the solution for the above problem , images beside each player message

<!Doctype html>
<html>
<head>

<meta charset="UTF-8">
<title>Dice Game</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style>
   .col-4{
       display:flex;
   }  
   .row,.button1{
   width:55%;
margin-left:auto;
margin-right:auto;
}

</style>
</head>
<body>
<div class="row">
<div class="col-4">
<h3>Your Dice</h3>
<img src="images/d1.png" width="100" height="100" id="mydice1">
<img src="images/d1.png" width="100" height="100" id="mydice2">
</div>
<div class="col-4">
<h3>Enemy's Dice</h3>
<img src="images/e1.png" width="100" height="100" id="hisdice1">
<img src="images/e1.png" width="100" height="100" id="hisdice2">
<div id="enemy_score"></div>
</div>
<div class="button1" >
<p id="message"> Good Luck!</p>
<button class="greenBut" onClick="throwdice()">Play!</button>
</div>
</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>

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>         
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>                   <script src="code.js"></script>   </head>      <body onload="setFocus();">     <div class="container">                                       <div class="main">                                                                                <form action="#" method="post" name="form_name" id="form_id" class="form_class" >                                                                           <h2>--Principal Loan Form--</h2>                                                                                                                                                      <h5>Disclaimer: This software by no mean will precisely predict your mortgage through your lender company.  This Software will only assume the four items below in order to make an educated guess or prediction to your exact mortgage interests amount and the duration of your loan from your lender. <img...
I have trouble in my code with - Create and append the fancySheet link element to...
I have trouble in my code with - Create and append the fancySheet link element to the document head - Create and append figBox element to element with id box - Populate the figure box with preview images of the five fancy style sheets I don't understand what went wrong. New Perspectives HMTL5, CSS3, and JavaScript T12 Case Problem 1: New Accents Photography JavaScript File Event Listener Go to the na_styler.js file in your editor. Add an event listener that...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code? Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3);...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics. I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT