Let’s Learn Coding Skills Through Analyzing Others’ Projects – A Platform Project Part I

Recently, I posted an example introducing how my son designed his first big project (the post is here). Since many people asked me questions about how to design this project, I posted here the code analysis for your reference.

Overview

This is a typical platform game. the main sprites are Xiaoming the boy and Meiwen the girl. They need to avoid the bullets from bullet shooter, pick up the extinguisher, ride on the elevator to the 2nd floor and put out the fire before they could enter into the exit to finish the game successfully.

Introduction Page

Although my son did not design the rolling backdrop for the game, he did design a rolling night sky for the introduction page. It will show up at the beginning of the game. He used one image to cover the whole stage and then created clone for this image. He made the two images move at the same speed to form a continuous rolling backdrop.

When the player clicked “Begin Game”, the night sky image will recede and finally hide itself.


“Begin Game” Sprite

“Begin Game” sprite will show up against the rolling night sky. This sprite has three costumes. The first is a paragraph of text introducing how to play the game. The second costume is a “Begin Game” button shape. When the player clicks the button, the sprite will switch to the third costume, which is the same as the 2nd costume except a darker tone representing the pressing-down status of the button.


Game Backdrop

Game backdrop is static here. Since it is my son’s first independent project, he simplified the design of backdrop. The backdrop is fixed, without rolling horizontally or vertically. If the backdrop can move according to sprite’s moving direction, the game needs to use another method to control the rolling backdrop, which is more complicated. If you are interested, you could refer to an excellent example of implementing this method in a game “super mario”. I have a post (link is here) to introduce its design.

Although it is a static image, it is actually formed by combining several images from the libraries, reshape and reposition them to form a new image. The following image shows how he uses the existing images to customize into a new backdrop.


Counting Down Numbers’ Code

Counting down numbers enhances the visual effect of the game. The game will count from 10 down to 0. Each number will become gradually apparent and finally disappear. After finishing counting down, it will broadcast “Dropping Ball” message.


Dropping Ball’s Code

There is a giant ball dropping down from the ceiling after counting down to zero. when it moves left and right horizontally, the designer also makes the ball turn degrees while moving. In this way, it will create a more vivid effect that the ball is rolling.


Elevator’s Code

The elevator is an interesting sprite. The designer created a variable called “elevator status” to show the upward/downward status of elevator. The variable is a global one, so each sprite can see and use it. Later on, when I analyze the code of the main characters Xiaoming and Meiwen, you will notice that they also need to use the variable “elevator status”.

In another code segment, the code will always monitor if the giant ball touches Xiaoming or Meiwen. If it does, restart the game.


Fire’s Code

Fire sprite is another obstacle in this game. There are three costumes. The first two costumes are flame shapes, animating the dancing of flame. When extinguisher foam touches the flame, the file sprite changes into extinguished costume and then disappears. After that, all of code segments for the fire sprite will stop running.


Sprite Profile’s Code

The two profiles represent which person is in active mode. Each time the game player operates only the active sprite. When the sprite is in active mode, it will show up as normal sprite. The inactive sprite will become transpaque.


Bullet Shooter’s Code

Bullet shooter will shoot out bullets at a random interval. It creates clone of bullet, and then let bullet go to a start-off position where the mouth of bullet shooter is located.


Bullet’s Code

Bullet will shoot out where the mouth of bullet shooter is located and then shoot out straight. In this game, bullet is shot toward the ground. If it touches either of the people, game restarts. If it touches the ground which is identified by the green color, it will disappear and the player will earn one score.


Wrap-up for Part I

What did we analyze in this post?

Till now, I have analyzed the code for several sprites, but… the most important actors Xiaoming and Meiwen have yet been introduced. Let’s have a break and read their code in the post of Part II.

Enjoy the coding!

Note: All the analysis articles are copyright products of http://www.thecodingfun.com. Anyone re-posting them should credit author and original source. Anyone using them for commercial purposes or translating them into other languages should notify TheCodingFun and get confirmation first. All Rights Reserved.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.