1,我们需要在藏宝地图图像中为藏宝选取一个随机的位置。地图的大小是 600 像素 ×400 像素的大小,左上角的像素的坐标将是{ x: 0,y: 0 },而右下角的像素将会是{ x: 599, y: 399 }。为了在藏宝图中设置一个随机的坐标点,我们为 x 值和 y 值分别选取随机数,我们编写了一个函数getRandomNumber来生成所需随机数。
2，宝藏的位置我们用一个对象target存储，该对象有两个属性，分别是x坐标和y坐标。
3，我们点击地图（也就是id为map的元素）时，需要记录单击的次数，计算每次距离宝藏有多远并显示出来。计算距离就是x轴距离平方+y轴距离平方的和，对和开方。getDistance 函数接受两个对象作为参数,即 event 和 target。event 对象是传递给单击事件处理程序的对象,并且它带有关于玩家单击的很多内建信息。target则是宝藏的位置。
根据点击事件，我们给出提示getDistanceHint函数。
<!DOCTYPE html>
<html>
<head>
<title>Learn</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h1 id="heading">Find the buried treasure!</h1>
<p id="distance">info:</p>
<script type="text/javascript">
var width = 600;
var height = 400;
var clicks = 0;
var getRandomNumber = function(size){
return Math.floor(Math.random() * size);
};
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 "less than 20";
} else if (distance < 40){
return "less than 40";
} else if (distance < 80){
return "less than 80";
} else if (distance < 160){
return "less than 160";
} else {
return "far away the goal";
}
};
var target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
$("#map").click(function(event){
clicks++;
var distance= getDistance(event,target);
var distanceHint=getDistanceHint(distance);
$("#distance").text(distanceHint);
if(distance < 15){
alert("you find the goal with"+clicks+"clicks!");
}
});
</script>
</body>
</html>
效果图如下：
image.png
注意，我们把else if写成else id整个<script>标签内的内容都得不到执行，而页面显示是script标签前面的内容所以得到显示。
