<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));
};
下面是代码中有字符串的部分，当你点击更靠近宝藏时，这些字符串应该会发生变化。//这个代码告诉玩家他们离宝藏有多近//获取表示距离的字符串
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>
我的代码工作得很好，除了当点击地图时，它应该在你靠近宝藏时显示，我返回了一个字符串，即"；你快到了"当你<20像素之外。
正如您所说，代码似乎可以工作——我复制到下面的代码片段中，您可以在这里运行它。我添加了一些控制台日志来查看发生了什么；高度vars都设置为800，而实际上图像是400 x 400。也许那是你的问题。否则，它似乎起作用。
您可能需要考虑将图像分解为正方形网格，例如20x20px。然后可能用半透明的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>