In this exerise I learn to move DOM elements on the page, react to keypresses and deal with collision detection.
Have a square that you can move using the arrow keys. Have another square representing food. When the player touches the food it goes to a different location.
- Square that can be controlled
- Food that can be picked up
By pushing the arrow keys the player can move a square around. The goal of the game is to collect as many food-squares as possible before the timer runs out. Collecting a food-square resets the timer. However every 5 levels the game changes color of one or more elements, hereby making the game gradually harder to beat.
Play the game at:
https://seppeverhavert.github.io/Moving-block/
Photo by Carl Raw on Unsplash.