Created
October 18, 2018 21:58
-
-
Save Gerst20051/14e7fbd7b34c4c7997e952a9c97719d8 to your computer and use it in GitHub Desktop.
CrystalCollectors
This file contains 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>CrystalCollectors</title> | |
<style> | |
.crystal-image { | |
cursor: pointer; | |
height: 100px; | |
margin: 10px; | |
width: 100px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>CrystalCollectors!</h1> | |
<div> | |
<p>You will be given a random number at the start of the game.</p> | |
<p>There are four crystals below. By clicking on a crystal you will add a specific amount of points to your total score.</p> | |
<p>You will win the game by matching your total score to random number, you lose the game if our total score goes above the random number.</p> | |
<p>The value of each crystal is hidden from you, click on it.</p> | |
<p>Each time when the game starts the game will change the value of each crystal.</p> | |
</div> | |
<div id="randomNumber"></div> | |
<div>wins:</div> | |
<div>losses:</div> | |
<div id="crystals"></div> | |
<div>Your total score is:</div> | |
<div id="yourScore"></div> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script> | |
function getRandomInt(min, max) { | |
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random | |
return Math.floor(Math.random() * (max - min + 1)) + min; | |
} | |
var targetNumber = getRandomInt(19, 120); | |
$("#number-to-guess").text(targetNumber); | |
var counter = 0; | |
for (var i = 0; i < 4; i++) { | |
var imageCrystal = $("<img>"); | |
imageCrystal.addClass("crystal-image"); | |
imageCrystal.attr("src", "http://cdn.playbuzz.com/cdn/35910209-2844-45c0-b099-f4d82878d54f/00261fda-4062-4096-81fd-8cf96b9034e8.jpg"); | |
imageCrystal.attr("data-crystalvalue", getRandomInt(1, 12)); | |
$("#crystals").append(imageCrystal); | |
} | |
$(".crystal-image").on("click", function () { | |
var crystalValue = parseInt($(this).attr("data-crystalvalue")); | |
counter += crystalValue; | |
alert("New score: " + counter); | |
if (counter === targetNumber) { | |
alert("You win!"); | |
} else if (counter >= targetNumber) { | |
alert("You lose!!"); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment