Question

In: Computer Science

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>

<body>
<div class="row" align="center">
<div class="col-4">
<h3>Your Dice</h3>
<img src="dice images/m1.png" width="100" height="100" alt="roll: 1" id="mydice1"/>
<img src="dice images/m1.png" width="100" height="100" alt="roll: 1" id="mydice2"/>
</div>
<div class="col-4">

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

<script>
function throwdice () {
   // Create Random Number
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 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 :

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

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

  7. Now create another text file in folder "dice" and rename it as style.css and copy the code given below.
  8. style.css

  9. 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;
    }

  10. Save both the files and run the file index.html using a web browser

  11. Below is the output of the code.  

  12. ​​​

venereology answered 1 year ago
Next > < Previous

Related Solutions

I have figured out this assignment, but I am having a hard time figuring out the...
I have figured out this assignment, but I am having a hard time figuring out the extra credit, Thanks! Creating a Rectangle class We have created a representation of a rectangle in C++ and extended it to create multiple representation's of rectangles. Classes can simplify that process considerably. In this assignment, your task is to convert the representation of a rectangle we created earlier in the semester to a Rectangle class. The Rectangle class shall consist of the following: The...
I have a working code for a dice game. What is the best way to add...
I have a working code for a dice game. What is the best way to add coding to keep track how many points each player makes? When they tie both players gets no points. When they reach to 100 the game ends or unless the player quit. How would I make it work? <!Doctype html> <html> <head> <meta charset="UTF-8"> <title>Dice Game</title> <link rel="stylesheet" type="text/css" href="dice.css"> </head> <body> <div class="row" align="center"> <div class="col-4"> <h3>Your Dice</h3> <img src="diceimages/m1.png" width="100" height="100" alt="roll: 1"...
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 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 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 of this, but whenever I press the button the app crashes. I'm assuming something is wrong with connecting the broadcastIntent() function. If you could really focus on the first part that would be great!! I appreciate any help :) Here are the directions from my professor: Create an empty project Create a method in MainActivity.java which...
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:...
I am currently working on this problem. It says it is wrong, and I was wondering...
I am currently working on this problem. It says it is wrong, and I was wondering if someone could correct my code to where its ouput is as followed. Expected Output: 6↵ 5↵ 4↵ 3↵ 2↵ 1 Actual Output: 9↵ 8↵ 7↵ 6↵ 5↵ 4↵ 3↵ 2↵ 1↵ 0↵ 9.10: Reverse Array Write a function that accepts an int array and the array’s size as arguments. The function should create a copy of the array, except that the element values...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT