"Ali Nerede?"yi hatırlıyor musun? In the United Kingdom, where this children's book series originated, Ali is known as Wally; in the United States, he is our beloved Waldo.

The goal is to find the elusive Ali in a crowd of people. Here's an example of a puzzle:

(Hint: He's near a striped green towel!)

Today, we're going to let people play Ali Nerede? on the web! When a user clicks on the image, you will let them know whether they successfully found Ali.

Getting Started

Open ali.js with Notepad++, which can be found inside the "jsday2" folder on your desktop. Open index.html in Google Chrome. It should show a picture of a game of Ali Nerede.

Milestone 1

Use the Pythagorean Theorem to write a method that returns the distance between two points. You will use this to determine whether the user found Ali by clicking near him.

In ali.js, you are given a method that takes in the x and y values for two points. In the Pythagorean Theorem equation, you will use the two x values as one side of the triangle and the two y values as another side of the triangle. Return the distance between the two points, which is also the hypotenuse of this triangle!

Milestone 2

Fill in the mouseClicked method, which takes in information about a mouse click and tells the user whether they successfully clicked on Ali. Use the getDistance method you just wrote to figure this out.

Milestone 3

Add a listener for the page's image element for the mouseClicked method.

Extra Features

Useful Functions

To get the square root of a value:

Math.sqrt(value);

To get the x and y coordinates from a JavaScript mouse event:

function mouseClicked(e) {
  var mouseX = e.pageX;
  var mouseY = e.pageY;
}

To add a mouse click listener in JavaScript:

var elem = document.getElementById(id);
elem.onclick = functionName;

To display a message to the user:

alert("Merhaba!");