Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Talesworth Adventure game, Actionscript 3, Flash and Game development.

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.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.