JS寻找宝藏游戏

最新推荐文章于 2022-12-07 19:16:44 发布

梧桐下的四叶草

最新推荐文章于 2022-12-07 19:16:44 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签：游戏

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/51615594

版权

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的寻宝小游戏实现方案。玩家通过点击地图来寻找虚拟宝藏，系统会根据点击位置与宝藏实际位置的距离给出冷热提示。文章详细展示了如何使用JavaScript进行坐标距离计算及提示信息反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在地图上随机点一个地方，然后图片下方会出现如下文字：

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!";
                }

具体实现如下：

<html>
    <head>
        <title>Find the buried treasure!</title>
    </head>
    <body>
    <h1 id="heading">Find the buried treasure!</h1>
    <img id="map" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">
    <p id="distance"></p>
    //调用jquery库
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        //获取随机数
           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 < 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!";
                }
           };
           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 < 8){
                alert("Found the treasure in "+clicks +"clicks!");
            }
           });
        </script>
    </body>
</html>