【题目】【4天】寻宝-CSDN博客

题目：

创建一个Web页面，它带有一幅图像，以及向玩家展示消息的地方
在地图上选取一个随机的点来埋宝藏
创建一个单机事件处理程序。每次玩家单机地图，这个单击事件处理程序都会做如下事情：
a.将单击计数加1，并显示剩余次数
b.计算单击位置距离宝藏位置有多远
c.在Web页面上显示一条消息，告诉玩家离宝藏的距离
d.如果玩家在宝藏上单击的点距离宝藏很近，恭喜玩家并显示他们用了多少次单击找到宝藏

<body>

    <img id="map" src="image/Img388582882.jpg" alt="藏宝图">

    <p>本游戏一共10次机会</p>
    <p id="clicks"></p>
    <p id="distance"></p>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script>
        var height = 301;
        var width = 550;
        var clicks = 0;
       
        //随机函数
        function getrandomNumber(size) {
            return Math.floor(Math.random()*size);
        }
        
        //生成宝藏点
        var target = {
          x : getrandomNumber(width),
          y : getrandomNumber(height)
        };
        
        //console.log(target);
        
        //计算单击点和目标点之间的距离
        function getdistance(event, target) {
            var diffX = event.offsetX - target.x;
            var diffY = event.offsetY - target.y;
            //console.log(Math.sqrt(diffX * diffX + diffY * diffY));
            return Math.sqrt(diffX * diffX + diffY * diffY);
        }
        
        //向玩家展示距离目标还有多远
        function getDistanceHint(distance) {
            if(distance < 8) return alert("恭喜找到宝藏" + clicks);
            if(distance < 10) 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"差的十万八千里";
        
        }
        
        //寻宝事件
        $("#map").click(function (event) {
            var limit = 1 + clicks++;
            if(clicks >= 0){
                var distance = getdistance(event,target);
                var distanceHint = getDistanceHint(distance);
                $("#distance").text(distanceHint);
                $("#clicks").text("次数： " + limit);
            }
        
            if(clicks > 10){alert("game over");}
        });
    </script>

</body>

bug：游戏结束后无法停止，还能继续寻宝。