console
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<15){
return"无敌接近!!";
}
else if(distance<20){
return "有点接近了!";
}
else if(distance<40){
return"差不多";
}
else if(distance<80){
return"在周围";
}
else if(distance<160){
return"有点远";
}
else if(distance<320){
return"更远!";
}else{
return "太远辣!!!!";
}
};
var width =400;
var height=400;
var clicks=0;
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<10){
alert("恭喜!用"+clicks+"次点击找到了宝藏!");
}
});
<!DOCTYPE html>
<html>
<head>
<title>Find the buried treasure!</title>
</head>
<body>
<h1 id="heading">寻找宝藏的游戏</h1>
<img id="map" width=400 height=400
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553531640860&di=6ba925a987d4bf063f4ff47b282fc11f&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F48%2F46%2F593a7e2a71ecb_610.jpg">
<p id="distance"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
</script>
</body>
</html>