Помогите найти ошибку в игре “Найди Клад” js

23 марта 2021, 05:10

//получаем рандомное число  
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 "Обожжешься!"; 
	} else if (distance < 20) { 
		return "Очень горячо!"; 
	} else if (distance < 40) { 
		return "Горячо"; 
	} else if (distance < 80) { 
		return "Тепло"; 
	} else if (disntace < 160) { 
		return "Холодно"; 
	} else if (disntace < 320) { 
		return "Очень холодно!"; 
	} else { 
		return "Замерзнешь!"; 
	} 
}; 
//переменные 
var clicks = 0; 
var width = 400; 
var height = 400; 
//рандомное расположение клада 
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("Клад найден! Сделанно кликов: " + clicks); 
} 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<img id="map" width=400 height=400 src="https://nostarch.com/images/treasuremap.png"> 
 
<p id="distance"></p>

Суть игры в том, что бы найти сокровище, которое при каждом запуске появляется в рандомном месте на картике #map. Искать нужно с помощью всплывающих подсказок(внутри тега "p") по типу "горячо" "холодно". Проблема в том, что когда я нажимаю на карту, текста с подсказками не выводиться и ничего не происходит. Вот пример работающей версии(я пытаюсь сделать такую же игру сам) но не понимаю, что отличается в моей версии от работающей.

// 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)); 
    }; 
 
    // Get a string representing the distance 
    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!"; 
      } 
    }; 
 
    // Set up our variables 
    var width = 400; 
    var height = 400; 
    var clicks = 0; 
 
    // Create a random target location 
    var target = { 
      x: getRandomNumber(width), 
      y: getRandomNumber(height) 
    }; 
 
    // Add a click handler to the img element 
    $("#map").click(function (event) { 
      clicks++; 
 
      // 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<img id="map" width=400 height=400 src="http://nostarch.com/images/treasuremap.png"> 
 <p id="distance"></p>

Answer 1

Тут 3 ошибки, ничего не работает потому что Вы навешиваете клик на элемент по идентификатору но # забыли, еще 2 опечатки в названии переменной distance внутри проверки дистанции.

//получаем рандомное число  
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 "Обожжешься!"; 
  } 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 "Замерзнешь!"; 
  } 
}; 
//переменные 
var clicks = 0; 
var width = 400; 
var height = 400; 
//рандомное расположение клада 
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("Клад найден! Сделанно кликов: " + clicks); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<img id="map" width=400 height=400 draggable="false" src="https://nostarch.com/images/treasuremap.png"> 
<p id="distance"></p>

UPD: предлагаю определять дистанцию не через if + добавил Вам "heatmap" для отладки =)

var names = ["Обожжешься","Очень горячо","Горячо","Тепло","Холодно","Очень холодно","Замерзнешь"] 
var heat = ["red", "#f66", "yellow", "green", "#90f", "cyan", "blue"]; 
var clicks = 0; 
var width = 400; 
var height = 400; 
 
var target = { 
  x: Math.random() * width, 
  y: Math.random() * height 
}; 
 
$("#map").click(function(event) { 
  clicks++; 
  var distance = getDistance(event.offsetX, event.offsetY, target); 
  $("#distance").text(names[getIndexByDistance(distance)]); 
  if (distance < 8)  
    alert("Клад найден! Сделанно кликов: " + clicks); 
}); 
 
var ctx = heatmap.getContext('2d'); 
for (var y = 0; y < height; y++) 
  for (var x = 0; x < width; x++) 
    drawHeatMap(x,y) 
 
function drawHeatMap(x,y){ 
  var distance = getDistance(x, y); 
  ctx.fillStyle = heat[getIndexByDistance(distance)] 
  ctx.fillRect(x,y,1,1) 
} 
 
function getDistance(x, y) { 
  var dX = x - target.x; 
  var dY = y - target.y; 
  return Math.sqrt(dX * dX + dY * dY); 
} 
 
function getIndexByDistance(distance){ 
  return Math.floor(Math.log2(distance/10)) 
}

img, canvas { 
  position:absolute; 
  top:20px; 
  left:0; 
} 
body { 
  margin:0 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<span id="distance"></span> 
<img id="map" width=400 height=400 draggable="false" src="https://nostarch.com/images/treasuremap.png"> 
<canvas id="heatmap" width=400 height=400 style="pointer-events:none;opacity:0.3"></canvas>