При прочтении книги наткнулся на задачу, решение которой не работало, так и не смог разобраться с ошибкой
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
</head>
<body>
<h1 id="heading">Found the treasure!</h1>
<img id="map" width=400 height=400
src='http://nostarch.com/images/treasuremap.png'>
<p id="distance"></p>
<script>
let randomNum = function(size){
return(Math.floor(Math.random * size))
};
let getDistance = function(event, target){
let diffX = event.offsetX - target.x;
let diffY = event.offsetY - target.y;
console.log(event.offsetY);
console.log(Math.sqrt((diffX*diffX)+(diffY*diffY)));
return Math.sqrt((diffX*diffX)+(diffY*diffY))
};
let getDistanceHint = function(distance){
if(distance < 15){
return('FIRE!!!');
} else if(distance < 30){
return('Fire');
} else if(distance < 50){
return("Not such a cold")
} else if(distance < 160){
return('Cold');
} else if(distance < 270){
return("COLD!!!")
} else if(distance < 390){
return("COLD!!!")
} else{
return('You`re an ice cream, man')
};
};
let width = 400,
height = 400,
clicks = 0;
let target = {
x: randomNum(width),
y: randomNum(height),
};
$("#map").click(function(event){
clicks++;
let distance = getDistance(event, target);
let distanceHint = getDistanceHint(distance);
$('#distance').text(distanceHint);
if(distance <= 10){
alert('Win! Number of clicks:' + clicks);
};
});
</script>
</body>
</html>
Заранее благодарю за помощь
