Game Development 2 - Pair Game

I found a new script for the matching card game, and it worked well on the frame after a little bit of tweaking the code. However, there is still an error when I tried clicking back to the previous page with the game on page 4 displayed, but cannot be disabled when going back to the previous page or the next page. Since the problem still occurs, therefore I keep going back to the old script to make the tile disappear when the same tiles are matched. I put the solution behind the game after the game is played. I put in a movieclip to show the arranged new duty roles for each characters. 

I still try my best to solve the problem although I had plan B for it.

Animation and Coding

I am currently working on the animation and game coding. I keep testing it on my phone when I am half done with it so that I can find any bugs or problems and fix them earlier. I found out that there is a minor error which is fortunately easy to solve. While doing this, I went to hunt for background music to suit my ebook and some sound effects to go together with the animation and games.

The first game went well, but the problems lie in the second game. This is because the second card game uses OOP and Actionscript file to call into my file. But it appeared in every frame, while it only needs to be on a certain frame. So I went online to look for the solution and hope that it will work out well. I tried very hard but to no avail, even trying different ways to solve the problem but nothing worked out. So I resorted to another script which is shown below:


Matching Card Game

Script


package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class color_match extends Sprite {
private var first_tile:colors;
private var second_tile:colors;
private var pause_timer:Timer;
var colordeck:Array = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
public function color_match() {
for (x=1; x<=4; x++) {
for (y=1; y<=4; y++) {
var random_card = Math.floor(Math.random()*colordeck.length);
var tile:colors = new colors();
tile.col = colordeck[random_card];
colordeck.splice(random_card,1);
tile.gotoAndStop(9);
tile.x = (x-1)*82;
tile.y = (y-1)*82;
tile.addEventListener(MouseEvent.CLICK,tile_clicked);
addChild(tile);
}
}
}
public function tile_clicked(event:MouseEvent) {
var clicked:colors = (event.currentTarget as colors);
if (first_tile == null) {
first_tile = clicked;
first_tile.gotoAndStop(clicked.col);
}
else if (second_tile == null && first_tile != clicked) {
second_tile = clicked;
second_tile.gotoAndStop(clicked.col);
if (first_tile.col == second_tile.col) {
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
pause_timer.start();
}
else {
pause_timer = new Timer(1000,1);
pause_timer.addEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
pause_timer.start();
}
}
}
public function reset_tiles(event:TimerEvent) {
first_tile.gotoAndStop(9);
second_tile.gotoAndStop(9);
first_tile = null;
second_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,reset_tiles);
}
public function remove_tiles(event:TimerEvent) {
removeChild(first_tile);
removeChild(second_tile);
first_tile = null;
second_tile = null;
pause_timer.removeEventListener(TimerEvent.TIMER_COMPLETE,remove_tiles);
}
}
}

This source is found online :http://www.emanueleferonato.com/2008/05/02/creation-of-a-matching-game-with-flash-and-as3/


Although it is an Actionscript file, it is much easier to refined compared to the previous version I had.

Refined Sketches

Page 2 sketch has been added in a game.

Previous page 3 is game page but it has now become an interactive story page.

Previous page 7 is collecting game and it is changed to interactive animation page.


Page 8 has become cooking game which located on page 3 in previous page.

There are 10 refined sketches because the game in page 3 and 4 are too close together. I was advised by my supervisor to leave a gap between both the games. So I refined the game location according to the new game structure with same game which is decided below.

Sketches

There are 10 sketch pages, including three game design. This is how it would look and feel for the composition of drawing according to the story. These sketches are drawn according to the refined game structure, together with some of my own creativity.

Game Development 1 - Pair Game

ActionScript 3.0 Class

Main
package com {


import flash.display.MovieClip;
import flash.events.MouseEvent;

public class Main extends MovieClip {

public var cardManager:CardManager;

public function Main() {
trace("Main is ready!")

resetBTN.visible = false;
resetBTN.buttonMode = true;
resetBTN.addEventListener(MouseEvent.CLICK,resetClick)

cardManager = new CardManager(this);
cardManager.addMe();
cardManager.x = 225;
cardManager.y = 160;

}

private function resetClick(e:MouseEvent)
{
trace("RESET THE GAME")
resetBTN.visible = false;
cardManager.GAME_RESET();
}
}

}

CardManager

package com

{

import flash.display.MovieClip;

public class CardManager extends MovieClip

{

private var _baseMC;

private var _noTry:int = 0;// Number of tries

private var _cardArray:Array = new Array();

private var _compareNo:int = 0;// use to compare

private var _compareMcAry:Array = new Array();

private var _totalOfPairs:int = 4;

private var _currNumPairs:int = 0;

public function CardManager(baseMC)

{

this._baseMC = baseMC;

generateCards();

}

private function generateCards():void

{

var numOfCard:int = 8;

var posX:int = 0;

var posY:int = 0;

var arr:Array = new Array(2,2,3,3,4,4,5,5);

var arr2:Array = [];

while (arr.length > 0)

{

arr2.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]);

}

arr = arr2;

trace("Answer: " + arr);

for (var i:int =0; i<numOfCard; i++)

{

var card:PairCard = new PairCard(this);

card.addMe();

card.myNum = arr[i];

_cardArray.push(card);

// _cardArray[i] = card;

card.x = posX;

posX +=  card.width + 10;

card.y = posY;

if (i==3)

{

posX = 0;

posY +=  card.height + 10;

}

}

trace(_cardArray);

}

public function cardClicked( mc:MovieClip, cardNum:int )

{

_noTry++;

switch (_noTry)

{

case 1 :

_compareNo = cardNum;

_compareMcAry[0] = mc;

break;

case 2 :

_compareMcAry[1] = mc;

if ( _compareNo ==  cardNum )

{

_compareMcAry[0].correctPair = true;

_compareMcAry[1].correctPair = true;

resetAllCards();

_noTry = 0;

checkForWin();

}

break;

case 3 :

resetAllCards();

_noTry = 0;

break;

}

/*if(_noTry == 3)

{

resetAllCards();

_noTry = 0;

}*/

}

public function resetAllCards():void

{

for (var i:int = 0; i < _cardArray.length; i++)

{

if (_cardArray[i].correctPair == false)

{

_cardArray[i].gotoAndStop(1);

}

}

}

public function checkForWin():void

{

_currNumPairs++

if( _currNumPairs == _totalOfPairs )

{

trace("WIN - it's time to call out the button!")

this._baseMC.resetBTN.visible = true;

_currNumPairs = 0;

}

}

public function GAME_RESET():void

{

for (var i:int = 0; i < _cardArray.length; i++)

{

_cardArray[i].correctPair = false;

_cardArray[i].gotoAndStop(1);

// random the colour

}

}

public function addMe():void

{

this._baseMC.addChild(this);

}

public function removeMe():void

{

this._baseMC.removeChild(this);

}

}

}

PairCard

package com

{

import flash.display.MovieClip;

import flash.events.MouseEvent;

public class PairCard extends MovieClip

{

private var _baseMC;

public var myNum:int = 0;

public var correctPair:Boolean = false;

public function PairCard(baseMC)

{

this._baseMC = baseMC;

this.buttonMode = true;

}

private function initializeEvent():void

{

this.addEventListener(MouseEvent.CLICK,cardClick);

this.addEventListener(MouseEvent.MOUSE_OVER,cardOver);

this.addEventListener(MouseEvent.MOUSE_OUT,cardOut);

}

private function cardOver(e:MouseEvent)

{

this.alpha = 0.5;

}

private function cardOut(e:MouseEvent)

{

this.alpha = 1;

}

private function cardClick(e:MouseEvent)

{

if(this.currentFrame == 1)

{

this.gotoAndStop(myNum);

this._baseMC.cardClicked( this, myNum)

}

}

public function addMe():void

{

this._baseMC.addChild(this);

initializeEvent();

}

public function removeMe():void

{

this._baseMC.removeChild(this);

this.removeEventListener(MouseEvent.CLICK,cardClick);

this.removeEventListener(MouseEvent.MOUSE_OVER,cardOver);

this.removeEventListener(MouseEvent.MOUSE_OUT,cardOut);

}

}

}

This source is also from a previous project I worked on when I was still back in Malaysia. This is how it looks for a pairing-up game and it will be applied as a mini game for my final project in which the mouse, bird and sausage gets to rearrange their duties.

Game Development 1 - Drag and Drop Game

ActionScript 3.0



{
import flash.events.MouseEvent;

var totalAmout:int = 0;

item1.desc = "Big Bang CD Album";
item1.price = 76;
item1.startX = -6.2;
item1.startY = 1.9;

item2.desc = "Bluetory CNBLUE CD Album";
item2.price = 68;
item2.startX = 86.8;
item2.startY = 61.8;

item3.desc = "City Hunter Pictures Book";
item3.price = 125;
item3.startX = 47.3;
item3.startY = 142.1;

item4.desc = "ThankU CNBLUE CD Album";
item4.price = 40;
item4.startX = -2.7;
item4.startY = 230.2;

item5.desc = "Ouran High School Host Club Poster";
item5.price = 35;
item5.startX = 86.8;
item5.startY = 279.7;

item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;
item4.buttonMode = true;
item5.buttonMode = true;

item1.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item1.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item2.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item2.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item3.addEventListener(MouseEvent.MOUSE_DOWN,onItemDown);
item3.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item4.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item4.addEventListener(MouseEvent.MOUSE_UP,onItemUp);
item5.addEventListener(MouseEvent.MOUSE_DOWN, onItemDown);
item5.addEventListener(MouseEvent.MOUSE_UP,onItemUp);

function onItemDown(event:MouseEvent):void
{
var item:MovieClip = MovieClip(event.target);
item.startDrag();
item.scaleX = item.scaleY = .95;
var topPosition:uint = this.numChildren - 1;
this.setChildIndex(item, topPosition);
total.itemName_txt.text = item.desc;
}

function onItemUp(event:MouseEvent):void
{
var item:MovieClip = MovieClip(event.target);
item.stopDrag();
if (bin.hitTestObject(item))
{
updatePurchasedPanel(item);
}
else
{
item.scaleX = item.scaleY = 1;
}
}

function updatePurchasedPanel(item:MovieClip):void {
totalAmout += item.price;
total.itemName_txt.text = "";
total.total_txt.text ="£" + String(totalAmout);
item.scaleX = item.scaleY = 1;
//item.x= item.startX;
//item.y = item.startY;
item.play();
}

This is another game used for this project. The above image is my workshop group homework. I found that the basic concept of drag and drop game structure can applied on my cooking game with some changes applied to suit the game's needs.

The original source from http://www.webdesignermag.co.uk/tutorials/implement-the-basic-flash-cs3-drag-and-drop-technique/

Game Development 1 - Collecting Game

ActionScript 3.0

This source is found online :http://flashadvanced.com/creating-small-shooting-game-as3/

/*

 ********************************

 * Shooting stars game

 * http://flashadvanced.com                              

 ********************************

*/

//importing tween classes

import fl.transitions.easing.*;

import fl.transitions.Tween;

//hiding the cursor 

Mouse.hide();

//creating a new Star instance

var star:Star = new Star();

//creating the timer

var timer:Timer = new Timer(1000);

//we create variables for random X and Y positions

var randomX:Number;

var randomY:Number;

//variable for the alpha tween effect

var tween:Tween;

//we check if a star instance is already added to the stage

var starAdded:Boolean = false;

//we count the points

var points:int = 0;

//adding event handler on mouse move

stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorMoveHandler);

//adding event handler to the timer

timer.addEventListener(TimerEvent.TIMER, timerHandler);

//starting the timer

timer.start();

function cursorMoveHandler(e:Event):void{

//sight position matches the mouse position

sight.x = mouseX;

sight.y = mouseY;

}

function timerHandler(e:TimerEvent):void{

//first we need to remove the star from the stage if already added

if(starAdded){

removeChild(star);

}

//positioning the star on a random position 

randomX = Math.random()*500;

randomY = Math.random()*300;

star.x = randomX;

star.y = randomY;

//adding the star to the stage

addChild(star);

//changing our boolean value to true

starAdded = true;

//adding a mouse click handler to the star

star.addEventListener(MouseEvent.CLICK, clickHandler);

//animating the star's appearance

tween = new Tween(star, "alpha", Strong.easeOut, 0, 1, 3, true);

}

function clickHandler(e:Event):void{

//when we click/shoot a star we increment the points

points ++;

//showing the result in the text field

points_txt.text = points.toString();

}

The above script was used for my previous work, and I found that can be used again on one of game for my final project.

Below is shooting star flash game that I found online.

Figure 1. Flash, Flex and ActionScript tutorials - flashadvanced (2009-2011). Creating a small shooting game in AS3. [Image Online] Available from: http://flashadvanced.com/creating-small-shooting-game-as3/ [Accessed 21/03/2013]