How to Make an Easter Egg Hunt Game in JavaScript

How to Make an Easter Egg Hunt Game in JavaScript

With the help of Party.js
Ferenc Almasi β€’ 2023 March 29 β€’ Read time 7 min read
Learn how you can create an Easter egg hunt game in JavaScript with the help of CSS animations and party.js.

Easter is around the corner, and eggs will soon be everywhere. In this tutorial, we will take a look at how you can create an Easter egg hunt mini-game in your app. We will use JavaScript to generate the eggs, CSS to add some animations, and party.js to break eggs with a boom.

At the end of this project, you will have the following mini-game ready that you can integrate into your site and reward visitors for finding all Easter eggs.

Animated Easter egg
The output of this tutorial

Creating Easter Eggs With JavaScript

The eggs can be created in two ways: either using an HTML img tag (adding eggs statically) or using the DOM API (adding eggs dynamically with JavaScript).

We are going to take a look at how to do the latter, as it has the benefit of adding eggs to the page at any time: either when the content is loaded, on scroll, or when a user action takes place. To create the image in JavaScript, we need the following code snippet:

Copied to clipboard! Playground
const createEasterEgg = () => {
    const easterEgg = document.createElement('img')
    const easterEggContainer = document.querySelector('main')

    easterEgg.src = '/img/egg.png'
    easterEgg.classList.add('easter-egg', 'animate-in')

    easterEggContainer.append(easterEgg)

    setTimeout(() => easterEgg.classList.remove('animate-in'), 300)
}
egg.js
Dynamically adding images through JavaScript

This function creates a new img tag using document.createElement, which is then appended to another element inside the DOM using append on line:8. In this example, it is attached to a main element, but this might be a different element for your use case. To reference the image for the element, we can assign the path to the image using easterEgg.src.

animating in easter eggs
The .animate-in class in slow motion

We also need to add two classes to style the element through CSS. We can do this using classList.add, which accepts a list of classes to be attached to the element. Note that the .animate-in class is removed from the element 300ms after it is attached to the DOM. This is so that we can give priority to the hover animation later on.

The setTimeout uses the length of the animation to remove the class as soon as the animation finishes.


Animating Easter Eggs With CSS

All of the animations are handled through CSS. There are two animations at play; one is played when the image is loaded, and the other one can be triggered upon hover. The animation for the .animate-in class is pretty simple; we need to scale the egg from 0 to 1. This can be achieved using the following CSS:

Copied to clipboard! Playground
.easter-egg {
  cursor: pointer;
}

.animate-in {
    animation: popup .3s forwards;
    transform-origin: bottom;
}

@keyframes popup {
  0% { transform: scale(0);  }
  100% { transform: scale(1); }
}
egg.css
Animating the egg using transforms

Adding cursor: pointer will ensure that the mouse turns into a pointer to indicate that the element is interactive. There are two things we need to point out for the animation:

  • Set the animation to forwards to ensure that the transform remains after the animation finishes.
  • Set transform-origin to bottom to animate the egg from the bottom instead of the center.
transform-origin differences
The difference between transform-origin set to bottom vs center

Hatching eggs

There is also another animation playing out when the egg is being hovered over. Adding an animation with a small back-and-forth rotation will create the effect that the egg is hatching. Extend the .easter-egg class with the following CSS:

Copied to clipboard! Playground
.easter-egg:hover {
    animation: shake 1.2s forwards;
}

@keyframes shake {
  35% { transform: rotate(8deg); }
  40% { transform: rotate(-8deg); }
  45% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg); }
}
egg.css
Adding the hatching animation

This will play the animation for 1200 milliseconds. By starting the animation at 35%, we can delay it. Changing the rotation back and forth every 5% ensures that the rotation is played in quick succession. There's only one thing left for us to do.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Breaking Easter Eggs

To break the eggs on click, we need to go back to our JavaScript file and add a click event listener to our Easter egg. We are going to use party.js to create the confetti effect. To install party.js into your project, either include it in your HTML file or add it as a dependency if you have an NPM project:

Copied to clipboard! Playground
<!-- Using HTML -->
<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>

<!-- Using NPM -->
npm install party-js --save

Once installed, we can call party.confetti from JavaScript on a DOM element to create the confetti effect. Extend the createEasterEgg function with the highlighted lines to add the event listener:

Copied to clipboard! Playground
// Import PartyJS if you are using it as an NPM package
import party from 'party-js'

const createEasterEgg = () => {
    const easterEgg = document.createElement('img')
    const easterEggContainer = document.querySelector('main')

    easterEgg.src = '/img/egg.png'
    easterEgg.classList.add('easter-egg', 'animate-in')

    easterEgg.addEventListener('click', event => {
        event.currentTarget.classList.add('break')

        party.confetti(event.currentTarget, {
            spread: 25,
            size: 0.7,
            count: 40
        })
    })

    easterEggContainer.append(easterEgg)

    setTimeout(() => easterEgg.classList.remove('animate-in'), 300)
}
egg.js
Breaking the eggs on click

This will add a click event listener to the image. Inside the callback of the click event listener, we need to add a new class to the image that will remove it from the DOM through CSS. The .break class applies the following CSS:

Copied to clipboard!
.break {
    transform: scale(0) !important;
}
egg.css

The reason we are using scale(0) instead of display: none;, or simply removing the element from the DOM is that we need the element to be in the layout in order to play the confetti animation. Lastly, we can call party.confetti with the img (referenced through event.currentTarget) and a configuration object to tweak the particle effect to our own taste:

  • spread: Specifies how far the particles should fly from the mouse.
  • size: Specifies the size of the confetti.
  • count: The number of confetti to generate.
Confetti effect using party.js
The finished effect with confetti

Summary

To make things more fun, you can keep the number of Easter eggs in a variable, as well as the number of eggs found. Once an egg has been clicked, you can increase the counter and reward the player as soon as they find all Easter eggs.

Copied to clipboard! Playground
let easterEggs = 0
let easterEggsFound = 0

const createEasterEgg = () => {
    const easterEgg = document.createElement('img')

    easterEggs++;

    ...

    easterEgg.addEventListener('click', event => {
        ...

        easterEggsFound++

        if (easterEggsFound === easterEggs) {
            // Reward the player here
            console.log('You have found all easter eggs! 🐣')
        }
    })

    ...
},

If you would like to tweak the confetti effect, you can play around with the configuration on the official site of party.js. The tool also supports the use of different templates, and you can even create your own shapes.

If you are interested in more game-related use cases of JavaScript, check out our JavaScript game ideas below where you can also find tutorials for each idea. Thank you for reading this tutorial, happy coding! πŸ‘¨β€πŸ’»

12 JavaScript Game Ideas with Source Code
  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.