Bomb man game development process (3) Show map

Objective

Above we have carried on the preliminary high level design, now we will realize the picture preload and the display map function demand. This article began with TDD development, you can see in the implementation of the process we will modify the design, modify the design and then modify the corresponding implementation code, this is a continuous iterative process. With the protection of the test suite, we can refactor it with confidence.

The purpose of this article

Master the technology of map drawing.

Review the domain model associated with the display map above

Development strategy

Use my control ypreloadimg to implement picture preload, combined with ProgressBar plug-ins, to display the load progress bar.

Just build a Showmap class, use this class to experiment, find a way to show the map, and then isolate the main class and the MapData data class when you refactor.

Reason

Because I am very unfamiliar with canvas, I need to focus on the use of canvas, rather than focus on architectural design.

Because I'm using TDD, I can refactor safely. You can extract the main and MapData classes after you implement the "Show Map" feature and then refactor it.

The development strategy is also iterative correction

The development strategy is just the approximate plan that is specified in the current knowledge and is refined and modified as the development progresses. The current development strategy does not take into account the addition of game classes when refactoring.

Pre-loading pictures

Pre-loading purpose

Downloads the picture to local memory.

Why preload

You must wait until the picture is fully loaded before you can use canvas to manipulate the picture. If you try to render the picture to canvas before it is fully loaded, canvas will not display any pictures.

If you do not use preload, you need to download the picture to local before using the picture. Even with browser optimization, the first time you use a picture, you need to download the picture, so the first time you use the picture, there will be a card feeling.

So before the game starts, start the game initialization and preload the pictures needed for the game.

How to Preload

Basic example:

var img = new Image ();     Callback (IMG);};

Pre-loading online tutorials

Pre-loading JS image

JS implementation picture preload

Pre-loading problems with browser heavy Pictures onload event

Show progress bar

The Ypreloadimg control combines the progress bar plug-in ProgressBar to display the progress bar.

Add Showmap class and implement pre-loading pictures

New Showmap class, using TDD to develop and implement preloaded pictures, you need to write test cases first.

Here is a brief introduction to the test-driven development steps:

Write a test case, verify the behavior

Run the test to see if the test case itself has an error (whether the test fails in the way that you expect).

Write implementation code that allows the test to pass

Refactoring code

Run the test to make the test pass