JavaScript Tutorial: Easter Egg Hunt

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

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 Repl.it 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) {

}

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.

$('.egg').click(foundEgg);

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);

egg.fadeOut(250);

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;

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;

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.

$(“#score”).text(score);

Recommended: JavaScript Coding for Kids

Step 7: Add a Condition For Eggs Found

Using an if statement, we can set an alert when all of the eggs have been found. Since we have four eggs, we will use the condition if score >=4.

   if(score >= 4){

   }

Step 8: Alert When All Eggs Are Found

Inside of the if statement, we will execute an alert that says “You found all of the eggs!”. When the player finds four or more eggs, they will see this alert.

alert('You found all of the eggs!');

Tip: Make sure your alert is inside of the if statement {}.

Step 9: Your game is complete!

Nice work! You’ve completed this simple JavaScript tutorial. Open the i_easter.html file to see the completed game code. 

Next, get creative and design your own theme or add additional hidden eggs with the bonus images. 

https://margaret.codewizardshq.com/x_easter_egg_hunt/i_easter.html

Recommended: Kids Coding Websites

Download JavaScript Projects Source Code

If you want to get the code behind 7 different JavaScript projects, download the full source code for free. You can use this code as an example to add to or inspire new projects. Enter your email below:

Learn JavaScript with Live Coding Classes 

If you want to build more games in JavaScript, check out our coding programs for kids ages 8-18. We teach coding classes in JavaScript where students can learn to build interactive applications and websites. You will go from a JavaScript beginner to learning advanced JavaScript code with the most fun and effective coding classes for kids. 

Ready to level up your child’s learning experience? Take a coding class with CodeWizardsHQ:

• Elementary School Coding Program
• Middle School Coding Program
• High School Coding Program

Happy Easter!