单击游戏时不显示我的字符串

Question

<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>
        <p id="clicks"></p>
        <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

        <script>
            // GEt a random number from 0 to size
            var getRandomNumber = function(size) {
                return Math.floor(Math.random() * size);
            };


        // Calculate distance between click event and target

        var getDistance = function(event, target) {
            var diffX = event.offsetX - target.x; //stores the horizontal distance btw the 
                clicked location & the target, which we calculate by subtracting target.x 
                (the x-coordinate of the treasure)from event.offsetX(the x-coordinate of 
                click)
            var diffY = event.offsetY - target.y;
            return Math.sqrt((diffX * diffX) + (diffY * diffY));
        };

下面是代码的一部分，当您靠近宝藏时，这些字符串应该会发生变化。 //这段代码告诉玩家他们离宝藏有多近 //获取表示距离的字符串

        var getDistanceHint = function(distance){
            if(distance < 10) {
                return "You go gurl!!!";
            }else if (distance < 20) {
                return "You're almost there";
            }else if (distance < 40) {
                return "Hot";
            }else if (distance < 80) {
                return "Warm but no Cigar";
            }else if (distance < 160) {
                return "Hmmmm Try harder";
            }else if (distance < 320) {
                return "Really, you can do so much Better";
            }else {
                return "Freezing, Try it Again!"
            }
        };

        // Setting the treasure coordinates

        var width = 800;
        var height = 800;
        var clicks = 0;
        var limit = 30;
       

        //Create a random target location

        var target = {
            x: getRandomNumber(width),
            y: getRandomNumber(height)
        };

         
        //The Click Handler
        //Add a click handler to the img element

        $("#map").click(function(event) {
            //increments clicks by 1 each time the player clicks the map

            clicks++;

            // limit the amount of clicks to >=30 clicks (#3 programming challenge)

            if (clicks >= limit){
                alert("Game Over!!")
            }
            var clicksCount = "Clicks left " + (30 - clicks);
            $("#clicks").text(clicksCount);

      
            //Get distance between click event and target

            var distance = getDistance(event, target);

            //Convert distance to a hint

            var distanceHint = getDistanceHint(distance);

            //Update the #distance element with the new hint

            $('#distance').text(distanceHint);

            //If the click was close enough, tell them they won

             if (distance < 8){
                 alert("Found the treasure in " + clicks +  " clicks!");
             }

             
        });
        
        
    </script>
</body>

我的代码工作正常，除了当你点击地图时它应该显示你何时接近宝藏我返回一个字符串，即当你 < 20 像素远时“你快到了”。

Answer 1

如您所说，代码似乎有效 - 我已将其复制到下面的代码段中，您可以在此处运行。我添加了一些控制台日志记录以查看发生了什么。我所做的唯一更改是将宽度和高度变量都设置为 800，而实际上图像是 400 x 400。也许这是您的问题。否则它似乎有效。

您可能需要考虑将图片分成正方形网格，比如 20x20 像素。然后也许用半透明 div.

标记玩家已经点击的位置

// GEt a random number from 0 to size
var getRandomNumber = function(size) {
  return Math.floor(Math.random() * size);
};


// Calculate distance between click event and target

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 "You go gurl!!!";
  } else if (distance < 20) {
    return "You're almost there";
  } else if (distance < 40) {
    return "Hot";
  } else if (distance < 80) {
    return "Warm but no Cigar";
  } else if (distance < 160) {
    return "Hmmmm Try harder";
  } else if (distance < 320) {
    return "Really, you can do so much Better";
  } else {
    return "Freezing, Try it Again!"
  }
};

// Setting the treasure coordinates

var width = 400; //800;
var height = 400; //800;
var clicks = 0;
var limit = 30;


//Create a random target location

var target = {
  x: getRandomNumber(width),
  y: getRandomNumber(height)
};

console.log(target)

//The Click Handler
//Add a click handler to the img element

$("#map").click(function(event) {
  //increments clicks by 1 each time the player clicks the map

  clicks++;

  // limit the amount of clicks to >=30 clicks (#3 programming challenge)

  if (clicks >= limit) {
    alert("Game Over!!")
  }
  var clicksCount = "Clicks left " + (30 - clicks);
  $("#clicks").text(clicksCount);


  //Get distance between click event and target

  var distance = getDistance(event, target);
console.log(distance)
  //Convert distance to a hint

  var distanceHint = getDistanceHint(distance);

console.log(distanceHint)
  //Update the #distance element with the new hint

  $('#distance').text(distanceHint);

  //If the click was close enough, tell them they won

  if (distance < 8) {
    alert("Found the treasure in " + clicks + " clicks!");
  }


});

<h1 id="heading">Find the buried treasure!</h1>
<p id="distance"></p>
<p id="clicks"></p>
<img id="map" width="400" height="400" src="http://nostarch.com/images/treasuremap.png">


<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

单击游戏时不显示我的字符串

My Strings are not showing when game is clicked

javascript

jquery

click

handler