We will learn how to create a CSS-based sprite sheet animation. We will also learn the concept of parallax scrolling and use JavaScript to handle keyboard inputs. You can visit the URL http://makzan.net/html5-games/space-runner/ to play the example game in order to have a better understanding of what we will build throughout this project.
A screenshot of the game is shown as follows:
After covering two game examples that used a mouse in the earlier projects, this is the first time we will handle keyboard inputs.
We will use a game loop in this project. The Game loop is an important technique in a game that drives the updates for both the logic and as well as the view rendering. We will further work on the animation by using a sprite sheet that animates frame by frame. Game loop and sprite sheet animation are two essential concepts of game development. We will even use these techniques in the later project that build games with canvas and game library.
In addition...