【問題】【4天】尋寶

2023年7月1日 136次阅读 来源: UCCs

問題：

  1. 建立一個Web頁面，它帶有一幅圖象，以及向玩家展現音訊的處所
  2. 在輿圖上拔取一個隨機的點來埋寶藏
  3. 建立一個單機事宜處置懲罰順序。每次玩家單機輿圖，這個單擊事宜處置懲罰順序都會做以下事變：
    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：遊戲完畢后沒法住手，還能繼承尋寶。

    原文作者：UCCs
    原文地址: https://segmentfault.com/a/1190000014669670
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞