JavaScript for Kids 学习笔记10. 寻宝

源代码及图片：
jsforkidsch11.zip

主要逻辑：
显示一张地图，随机生成x，y两个数，做为宝藏在图上的坐标。玩家在图上点击，根据点击坐标与宝藏坐标的距离，给出相应的提示，以帮助玩家最终点到宝藏。

功能分解：
1. 显示地图；

2. 生成宝藏坐标；

3. 计算玩家点击坐标与宝藏坐标的距离；

4. 根据距离显示提示文字；

5. 把所有功能集成到地图的 click 事件中。

1. 显示地图

<img id="map" width=400 height=400 src="img/treasuremap.png">

2. 生成宝藏坐标

var getRandomNumber = function (size) {   // 给定最大值，生成随机数
return Math.floor(Math.random() * size);
};

var target = {    // 创建一个object，保存宝藏坐标
x: getRandomNumber(width),
y: getRandomNumber(height)
};

3. 计算玩家点击坐标与宝藏坐标的距离

var getDistance = function (event, target) { // 用勾股定理计算距离
var diffX = event.offsetX - target.x;
var diffY = event.offsetY - target.y;
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};

4. 根据距离显示提示文字

var getDistanceHint = function (distance) {  // 提示文字，越远越冷，越近越热
if (distance < 10) {
return "Boiling hot!";
}
else if (distance < 20) {
return "Really hot";
}
else if (distance < 40) {
return "Hot";
}
else if (distance < 80) {
return "Warm";
}
else if (distance < 160) {
return "Cold";
}
else if (distance < 320) {
return "Really cold";
}
else {
return "Freezing!";
}
};

5. click 事件

// Set up our variables
var width = 400;
var height = 400;
var clicks = 0;

// Add a click handler to the img element
$("#map").click(function (event) {
clicks++;
// 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!");
}
});