Development

Development
Software

The software that I will be using for creating the maze is Adobe Flash CS4, it's specially designed for the job of creating animations, animated movies and games. It also uses a coding language named ActionScript 3.0, it's similar to Javascript but uses KeyListeners and Events to identify each movie clip object. It relies on coordinates through x and y to complete animation of rotating objects and moving ones.

Stage One

I will be designing a Cursor maze game, where the user will use their original mouse cursor to guide through the maze to the indicated exit without touching the maze walls or moving obstacles throughout the game. They will be timed on their progress to see how long they last for in the maze, they will be given a random experience when they fail the level, they will be able to pick their starting location to see if they can beat the game.

Update: The reason why I'm not using an object and keyboard commands in the maze because of hit testing. I found difficulty trying to 'End the game' when the object the player uses comes into contact with walls. The object simply passes through the walls and obstacles, destroying the whole point of the game. I spent a whole week trying to do hit testing with various codes, but none seemed to function correctly.

Designing Menu's

A menu is important for the majority of games. Through researching various puzzle games just like the maze I'm going to create all have a menu giving the user various instructions on how to play the game and how to achieve the objective. Some have other features like choosing difficulty levels, an option to reduce music and sound effects. I am going to design a menu which is quick and simple so the users can get in and out of the game whenever they request to. To match the house style of my website (Primarily Blue and White), I will try to achieve the same as this.



I have currently kept it very basic with the Blue background and White text. I have also added the first button which will be programmed to begin the game. Using the Primitive rectangle tool I have designed the shape of the button along with rounding off the edges to create smoothness.

The actionscript code which I have used to begin the game goes as follows:

('start' is the instance name of the button.)
stop();

start.addEventListener(MouseEvent.CLICK, startGame)
function startGame(event:MouseEvent){
gotoAndStop("2");
}

This section of code basically tells the button to go to Frame 2 (this is where the maze will be).

Losing The Game

When the users character touches an obstacle, then it's game over, simple as that. The code is very similar to the button command, however it uses a Mouse Event Rollover instead, so as the mouse cursor rolls over the obstacle, then it instantly sends the user to the game over screen.

('walls' is the instance name for the maze walls.)

walls.addEventListener(MouseEvent.MOUSE_OVER, overwalls)
function overwalls(Event:MouseEvent){
gotoAndStop("End Game");
trace("Complete");
}

When the game is declared over, the user will have the option to go back to the start menu or simply go back into the game again.

When the game develops overtime, I will be able to code other obstacles that are animated (rotating, moving) to create the same effect when the player hits it.



Winning The Game

When the user finally touches the 'Exit', the user will be sent to the Winner frame. They will be congratulated and will be given a balloon. Which can be controlled using the up, down, left, right arrow keys. Just as a little amusement for the user.
The AS3 code to generate the Winner frame is very similar to the Game Over code above. The mouse rollover events are very useful in doing this as it's quick and tidy.





Update: Trying Again

Going back through thinking about improvements, and I thought of the idea to give the user the chance to try again, instead of getting a blunt 'Game Over'. This new menu allows the user to choose their location from Five different points which I have arranged. Simply clicking on one of the small white rounded squares will take them back into the game to try again. This will give the player a new experience everytime they join back into the game, bringing more fun and experiences to it.



Update:Improvement

Instead of the plain blue background in each menu I have used the original background from my website (the sky background). This will give it better presentation and will attract users to play the game. It looks more professional and makes it look worth while compared to the blue background I originally planned out.





Stage Two
Designing The Maze

Because I have to add this to my website I have ensured that the colours match my websites house styles. So the floor of the maze is blue. However, for the maze walls they are currently a dull grey to match a 'prison' level where the user has to escape from the prison walls to the finish location. This is due to change, I'm thinking about changing it to White to make it more brighter and make it like a snow prison.



The walls are designed and coded not to be touched by the user. If the user touches any obstacle with the escaping character, then it's an instant game over. This will bring a new challenge to the player as it test their patience and accuracy of movement using the keyboard or mouse (currently not decided).

Rotating Objects and Traps
I have devised a plan to create some rotating obstacles and a trap which will be designed to coincide with each other. When the users cursor moves over a certain location in the maze, it will trigger the command for the objects to start rotation. Using Mouse rollover events, I will be able to achieve functionality of the rotating objects. I will also add some 'Security' characters which will act as security guards and when the users cursor comes into contact with them, it will be game over.

Rotating Obstacle (Version 1)


Guard (Version 1)


Developing The Rotating Obstacles and The Trap

The image below is the trap that I'm going to use with AS3 to trigger a trap to spawn the movement of the rotating obstacles. This will make the game more challenging to the users. They can choose not to go near the trap and they can simply move past. This will bring new experience to the game because they can experiment with surviving the maze with the trap activated or not.




Rotating Obstacle (Improved)



The code below displays the rotating obstacles and the traps characteristics and shows them linking together to work. The rotate_btn is effective the tiny dot in the maze so when the mouse rolls over this dot, it will start the command to rotate the objects. When this has started, each of the objects will be 'told' to begin rotation from the event listener. I have also added a dynamic text box which handles the output of "Its a Trap!" when the mouse rolls over the trap. This indicates what the user has got themselves into.

// Add Listener to the Rotate Trap 'Button'
rotate_btn.addEventListener(MouseEvent.MOUSE_OVER, rotateButtonOver);

function rotateButtonOver(evt:MouseEvent):void {
// Event Listener declared to start rotation
addEventListener(Event.ENTER_FRAME, startRotate);
trace("Trap Clicked");
}

function startRotate(evt:Event):void {
// Call function rotateSquare
rotateSquare();
}

function rotateSquare():void {
// Rotate the MovieClip
mcRotate.rotation += 20;
mcRotate2.rotation -= 20;
mcRotate3.rotation -= 10;

// Display message
output_txt.text = "Its a Trap!";
}

Developing The Guard

The guard is made by two to three shapes, a circle and a triangle basically stuck together into a movie clip. The circle is used to act as a guard with a flash light or the sight it has over the maze map. The bigger the triangle, the more radius the guard can see. So when the users cursor moves into the perimeter of the guard, then its game over (because they have been spotted). I have dotted guards around the maze in certain places to give the users more of a challenge not to be detected by the radius perimeters. The guards are different sizes, the bigger the guard, the more difficult it is to pass through.

Rotation

The guards rotate at various speeds, to give the chance for the users to pass through the various paths in the maze, but what goes around, comes around. So the user must quickly pass through undetected.

//Security rotates automatically
Security1.addEventListener(Event.ENTER_FRAME, rotateMoveClip);
Security2.addEventListener(Event.ENTER_FRAME, rotateMoveClip);
//Add more Security guards

// the rotateMoveClip function
function rotateMoveClip(e:Event)
{
// e.target is the reference to the MovieClip calling the event
e.target.rotation += 0.5;
}

The code above is based on rotation events. The security rotate clockwise at 0.5px.

Guard (Improved)

The improved guard works the same as before, however, the little circle is hidden under the big static circle object above. So it makes it look more of a security tower building compared to just a guard spinning around with a flashlight. This idea looks better and realistic compared to its predecessor.



Developing The Moving Obstacles





The code below makes the two moving obstacles move left to right using x and y coordinates. xRate is the speed of the obstacle that makes it travel from y to x. The obstacles will move to the width of the stage so every time they move from one side to the other, they will effectively bounce off the corner of the stage and will stay within the maze.

function moveObstacles(event:Event) {
mcObstacle.x -= xRate;
mcObstacle1.x += xRate;

if (mcObstacle.x > (stage.stageWidth - 10) || mcObstacle.x < 10 || mcObstacle1.x < 10) {
xRate = xRate * -1;
}
}

The Timer

The Timer is very important to maze game, it can be used as a psychological method to make the user panic and hurry up to complete the maze game in the fastest time possible. The more pressure the user has to beat his/her older records, the chances of failing the game are more likely than expected.

The code below shows how the timer works, it starts at 0 and basically adds a digit by 1 everytime. Using a dynamic textbox called countTxt.text as the output helps this function to visualise the counting up.

//Timer
var count:Number = 0;
var myTimer:Timer = new Timer(1000,count);
myTimer.addEventListener(TimerEvent.TIMER,countup);
myTimer.start();

function countup(event:TimerEvent):void
{
countTxt.text = String((count)+myTimer.currentCount);
}



The Timer is located in the top right corner of the maze, it will appear once the game has started.

Adding Sounds

To add sounds or music, I must import the sound files (preferably MP3) into the library. The screenshot below shows after adding the sound file into the library, I have to check its properties to create linkage to the frames for the game. Checking the tick box, it ensures this and allows the sound to be involved in the actionscript codes.





//Sound
var snd:Sound = new FFX();
var channel:SoundChannel;

channel = snd.play();

//Stop Button
btnStop.addEventListener(MouseEvent.CLICK, onClickStop);

function onClickStop(e:MouseEvent):void{
channel.stop();
}

//Play Button
btnPlay.addEventListener(MouseEvent.CLICK, onClickPlay);

function onClickPlay(e:MouseEvent):void{
channel = snd.play();
}

Issue With Sound

When originally using this code:

var snd:Sound = new FFX();
var channel:SoundChannel;
channel = snd.play();

I had problems with the song from the main menu constantly playing throughout the game, so I had to create two sound buttons which represent Play and Stop. So the user can happily choose to play the music throughout the game or not. The code above displays what I had to do to declare the buttons into functions and make events, so when the user clicks the button, then the sound plays on or off.

Shortening The Code (Efficiency)
I have noticed that some of my actionscript 3.0 code can be shortened for easier maintenance when going back to improve aspects of the game. The game needs efficiency, so shortening the code will mean less loading times and lesser problems for future usage.

Here are some examples of what I am about to change:

Rotating Obstacles

The code below shows that when the users cursor touches the obstacles, its an instant game over. Each of these functions repeat the same thing, so I will change this to make it smaller and easier to understand and maintain of course.

mcRotate.addEventListener(MouseEvent.MOUSE_OVER, doom1)
function doom1 (Event:MouseEvent){
gotoAndStop("End Game");
trace("Complete");
}

mcRotate2.addEventListener(MouseEvent.MOUSE_OVER, doom2)
function doom2 (Event:MouseEvent){
gotoAndStop("End Game");
trace("Complete");
}

mcRotate3.addEventListener(MouseEvent.MOUSE_OVER, doom3)
function doom3 (Event:MouseEvent){
gotoAndStop("End Game");
trace("Complete");
}

Improved

The code below shows the improvement of shortening the code, each instance of the object uses the same function to be used under the same command. So whenever any of these obstacles are touched by the users cursor, then it's game over. This code is now easier to maintain and I will be able to add more onto this!

mcRotate.addEventListener(MouseEvent.MOUSE_OVER, doom1)
mcRotate2.addEventListener(MouseEvent.MOUSE_OVER, doom1)
mcRotate3.addEventListener(MouseEvent.MOUSE_OVER, doom1)

function doom1 (Event:MouseEvent){
gotoAndStop("End Game");
trace("Complete");
}

I can repeat similar steps to this for other objects such as the moving obstacles.

Extras: Moving Balloon (Reward For Winning)
I have added the balloon in the You Win scene which has been coded to take up, down, left, right arrow key commands. The code below displays each command from clicking on the balloon to 'activate' it to pressing the arrow keys to begin movement.


start3.addEventListener(MouseEvent.CLICK, startGame0)
function startGame0(event:MouseEvent){
gotoAndStop("2");
}

var big_step = 20;

balloon.tabEnabled = true;

balloon.addEventListener(MouseEvent.CLICK, change_focus);
function change_focus(ev:MouseEvent) {

balloon.addEventListener(KeyboardEvent.KEY_DOWN, balloon_control);

function balloon_control(event:KeyboardEvent):void {

move_it(event);
}
function move_it(event){

var key = event.keyCode;
var target = event.target;

switch (key) {
case Keyboard.LEFT :
target.x -= big_step;
break;

case Keyboard.RIGHT :
target.x += big_step;
break;

case Keyboard.UP :
target.y -= big_step;
break;

case Keyboard.DOWN :
target.y += big_step;
break;
}
}
}



When the mouse is clicked, the focus of the stage is directed at the balloon, so the arrow key commands can be used preventing the screen from rolling up (when on my website). The switch and case statements identify each key stroke moving up, down, left or right.

Balloon Collision

I have added an animated wall which travels across the stage from side to side. When the balloon comes into contact with the wall, it simply changes colour displaying that it has collided with it.



//Collision Detection

import flash.geom.ColorTransform;
stage.addEventListener(Event.ENTER_FRAME,hit);

function hit(evt:Event)
{
var c:ColorTransform = new ColorTransform();
if(balloon.hitTestObject(mcWall)) {
c.color = 0x0033CC;
balloon.transform.colorTransform = c;
trace("hit a wall");
} else {
c.color = 0xFFFFFF;
balloon.transform.colorTransform = c;
}
}

So when the balloon collides with the wall it changes colour but when it's away from the wall then it returns to it's usual colour.


Further Improvements

Further Improvements I have made is specifically on the Main Menu, I have initially added moving objects which bounce off the edges of the stage. Just to improve visual quality and make it look more 'busy'. It uses the same code as the moving obstacles (above) but also uses y axis usage for one of the obstacles so instead of moving across, it moves up and down the stage.



Final Maze Floor

Below is the screenshot of the completed maze floor. It's full of traps, moving objects and security guards that have one mission: To stop the user from getting to the exit. As you can see all the objects are moving in this still image. The trap has been set as well to activate the rotating obstacles. The moving obstacles and guards already move automatically without any commands from the trap. As promised I have added optionality and different experiences for the users as they can choose not to touch the trap or not; they can also choose their location if they got game over the first time, so it gives them a chance to start again in a new part of the maze to try and get to the exit.