<!DOCTYPE html>
<html>
<head>
<title>Find the buried treasure!</title>
</head>
<body>
<h1 id="heading">Find the buried treasure!</h1>
<h2 id="heading">Let's do it!</h1>
<img id="map" width=800 height=800 src="http://nostarch.com/images/treasuremap.png">
<p id="distance"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var getRandomN = function(size) {
return(Math.floor(Math.random()*size))
}
var h = 800;
var w = 800;
var clicks = 0;
var target = {
x: getRandomN(w), y: getRandomN(h)
};
var getDistance = function (event, target) {
var diffX = event.offsetX - target.x;
var diffY = event.offsetY - target.y;
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
var getDistanceHint = function (distance) {
if (distance < 20) {
return "Very very Close!";
} else if (distance < 40) {
return "Close";
} else if (distance < 80) {
return "Moving quite Closer";
} else if (distance < 160) {
return "Bit far";
} else if (distance < 320) {
return "Very far";
} else if (distance < 640) {
return "Remote";
} else {
return "Completely off track!";
} };
$("#map").click(function (event) {
clicks++;
var distance = getDistance(event, target);
var distanceHint = getDistanceHint(distance);
$("h2").html(String(distanceHint + " distance is " + distance + " Number of clicks = " + clicks));
if (distance < 15) {
$("h2").html(String("Found the treasure in " + clicks + " clicks!"));
}
});
</script>
</body>
</html>