Create a Flash game like Rebuild Chile

Read all posts about "" game

You have three reasons to play Rebuild Chile:

1) It’s a good puzzle game

2) You will help the children from Chile affected by the earthquake/tsunami because all income will be donated to rebuild Chile

3) You are going to know how to create a game like it

The game is a Sokoban-like game, with fixed and movable items. So, you must be able to create a working prototype in a day. With your bulldozer, you can only push movable items, and only if they aren’t blocked by other movable items, and must push them out of the stage.

In this first part, we’ll cover map creation and basic player movement.

I am going to replicate level three. Here it is:

Since it’s a tile based game, it’s easy to build a level once you determine every tile’s content.

Each tile is represented by an unique coordinate.

In my case, 0 means the tile is empty, 1 means there is an unmovable item (a tree) and 2 means there is a movable item (a boulder).

And with a simple array you can build the entire map.

The bulldozer isn’t part of the map but it’s added later. As a general rule, the player and moving enemies shouldn’t be part of the map.

Here it is the script:

package {
	import flash.display.Sprite;
	import flash.events.KeyboardEvent;
	import flash.events.Event;
	public class rebuild extends Sprite {
		// declaring the map
		public var map:Array=new Array();
		// bulldozer position
		public var bulldozer_pos:Array= new Array();
		// tree movieclip
		public var tree:tree_mc;
		// debris movieclip
		public var debris:debris_mc;
		// bulldozer movieclip
		public var bulldozer:bulldozer_mc;
		// variable to store the last key pressed by the player
		public var key_pressed:int=0;
		public function rebuild():void {
			// creating the map
			// 0: empty space
			// 1: tree
			// 2: debris
			map=[[0,0,2,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0],[1,1,1,1,1,0,1,0,0],[1,0,0,2,0,0,1,0,0],[1,0,0,0,0,0,1,0,0],[1,1,1,1,1,1,1,0,0],[0,0,0,0,2,0,0,0,0],[0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0]];
			// bulldozer position
			bulldozer_pos=[6,2];
			draw_map();
			place_bulldozer();
			stage.addEventListener(KeyboardEvent.KEY_DOWN, on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP, on_key_up);
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function draw_map():void {
			for (var i:int=0; i<9; i++) {
				for (var j:int=0; j<9; j++) {
					switch (map[j][i]) {
						case 1 :
							// I found a tree
							tree = new tree_mc();
							tree.x=i*50;
							tree.y=j*50;
							addChild(tree);
							break;
						case 2 :
							// I found a debris
							debris=new debris_mc();
							debris.x=i*50;
							debris.y=j*50;
							addChild(debris);
							break;
					}
				}
			}
		}
		public function place_bulldozer():void {
			bulldozer = new bulldozer_mc();
			bulldozer.x=50*bulldozer_pos[1];
			bulldozer.y=50*bulldozer_pos[0];
			addChild(bulldozer);
		}
		public function on_key_down(e:KeyboardEvent):void {
			key_pressed=e.keyCode;
		}
		public function on_key_up(e:KeyboardEvent):void {
			if (e.keyCode==key_pressed) {
				key_pressed=0;
			}
		}
		public function on_enter_frame(e:Event):void {
			switch (key_pressed) {
				case 37 :
					if (bulldozer_pos[1]>0&&map[bulldozer_pos[0]][bulldozer_pos[1]-1]==0) {
						bulldozer_pos[1]--;
						bulldozer.x-=50;
					}
					break;
				case 38 :
					if (bulldozer_pos[0]>0&&map[bulldozer_pos[0]-1][bulldozer_pos[1]]==0) {
						bulldozer_pos[0]--;
						bulldozer.y-=50;
					}
					break;
				case 39 :
					if (bulldozer_pos[1]<8&&map[bulldozer_pos[0]][bulldozer_pos[1]+1]==0) {
						bulldozer_pos[1]++;
						bulldozer.x+=50;
					}
					break;
				case 40 :
					if (bulldozer_pos[0]<8&&map[bulldozer_pos[0]+1][bulldozer_pos[1]]==0) {
						bulldozer_pos[0]++;
						bulldozer.y+=50;
					}
					break;
			}
		}
	}
}

Let's see the main functions:

draw_map: phyisically draws the level, placing movieclips in proper positions according to map array. In this case, tile size is 50x50.

place_bulldozer: places the bulldozer in the level

on_key_down and on_key_up manage in the simplest way possible player's keyboard input. The first one just stores the last key pressed, and the second one resets last key pressed value if the player releases it.

on_enter_frame just checks if the player is pressing an arrow key, and moves the bulldozer in that way, if there is room to move (map value is equal to zero) and if it won't leave the 9x9 grid.

And that's it...

Use arrow keys to move the bulldozer.

This is just the beginning... the bulldozer cannot move the debris and there is no place to discard them. But we'll see how to do it during next step.

Download the source code

** edit **: if you liked the game, consider visiting the official site

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers