"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

• Can you let the user know when they are close to Ali, but haven't found him yet?
• How would you randomly choose the Ali game to display? There are more games in the images folder!
• Your JavaScript code assumes that the Waldo game will be placed at the top left corner of the window. How would you change the code to check where on the screen the image is?

# 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!");