Buried Treasure Game

In this example below you will see how to do a Buried Treasure Game with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -_-Nina-_-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -_-Nina-_- ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Buried Treasure Game</title>
  
  
  
  
  
</head>

<body>

  <head>
  <title>
    Find the buried treasure
  </title>
</head>

<body>
  
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  
  
  
  <h1 id="heading">Find the buried treasure!  </h1>
  <img id="map" width=400 height=400 src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/treasuremap.png">
  
  <p id="distance"></p>
  <p id="clicks-remaining"></p>
  
  
  
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-_-Nina-_-/buried-treasure-game-GyKbMj */
//Get a random number from 0 to size

var getRandomNumber = function(size) {
  return Math.floor(Math.random() * size);
};

//Calculate distance between click event and target

var getDistance = function(event, target) {
  var diffX = event.offsetX - target.X;
  var diffY = event.offsetY - target.y;
  return Math.sqrt ((diffX * diffX) + (diffY * diffY));
};

//Get a string representing the distance

var getDistanceHint = function(distance) {
  if (distance < 60) {
    return "Boiling Hot!";
  } 
  else if (distance < 80) {
    return "Really Hot";
  } 
  else if (distance < 100) {
    return "Hot";
  } 
  else if (distance < 130) {
    return "Warm";
  } 
  else if (distance < 160) {
    return "Cold";
  } 
  else if (distance < 320) {
    return "Really Cold";
  } 
  else if (distance < 640) {
    return "Really REALLY cold - BRRRRRR";
  } 
  else {
    return "Freezing!!!!";
  }
};

//Set up variables

var width = 800;
var height = 800;
var clicks = 0;
var clickLimit = 20;

//Creat a random target location

var target = {
  x: getRandomNumber(width),
  y: getRandomNumber(height)
};

//Add a click handler to the img element

$("#map").click(function(event) {
  clicks++;
  
  if (clicks > clickLimit) {
    alert("GAME OVER");
    return;
  }

//Ger distance between click event and target
var distance = getDistance(event,target);

//Convert distance to a hint
var distanceHint = getDistanceHint(distance);

//Update the #distane element with the new hint
$("#distance").text(distanceHint);

//Update the #clicks-remaining element with the new number of clicks remaining
$("#clicks-remaining").text(clickLimit - clicks);

//If the click was close enough, tell player they won
if (distance < 50) {
  alert("Found the treasure in" + clicks + "clicks!");
}
});

Comments