This chapter is from the book
This chapter is from the book
This chapter is from the book
1.3 Special Features
Snail Bait has three noteworthy features that add polish to the game and make playtesting more productive:
- Developer backdoor
- Time system
- Particle systems
Snail Bait reveals the developer backdoor, shown in Figure 1.11, when you press CTRL-d. With the backdoor visible, you can control the rate at which time flows through the game, making it easy to run the game in slow motion to see how game events such as collision detection take place. Conversely, you can run the game faster than normal to determine the best pace for the game.
)
Figure 1.11 Snail Bait’s developer backdoor
You can turn collision rectangles on for a better look at exactly how collisions occur; if the smoking holes obscure your view, you can turn the smoke off by deselecting the Smoke checkbox. You can also fine-tune the threshold at which Snail Bait displays the game’s running slowly warning, shown in Figure 1.8, or you can turn it off entirely, which lets you playtest slow frame rates without Snail Bait intervening at all.
){kind=link}
When you playtest a particular section of the game, you can avoid playing through the preceding sections every time you test: In addition to the controls at the top of the game’s canvas, the developer backdoor displays a ruler at the bottom of the canvas that shows how far the background has scrolled horizontally in pixels.
You use those values to restart the game at a particular horizontal location, thereby avoiding the preceding sections of the game. For convenience, when the developer backdoor is visible you can also simply drag the game, including the background and all the sprites, horizontally to reposition the runner.
The developer backdoor lets you control the rate at which time flows through the game by virtue of Snail Bait’s time system. Everything that happens in Snail Bait depends on the current game time, which is the elapsed time since the game started; for example, when the runner begins a jump, the game records the current game time, and thereafter moves the runner through the jump sequence frame by frame, depending on how much time has elapsed since the runner began the jump.
By representing the current game time as the real time, which is Snail Bait’s default mode, the game runs at its intended rate. However, Snail Bait’s time system can misrepresent the current game time as something other than the real time; for example, the time system can consistently report that the current game time is half of the actual time, causing the game to run at half speed.
Besides letting you control the rate at which time flows through the game, Snail Bait’s time system is also the source of special effects. When the runner collides with a bad guy and explodes, Snail Bait slows time to a crawl while transitioning to the next life. Once the transition is complete, Snail Bait returns time to normal, indicating that it’s time to resume play.
Finally, Snail Bait uses two particle systems to create the illusion of smoke and fire in the background. In Chapter 16, we take a close look at those particle systems so you can create similar effects of your own.
Now that you have a high-level understanding of the game, let’s take a look at some code.
NOTE
Snail Bait’s code statistics (lines of code)
JavaScript: 5,230
CSS: 690
HTML: 350
NOTE
A closer look at Snail Bait’s code
snailbait.js: 3,740
Supporting JavaScript code: 1,500
Initializing data for sprites: 500
Creating sprites: 400
Sprite behavior implementations: 730
Event handling: 300
User interface: 225
Sound: 130