|
1 | | -# Mrs. Happy Chicken - Peppa Pig - A Game Built in React |
| 1 | +# Happy Mrs. Chicken - A Game Built in React |
2 | 2 |
|
3 | | -<!--  --> |
| 3 | +<img src='./src/assets/images/chicken-mouth-closed.png' alt='Happy Mrs. Chicken' width='150px' height='auto' /> |
4 | 4 |
|
5 | | -This is a game that made an appearance on a children's show, Peppa Pig. I've |
6 | | -re-made it as a web app game using React. |
| 5 | +This is a game that made an appearance on the children's show, Peppa Pig. I've |
| 6 | +re-made it as a web app game using React. I watch Peppa Pig daily - 24/7 - due |
| 7 | +to it being my toddler's favorite show so far 😅 So I just had to remake it and |
| 8 | +show off my React skills! |
7 | 9 |
|
8 | 10 | ## Demo |
9 | 11 |
|
10 | | -<!-- [https://caish-chat.netlify.app](https://caish-chat.netlify.app) --> |
| 12 | +[https://happy-mrs-chicken.netlify.app](https://happy-mrs-chicken.netlify.app) |
11 | 13 |
|
12 | | -### How To Play |
| 14 | +## How To Play |
13 | 15 |
|
14 | | -Click on the chicken to see it lay an egg and move around the screen. The |
15 | | -whole point of the game is to witness the chicken lay as many eggs as you |
16 | | -have the time for while it keeps track of how many eggs were laid. |
| 16 | +First, click the play button. Then, click anywhere in the browser window to see the chicken lay an egg |
| 17 | +and move around the screen. The whole point of the game is to watch the chicken lay as many eggs as you |
| 18 | +have the time for while it keeps track of how many eggs were laid. With every additional 50 eggs laid, |
| 19 | +you will be congratulated! |
17 | 20 |
|
18 | | -### Things I'd Like to Add/Update/Change |
19 | | - |
20 | | -N/a |
| 21 | +## Things I'd Like to Add/Update/Change |
| 22 | +- Update the egg to show it hatching before disappearing rather than it just disappearing |
| 23 | +- Figure out a way to remove the baby chickens from the DOM without causing a crash |
21 | 24 |
|
22 | 25 | ## Frameworks and Libraries |
23 | 26 |
|
|
34 | 37 | Animate.css - https://animate.style/<br/> |
35 | 38 | Canvas Confetti - https://www.npmjs.com/package/canvas-confetti<br/> |
36 | 39 | Party Confetti Font - https://www.fontspace.com/party-confetti-font-f69513<br/> |
| 40 | +Use Sound - https://www.npmjs.com/package/use-sound |
37 | 41 |
|
38 | 42 | ### UI |
39 | 43 |
|
40 | | -No fancy UI frameworks were used! All custom-written SASS made by yours truly. |
| 44 | +No fancy UI frameworks were used! It was all custom-written code by yours truly 💙 |
0 commit comments