I was assigned a project to recreate the classic Nyan Cat website. This was my first exercise in learning JavaScript.
The objective was to learn how to use different functions in JavaScript to achieve the desired outcome. The requirements were:
- Create a button.
- When you click the button, it should start raining Nyan Cats.
- Make the rain stop after 10 seconds.
- While it's raining Nyan Cats, the background should become the one from the original animation and all the other elements should disappear until it's done raining cats.
- Play the Nyan Cat theme song until it's done raining cats.
Bonus:
- Multiply the amount of nyan cats by a random amount.
- Randomize the speed of the falling nyan cats.
- Randomize the angle of the nyan cats.
- Randomize the starting position of the nyan cats.
The look of the page is just as the original Nyan Cat looks. The current website is changed after so many years, so I provided a link to a youtube with the original animation. On my version, upon first load there is a lone button in the middle of the screen telling the user to Nyan!. I styled the button in light colors that look fun because it's inline with the theme. When the button is clicked, the Nyan Cat theme song begins playing for 15 seconds and a couple things happen:
- Nyan Cat begins falling at randomized angles and speeds for 15 seconds.
- The Nyan Cat theme song begins playing, and stops playing after 15 seconds.
- The Nyan Cat original background appears and disappears after 15 seconds upon clicking the Nyan! button in the middle.
- The Nyan! button in the middle diappears.