HTML 5 2D Game development: Snail Bait Introduction

The advantage of software development is that, within a reasonable range, anything you can imagine becomes a reality on the screen. Unlike other areas that are constrained by physical conditions, software developers have long used graphical APIs and UI toolkits to implement creative and compelling applications. The most creative software development is probably game programming; rather than making the game scene a reality, good ideas can make you gain more by making a little effort.
Platform video games (Platform videos games)

Donkey Kong, Mario Bros, Sonic the Hedgehog and Braid are well-known best-selling games, they are platform games. Platform games once accounted for One-third of video game sales. Today, their market share has fallen sharply, but there are still many successful platform games.

However, what is useful does not mean easy; in fact, the opposite is true. The realization of the game (especially video games) requires a special understanding of programming, can grasp the drawing and animation well, but also need to master a large number of mathematical knowledge, art and creativity in the combination of use. And this is just a beginning, successful game developers need to spend a lot of time carving out their games, improving gameplay and graphics, and in addition to many aspects unrelated to gameplay, such as scoreboard, instruction, animation between life and level, and the endgame sequence (endgame sequences).

This series is designed to show you how to implement a HTML5 video game so you can start creating your own game.

Game: Snail Bait

In this series, I will first show you how to implement a platform video game using the HTML5 Canvas API. The game is Snail bait, as shown in Figure 1. You can play the game online; see resources for a link to the game. Make sure that you have a Canvas hardware accelerator in your browser (which has recently been implemented on most browsers, including Chrome V18), otherwise Snail bait performance will be significantly reduced (see HTML5 Canvas Performance Sidebar for more information.) ）

Figure 1. Snail Bait running on the Chorme

Snail Bait is a classic platform game, the protagonist of the game, I usually refer to it as a running villain, in the horizontal moving floating platform running jumps. The ultimate goal of a runner is to reach a regularly bouncing platform and get a gold button at the end of that level. Figure 1 shows a running villain, a regularly-beating platform and a gold button.

The player uses the keyboard to control the running villain: D moves to the left, K moves to the right, J or F jumps, p pauses the game.

At the beginning of the game, you have 3 lives. The top left of the game canvas shows the running villain icon representing the remaining number of lives, as you can see in Figure 1. As the runner reaches the end of the level, she must avoid some bad guys (bees, bats and snails) while trying to catch valuables such as coins, rubies and sapphires. If a runner encounters a bad guy, it bleeds and loses a life, and you have to go back to the starting point for that level. When a runner encounters a "good person", your points will increase and you will hear a pleasant sound.
WASD?

By convention, computer games usually use the W, a, S, and D keys to control the game. The practice was formed primarily to allow right-handed players to use both the mouse and the keyboard. You can also have the right hand freely press the SPACEBAR and modifier keys (such as CTRL or ALT). Snail Bait does not use WASD because it cannot receive input from the mouse or modifier keys. But you can use any combination of keys by modifying the game code, which is easy.

The bad guys usually just wander around and wait for the runner to hit it. But snails regularly launch snail bombs (the silver balls shown in the center of Fig. 1), and bombs, like other bad guys, blow up when they run into runners.

There are two ways to end a game: You lose 3 lives, or you reach a regularly-beating platform (there will be bonus points when you hit the gold button). Either way, the game end points are shown in Figure 2:

Figure 2. Game points

What you can't see in Figure 1 is that everything is rolling all the time, except for the running villain, her movement is controlled by you. Because there is scrolling, the Snail bait is categorized as a Side-scroller platform game. Although this is not the only action in the game, it leads me to discover the sprite and its behavior.