Create a Flash game like Talesworth Adventure

Read all posts about "" game

Recently I got addicted to Talesworth.

It’s a great tile based puzzle game with 30 levels I recommend you to play, but it’s also a game I am recreating with a tutorial series.

So let’s start… since it’s a tile based game, the barebones are very similar to Create a Flash game like Rebuild Chile.

So we have a tiled map, keyboard listeners and all the old thing we already know.

Just let me introduce a couple of new features… first the walkable tiles are defined by value 2 in map array, and second I defined two new variables: tile_size, holding the width/height of tiles, and steps, with the amount of intermediate steps the hero has to make to cross from a tile to another.

If you are not familiar with tile crossing, refer to Create a Flash game like Rebuild Chile – Step 3: smooth movement.

So this is the first version of the script:

package {
	import flash.display.Sprite;
	import flash.events.KeyboardEvent;
	import flash.events.Event;
	public class talesworth extends Sprite {
		public var map:Array=new Array();
		public var hero_pos:Array= new Array();
		public var wall:wall_mc;
		public var floor:floor_mc;
		public var hero:hero_mc;
		public var key_pressed:int=0;
		public var hero_is_moving:Boolean=false;
		public var hero_x_dir:int=0;
		public var hero_y_dir:int=0;
		public var steps:int=4;
		public var tile_size:int=32;
		public function talesworth():void {
			map=[[0,1,1,1,1,1,1,1,1,1,1,1],[0,1,2,2,2,2,2,2,2,1,1,1,1],[0,1,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,0,1,1,2,1,1,2,1,1,2,1,1,1],[0,0,0,1,1,2,2,2,2,2,1,2,2,2,1],[0,0,1,1,1,2,1,1,1,2,1,2,1,1,1,1],[0,0,1,1,1,2,1,1,1,1,1,2,1,1,1,1],[0,0,1,2,2,2,2,2,2,2,2,2,2,2,2,1],[0,0,1,2,1,1,2,1,1,1,1,1,1,1,2,1],[0,0,1,2,2,2,2,1,1,1,1,1,0,1,2,1],[0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,1]];
			hero_pos=[3,1];
			draw_map();
			place_hero();
			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

and this is the result...

As you can see I recreated the level you can see in the snapshot... I just added two walls to close the map since I don't have doors yet. You can move the hero with arrow keys.

But... wait... in the original game you can't move your hero... he runs straight until he hits a wall, then he turns right by 90° until he finds a walkable tile, and keeps on running.

So I have to code this kind of "artificial intelligence". I need a variable to hold the current direction of the hero... let me call it walk_dir and let's say it has four values:

0: left
1: up
2: right
3: down

So at the beginning, since the hero tries to run to the right, its starting value is 2, as you can see at line 16 of the following script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class talesworth2 extends Sprite {
		public var map:Array=new Array();
		public var hero_pos:Array= new Array();
		public var wall:wall_mc;
		public var floor:floor_mc;
		public var hero:hero_mc;
		public var key_pressed:int=0;
		public var hero_is_moving:Boolean=false;
		public var hero_x_dir:int=0;
		public var hero_y_dir:int=0;
		public var steps:int=4;
		public var tile_size:int=32;
		public var walk_dir:int=2;
		public function talesworth2():void {
			map=[[0,1,1,1,1,1,1,1,1,1,1,1],[0,1,2,2,2,2,2,2,2,1,1,1,1],[0,1,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,0,1,1,2,1,1,2,1,1,2,1,1,1],[0,0,0,1,1,2,2,2,2,2,1,2,2,2,1],[0,0,1,1,1,2,1,1,1,2,1,2,1,1,1,1],[0,0,1,1,1,2,1,1,1,1,1,2,1,1,1,1],[0,0,1,2,2,2,2,2,2,2,2,2,2,2,2,1],[0,0,1,2,1,1,2,1,1,1,1,1,1,1,2,1],[0,0,1,2,2,2,2,1,1,1,1,1,0,1,2,1],[0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,1]];
			hero_pos=[3,1];
			draw_map();
			place_hero();
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function draw_map():void {
			for (var i:int=0; i

There are no more keyboard listeners as I can't control the hero with arrow keys, and the switch statement in the on_enter_frame function is no longer based upon the value of the last key pressed but the value of walk_dir variable.

Then, in walk function, if the player cannot move in the current direction, because he's in front of a wall, I simply increase walk_dir value, setting it to zero if it reaches 4 (line 83).

This is the result:

As you can see, the hero runs according to the "turn right" rule I described before.

There is only one last issue left: in the frame in which the hero hits a wall, and walk_dir is increased, the hero stops for a frame for every wall he finds.

This means if the hero is going to the right and finds a wall, he stops for a frame while he turns by 90 degrees, facing down, and if he finds another wall and must turn by 90° again to face left, he loses another frame. If you look at the movie above, you will see a little pause before the hero turns.

I suppose this can be part of the gameplay, because in real world when an hero turns by 90 degrees he wastes a "turn", but I don't want my hero to do that.

So next step is using walk function in a recursive way modifying its arguments to make the hero turn right until he finds a walkable tile.

This may lead to an infinite loop if it's trapped into some kind of "cage", surrounded by walkable tiles, but I'll show you how to prevent it later.

This is the new script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class talesworth3 extends Sprite {
		public var map:Array=new Array();
		public var hero_pos:Array= new Array();
		public var wall:wall_mc;
		public var floor:floor_mc;
		public var hero:hero_mc;
		public var key_pressed:int=0;
		public var hero_is_moving:Boolean=false;
		public var hero_x_dir:int=0;
		public var hero_y_dir:int=0;
		public var steps:int=4;
		public var tile_size:int=32;
		public var walk_dir:int=2;
		public function talesworth3():void {
			map=[[0,1,1,1,1,1,1,1,1,1,1,1],[0,1,2,2,2,2,2,2,2,1,1,1,1],[0,1,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,1,1,1,2,1,1,2,1,1,2,1,1],[0,0,0,1,1,2,1,1,2,1,1,2,1,1,1],[0,0,0,1,1,2,2,2,2,2,1,2,2,2,1],[0,0,1,1,1,2,1,1,1,2,1,2,1,1,1,1],[0,0,1,1,1,2,1,1,1,1,1,2,1,1,1,1],[0,0,1,2,2,2,2,2,2,2,2,2,2,2,2,1],[0,0,1,2,1,1,2,1,1,1,1,1,1,1,2,1],[0,0,1,2,2,2,2,1,1,1,1,1,0,1,2,1],[0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,1]];
			hero_pos=[3,1];
			draw_map();
			place_hero();
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function draw_map():void {
			for (var i:int=0; i

I just modified a bit walk function to change its arguments and call it again in case the hero can't walk, and here he is our hero turning smoothly:

Download the source code.

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

215 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
// Stairs
// 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