It’s the time of year for candy and eggs, it’s almost Easter! One of our favorite Easter traditions is the egg hunt. Whether you color the eggs, cook them, or go for the plastic variety, it’s so much fun searching for the hidden Easter eggs. Let’s use this real life game to practice coding a game in JavaScript and jQuery.

📌 [Download] JavaScript Projects Source Code Get the full source code for seven JavaScript project examples. Download Now

If you’re a beginner or kid who’s learning to code, this JavaScript tutorial will show you how to create your own Easter Egg Hunt game using JavaScript and jQuery. You can personalize and hide Easter eggs for your friends and family to find.

Complete this easy JavaScript tutorial to code your own Easter egg hunt.

Play Easter Egg Hunt

JavaScript Easter Egg Hunt Complete Game

What you need:

1. Text editor

In the project examples, we’ll be using the CodeWizardsHQ editor.

You can use a simple text editor like Notepad, TextEdit, Sublime Text, etc. You may also use an online text editor like to write and share your code.

2. Base HTML, CSS, and image files.

Download the base folder and open the easter.html file. This folder contains all the images and files you will need to complete your game. 

CodeWizardsHQ students, you can download the starter files called “x_easter_egg_hunt” in your editor and easily share your project URL with family and friends. That’s what I’m using for my project!

Recommended: HTML and CSS Coding Classes

Step 1: Setup a JavaScript Function

The starter files setup the basic HTML and connects your CSS and jQuery. The eggs have been hidden and your goal is to add the JavaScript and jQuery code to collect the eggs and win the game.

Open the easter.html file and find the <script> tag. Inside the <script> tag, set up a function called foundEgg().

function foundEgg(event) {


Easter JavaScript Tutorial Step 1

Step 2: Add the function call

We want to call our foundEgg() function for all elements with class .egg.

Use a “click” function to call the foundEgg() function. When an egg is clicked, the foundEgg() function will run.


Easter JavaScript Tutorial Step 2

Tip: Make sure your function call happens after your function definition and not inside.

Step 3: Fade the Egg on Click

Create a variable called “egg” that is equal to the current target for the event. The “click” is the mouse event and the current target is the egg.

Then apply the jQuery fadeOut() function to the targeted element. In the fadeOut() function, add a parameter for the duration, or how long it takes to fade out, in milliseconds. When the egg is clicked it will now fade from view over 250 milliseconds. 

var egg = $(event.currentTarget);


Easter JavaScript Tutorial Step 3

Tip: You can select the current mouse or keyboard event with the event variable. Using the event variable is the same as accessing window.event.

Step 4: Add a Score Variable

To keep track of how many eggs have been discovered, let’s add a score. 

There is already a score element in your HTML where we can display the score. In the JavaScript, we need a variable to represent our score as it changes. Define the variable “score” before your foundEgg() function.

var score = 0;

Easter JavaScript Tutorial Step 4

Step 5: Increase the Score By 1

Every time we click an egg, we want the score to increase by one. Increase the score variable by one inside of the foundEgg() function.

score = score + 1;

Easter JavaScript Tutorial Step 5

Tip: You can also increment by one using the ++ notation. In that case, you would write score = score++;

Step 6: Update Score with New Score

Now, we need to update the score on the screen. The variable has increased, but we need to display the new score. 

Select the div with id “score” and update the text with the score variable using the text() function.