Building A Game Using CSS Animation
All CSS timers and interval functions are handled by its Animation feature. To demonstrate this feature, take a look at this tutorial for building a Whack-a-Mole game using CSS Animation.
In the tutorial, the game revolves around two ideas.
- Animations are used to determine events according to a set pattern
- Player actions are determined by changing an element’s position
To build the game, there are two main animations. The first is the ‘hole’ animation which depicts a hole in the ground. While the second is a ‘mole’ animation that shows a mole creature. Transitioning from these two animations will determine the player’s set of actions.
Clicking on a mole animation will earn points while clicking on a hole animation will deduct points. For more information, check out the rest of the tutorial.
