Last active
April 3, 2017 01:29
-
-
Save jackrr/f381c706135ae67df1473cb97b9fcfda to your computer and use it in GitHub Desktop.
Dice game starter code. Click to import: https://popcode.org/?gist=f381c706135ae67df1473cb97b9fcfda
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Dice Roll Game</title> | |
| </head> | |
| <body> | |
| <h1>Dice Roller</h1> | |
| <div class="dice" id="first-die"></div> | |
| <div class="dice" id="second-die"></div> | |
| <button id="roll-dice">Roll the Dice</button> | |
| <div class="outcome"></div> | |
| <p><span id="total"></span> Total</p> | |
| <p><span id="wins"></span> Won</p> | |
| <p><span id="losses"></span> Lost</p> | |
| <p><span id="pct"></span>% Won</p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"enabledLibraries":["jquery"]} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Make a game that simulates dice rolls | |
| First, you'll make the dice randomly display | |
| a number from 1-6. | |
| Next you'll add some victory conditions. | |
| */ | |
| // Pro Tip: want to know if your function is working? call it inside console.log()! | |
| // Step 1. Make the function randomDiceNumber | |
| // return a random number from 1-6 | |
| function randomDiceNumber() { | |
| // Generate random number here | |
| // Hint: You'll need to use Math.random and Math.floor | |
| } | |
| // Step 3. Move on to Step 2, then come back here! | |
| // Write a function showOutcome to put the message | |
| // on the page | |
| // Step 2. Update the function rollDice. | |
| function rollDice(){ | |
| // a) use randomDiceNumber to get new values for the dice | |
| // hint: save them in variables | |
| // b) use jQuery to put those dice numbers on the webpage | |
| // c) check the outcome to see if the dice match and | |
| // save it in a variable called 'outcome' | |
| // d) display a victory or loss on the webpage | |
| // 1. Scroll back up and complete Step 3 (define function showOutcome above) | |
| // 2. Call showOutcome here with the variable outcome | |
| } | |
| // Step 4. Add a click handler to the roll button | |
| // so that new numbers appear on the dice | |
| // when the button is clicked. | |
| // Hint: Use the rollDice function | |
| // BONUS | |
| // Add a divs to the page to: | |
| // a) Display the total number of rolls so far | |
| // b) Display the number of wins | |
| // c) Display the number of losses | |
| // d) Display the percentage of wins out of total rolls |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .dice { | |
| border: 1px solid black; | |
| background-color: aquamarine; | |
| display: inline-block; | |
| border-radius: 8px; | |
| text-align: center; | |
| font-size: 24px; | |
| margin: 10px; | |
| height: 30px; | |
| width: 30px; | |
| padding: 20px; | |
| } | |
| #roll-dice { | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment