SOURCE

console 命令行工具 X clear

                    
>
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>