Skip to content

Instantly share code, notes, and snippets.

@Gerst20051
Created October 18, 2018 21:58
Show Gist options
  • Save Gerst20051/14e7fbd7b34c4c7997e952a9c97719d8 to your computer and use it in GitHub Desktop.
Save Gerst20051/14e7fbd7b34c4c7997e952a9c97719d8 to your computer and use it in GitHub Desktop.
CrystalCollectors
<!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