<body>
<h1 id="heading">Find the buried treasure!</h1>
<img id="map" width="400" height="400"
src="http://nostarch.com/images/treasuremap.png">
<p id="distance"></p>
<p id="clicks"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
// 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; //stores the horizontal distance btw the
clicked location & the target, which we calculate by subtracting target.x
(the x-coordinate of the treasure)from event.offsetX(the x-coordinate of
click)
var diffY = event.offsetY - target.y;
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
Below is the part of the code that has the strings that should change as you click closer to the treasure. //This code tells the player how close they are to the treasure //Get a string representing the distance
var getDistanceHint = function(distance){
if(distance < 10) {
return "You go gurl!!!";
}else if (distance < 20) {
return "You're almost there";
}else if (distance < 40) {
return "Hot";
}else if (distance < 80) {
return "Warm but no Cigar";
}else if (distance < 160) {
return "Hmmmm Try harder";
}else if (distance < 320) {
return "Really, you can do so much Better";
}else {
return "Freezing, Try it Again!"
}
};
// Setting the treasure coordinates
var width = 800;
var height = 800;
var clicks = 0;
var limit = 30;
//Create a random target location
var target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
//The Click Handler
//Add a click handler to the img element
$("#map").click(function(event) {
//increments clicks by 1 each time the player clicks the map
clicks++;
// limit the amount of clicks to >=30 clicks (#3 programming challenge)
if (clicks >= limit){
alert("Game Over!!")
}
var clicksCount = "Clicks left " + (30 - clicks);
$("#clicks").text(clicksCount);
//Get distance between click event and target
var distance = getDistance(event, target);
//Convert distance to a hint
var distanceHint = getDistanceHint(distance);
//Update the #distance element with the new hint
$('#distance').text(distanceHint);
//If the click was close enough, tell them they won
if (distance < 8){
alert("Found the treasure in " + clicks + " clicks!");
}
});
</script>
</body>
My code is working fine except for when the map is clicked it should show when you are close to the treasure my returning a string i.e "You're almost there" when you are < 20 pixels away.
As you say the code seems to work - I copied into the snippet below which you can run here. I added some console logging to see what was going on. The only change I made was to the width & height vars which were both set at 800 when in fact the image is 400 x 400. Maybe that was your issue. Otherwise it appears to work.
You might want to consider breaking the image into a grid of squares, say 20x20px. Then maybe mark where the player clicked already with a semi-transparent div.
// 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));
};
var getDistanceHint = function(distance) {
if (distance < 10) {
return "You go gurl!!!";
} else if (distance < 20) {
return "You're almost there";
} else if (distance < 40) {
return "Hot";
} else if (distance < 80) {
return "Warm but no Cigar";
} else if (distance < 160) {
return "Hmmmm Try harder";
} else if (distance < 320) {
return "Really, you can do so much Better";
} else {
return "Freezing, Try it Again!"
}
};
// Setting the treasure coordinates
var width = 400; //800;
var height = 400; //800;
var clicks = 0;
var limit = 30;
//Create a random target location
var target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
console.log(target)
//The Click Handler
//Add a click handler to the img element
$("#map").click(function(event) {
//increments clicks by 1 each time the player clicks the map
clicks++;
// limit the amount of clicks to >=30 clicks (#3 programming challenge)
if (clicks >= limit) {
alert("Game Over!!")
}
var clicksCount = "Clicks left " + (30 - clicks);
$("#clicks").text(clicksCount);
//Get distance between click event and target
var distance = getDistance(event, target);
console.log(distance)
//Convert distance to a hint
var distanceHint = getDistanceHint(distance);
console.log(distanceHint)
//Update the #distance element with the new hint
$('#distance').text(distanceHint);
//If the click was close enough, tell them they won
if (distance < 8) {
alert("Found the treasure in " + clicks + " clicks!");
}
});<h1 id="heading">Find the buried treasure!</h1>
<p id="distance"></p>
<p id="clicks"></p>
<img id="map" width="400" height="400" src="http://nostarch.com/images/treasuremap.png">
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>