Skip to content

The Happy Mrs. Chicken game as seen on Peppa Pig re-created and written in React.

Notifications You must be signed in to change notification settings

tcaish/happy-mrs-chicken-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Happy Mrs. Chicken - A Game Built in React

Happy Mrs. Chicken

This is a game that made an appearance on the children's show, Peppa Pig. I've re-made it as a web app game using React. I watch Peppa Pig daily - 24/7 - due to it being my toddler's favorite show so far 😅 So I just had to remake it and show off my React skills!

Demo

https://happy-mrs-chicken-game.netlify.app

To see the real game as made by the original creators, view this Youtube video.

How To Play

First, click the play button. Then, click anywhere in the browser window to see the chicken lay an egg and move around the screen. The whole point of the game is to watch the chicken lay as many eggs as you have the time for while it keeps track of how many eggs were laid. With every additional 50 eggs laid, you will be congratulated!

Things I'd Like to Add/Update/Change

  • Update the egg to show it hatching before disappearing rather than it just disappearing
  • Figure out a way to remove the baby chickens from the DOM without causing a crash
  • Allow for user to click and have immediate response rather than there being a small wait between clicks

Frameworks and Libraries

Backend

Firebase Analytics - https://firebase.google.com
Netlify - https://netlify.app

Styling

SASS

Third-Party

Animate.css - https://animate.style/
Canvas Confetti - https://www.npmjs.com/package/canvas-confetti
Party Confetti Font - https://www.fontspace.com/party-confetti-font-f69513
Use Sound - https://www.npmjs.com/package/use-sound

UI

No fancy UI frameworks were used! It was all custom-written code by yours truly 💙

Disclaimer

I do not own the theme music or the idea behind this game. This was re-created for learning purposes only.