JS寻找宝藏游戏

来源：互联网发布：淘宝卖避孕套怎么备案编辑：程序博客网时间：2024/06/12 00:56

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

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>

1 0