---------------------------------------------------------------------------------------------------------------------
READ MORE:
https://wilsonas3tutorial.wordpress.com/simple-card-matching-game-tutorial/simple-card-matching-game-tutorial-1/
--------------------------------------------------------------------------------------------------------------------
MAKE FOUR MOVIE CLIPS WITH INSTANCES NAMES IN AS3
mc1,mc2,mc3,mc4
--------------------------------------------------------------------------------------------------------------------
PASTE BELOW CODE IN ACTION SCRIPT PANEL
---------------------------------------------------------------------------------------------------------------------
/*AS3
Script by Wilson Oh A.K.A Trust me, I'm a programmer
//https://wilsonas3tutorial.wordpress.com/simple-card-matching-game-tutorial/simple-card-matching-game-tutorial-5/
5 June 2012*/
//MAKE FOUR MOVIE CLIPS WITH INSTNCE NAMES: mc1, mc2, mc3, mc4
var fCards:Array = new Array(mc1, mc2, mc3, mc4);
var bCards:Array = new Array(mc1, mc2, mc3, mc4);
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
for(var i:int = 0; i < fCards.length; i++){
var randomNum:Number;
var xPos:Number;
var yPos:Number;
randomNum = Math.floor(Math.random()*fCards.length);
xPos = fCards[randomNum].x;
yPos = fCards[randomNum].y;
fCards[randomNum].x = fCards[i].x;
fCards[randomNum].y = fCards[i].y;
fCards[i].x = xPos;
fCards[i].y = yPos;
}
for(var j:int = 0; j < bCards.length; j++){
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
function openCard(e:MouseEvent):void{
e.target.visible = false;
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false){
clicked1Time = true;
indexNum2 = indexNum;
}
else{
for(var j:int = 0; j < bCards.length; j++){
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
clicked1Time = false;
if(indexNum == indexNum2){
var delayDisappear:Timer = new Timer(500);
delayDisappear.addEventListener(TimerEvent.TIMER, disappearTime);
delayDisappear.start();
function disappearTime(e:TimerEvent):void{
for(var j:int = 0; j < bCards.length; j++){
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
delayDisappear.stop();
}}
else{
var delayBack:Timer = new Timer(500);
delayBack.addEventListener(TimerEvent.TIMER, giveBack);
delayBack.start();
function giveBack(e:TimerEvent):void{
for(var j:int = 0; j < bCards.length; j++){
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
delayBack.stop();
}}}}
----------------------------------------------------------------------------------------------------------------------
WILSON AS3 CARD MATCHING GAME WITHOUT COVER EFFECT TUTRIAL 5
CODE:
https://wilsonas3tutorial.wordpress.com/simple-card-matching-game-tutorial/simple-card-matching-game-tutorial-5/
----------------------------------------------------------------------------------------------------------------------
Simple Card Matching Game Tutorial 5
Hi, again ! i know it’s wordy at tutorial 4 but no choice, i cannot apply it if you all don’t know how to use it. So let get started.
Simple Card Matching Game Tutorial 5
Create 3 variables, 2 variables that store the index of the array and 3rd variable will be checking if it has clicked the 2nd time.
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
A formula will be needed. This make me think for quite long because it’s hard to turn the logic into coding which need to think for quite a long time but this is well known for game. > o <
The formula i use, i will explain. First get their index number then i divide by 2. If it has decimal, i will round down the number.
The concept behind the formula. Let say that index number of the first object clicked is 6 and i divided by 2 which will make 3, no decimal point, don’t have to round down. You got your first object number.
He clicked the 2nd time. I get the 2nd object number which is 7 and i divided by 2 which make 3.5, I round down the decimal point, so it will be 3. Those 2 object number are now correctly link. That make 1 pair, if they are not link, i will reject it and make him try again. Simple concept.
The formula:
indexNum = Math.floor(bCards.indexOf(e.target)/2);
We need to get his 2nd click so that we can pair it together or reject it. You will need boolean to do this.
I will state false at start because he has not clicked the 1st time. If he clicked the first time, i will turn it to true. The next false will be his 2nd click and restart the whole process again. Computer will know him clicking the 2nd time and store the first object index number to my 2nd storage. I can change the 1st storage again.
The coding:
if(clicked1Time == false)
{
clicked1Time = true;
indexNum2 = indexNum;
}
else
{
clicked1Time = false;
}
But now we just storing it, haven’t even change the state of the object. So we need to check if the 1st object index number match with the 2nd object index number. I will make it disappear. If not i will show my card back view again. To do this, i will use my if statement to create another if statement inside it. This is called nesting.
We need another formula to get the cards REAL index number because the first formula that we give is to make a FAKE index number. Using the FAKE index number, we must find back our REAL index number. That the concept behind the formula.
(Don’t ask me how i get all those crazy formula because this is not easy to explain to you, as i am not a pro in explaining and teaching)
The coding:
else
{
clicked1Time = false;
if(indexNum == indexNum2)
{
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
}
else
{
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
}
}
We need a timer because you can play but you can’t see the 2nd card as it was too quick, that you can bearing see. A timer will delay the time for viewers to see. I think 0.5 seconds is enough. As it’s for young people to play. If it’s for old man to play, i will put at least 3 seconds for them to see. The question of the delay is: “WHAT IS YOUR TARGET AUDIENCE?”
The coding:
if(indexNum == indexNum2)
{
var delayDisappear:Timer = new Timer(500);
delayDisappear.addEventListener(TimerEvent.TIMER, disappearTime);
delayDisappear.start();
function disappearTime(e:TimerEvent):void
{
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
delayDisappear.stop();
}
}
else
{
var delayBack:Timer = new Timer(500);
delayBack.addEventListener(TimerEvent.TIMER, giveBack);
delayBack.start();
function giveBack(e:TimerEvent):void
{
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
delayBack.stop();
}
}
I was planning to put this the last part because this is a part of garbage collection, but don’t have this, it’s will have bug inside. I have no choice but to fix it now using garbage collection method.
You have done a game that is correct and you are thinking what is the bug?
It’s work perfectly well but if you click fast enough, you clicked 3 object what will happen?
Ta Ta ! You just perform a magic to destroy your game. Haha !
To solve it, use garbage collection method will do.
Garbage collection because we check every single method human will try to destroy the game. If you click the 3rd object. It’s SCREW ! and your face will be like….. So to fix it, it’s easy.
We remove the listener when the user clicked 2nd time, when he click 3rd object he cannot active the function and we add back the listener so that the user can click again. That’s simple right?
How we add event listener, how we remove it. We used a for loop to add it, We use a for loop to remove it.
Code will be:
for(var j:int = 0; j < bCards.length; j++)
{
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
and
for(var j:int = 0; j < bCards.length; j++)
{
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
Place the remove loop inside the 2nd click and place the add inside the 2nd click if statement.
Placement:
function openCard(e:MouseEvent):void
{
e.target.visible = false;
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false)
{
clicked1Time = true;
indexNum2 = indexNum;
}
else
{
(Here put the remove loop)
clicked1Time = false;
if(indexNum == indexNum2)
{
var delayDisappear:Timer = new Timer(500);
delayDisappear.addEventListener(TimerEvent.TIMER, disappearTime);
delayDisappear.start();
function disappearTime(e:TimerEvent):void
{
(Here is the adding loop)
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
delayDisappear.stop();
}
}
else
{
var delayBack:Timer = new Timer(500);
delayBack.addEventListener(TimerEvent.TIMER, giveBack);
delayBack.start();
function giveBack(e:TimerEvent):void
{
(Here is the adding loop)
bCards[Math.floor(indexNum*2)].visible = false;
bCards[Math.floor(indexNum*2) + 1].visible = false;
bCards[Math.floor(indexNum2*2)].visible = false;
bCards[Math.floor(indexNum2*2) + 1].visible = false;
delayBack.stop();
}
}
}
}
There you go. Try spamming your 3rd object, it’s now unable to come out now. You have a complete matching game now. Great ! You can play your game now without any bugs!
Overall coding we have done and COMMENT YOURSELF !
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
function openCard(e:MouseEvent):void
{
indexNum = Math.floor(bCards.indexOf(e.target)/2);
if(clicked1Time == false)
{
clicked1Time = true;
indexNum2 = indexNum;
}
else
{
for(var j:int = 0l j < bCards.length; j++)
{
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
if(indexNum == indexNum2)
{
var delayDisappear:Timer = new Timer(500);
delayDisappear.addEventListener(TimerEvent.TIMER disappearTime);
delayDisappear.start();
function disappearTime(e:TimerEvent):void
{
for(var j:int = 0; j < bCards.length; j++)
{
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
delayDisappear.stop();
}
}
else
{
var delayBack:Timer = new Timer(500);
delayBack.addEventListener(TimerEvent.TIMER, giveBack);
delayBack.start();
function giveBack(e:TimerEvent):void
{
for(var j:int = 0; j < bCards.length; j++)
{
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
delayBack.stop();
}
}
}
}
There you have your mini game done by your own. Congrats, if it yours 1st game, you ever made in your life. ^^V Next tutorial, I will teach you make screen. You will have a start menu, game content and restart menu. Which will make it look like a game.
----------------------------------------------------------------------------------------------------------------------
WILSON AS3 CARD MATCHING GAME WITHOUT COVER EFFECT TUTRIAL 5
WITHOUT TIMER
IT WORKS RIGHT
WHEN I REMOVE TIMER IT GIVES ERROR SUCH AS DUPILCATE
VARIABLE IN FOR LOOP I CHANGE j TO k & m
---------------------------------------------------------------------------------------------------------------------
//Add back the event listener
for(var k:int = 0; k < bCards.length; k++)
{
bCards[k].addEventListener(MouseEvent.CLICK, openCard);
}
---------------------------------------------------------------------------------------------------------------------
//Add back the event listener
for(var m:int = 0; m < bCards.length; m++)
{
bCards[m].addEventListener(MouseEvent.CLICK, openCard);
}
---------------------------------------------------------------------------------------------------------------------
FULL CODE:
----------------------------------------------------------------------------------------------------------------------
/*AS3
Script by Wilson Oh A.K.A Trust me, I'm a programmer
5 June 2012*/
//Store all the front view movie clip inside
var fCards:Array = new Array(mc1, mc2, mc3, mc4);
//Store all the back view movie clip inside
var bCards:Array = new Array(mc1, mc2, mc3, mc4);
//Needed for game
var indexNum:Number;
var indexNum2:Number;
var clicked1Time:Boolean = false;
//This loop will change their position between each other.
for(var i:int = 0; i < fCards.length; i++)
{
//Use to store data of the random object
var randomNum:Number;
var xPos:Number;
var yPos:Number;
//Get a random number
randomNum = Math.floor(Math.random()*fCards.length);
//Store the randomNum object position
xPos = fCards[randomNum].x;
yPos = fCards[randomNum].y;
//Change between their position
fCards[randomNum].x = fCards[i].x;
fCards[randomNum].y = fCards[i].y;
fCards[i].x = xPos;
fCards[i].y = yPos;
}
//A loop that add event listener to the back view
for(var j:int = 0; j < bCards.length; j++)
{
bCards[j].addEventListener(MouseEvent.CLICK, openCard);
}
//This function make the backview unable to been seen when is clicked.
function openCard(e:MouseEvent):void
{
//To let the viewers see the front view
e.target.visible = false;
//This forumla get a set of pair number for my cards
indexNum = Math.floor(bCards.indexOf(e.target)/2);
//Check for the 2nd click so that i can active the checking of pair.
if(clicked1Time == false)
{
//The first time you click it will turn true
clicked1Time = true;
//The indexNum2 will store the first data.
indexNum2 = indexNum;
}
else
{
//Temporary remove the event listener.
for(var j:int = 0; j < bCards.length; j++)
{
bCards[j].removeEventListener(MouseEvent.CLICK, openCard);
}
//This is the 2nd click and i will turn it back to normal so i can check again.
clicked1Time = false;
//Check if the both are paired up, it will make it disappear if not it will go back to the
//back view
if(indexNum == indexNum2)//
{
//This is a delay timer for the viewers to see the cards
//Start my timer
//Add back the event listener
for(var k:int = 0; k < bCards.length; k++)
{
bCards[k].addEventListener(MouseEvent.CLICK, openCard);
}
//This will take the indexNum that is paired then use it to get back
//their array index so i can hide it from stage.
fCards[Math.floor(indexNum*2)].visible = false;
fCards[Math.floor(indexNum*2) + 1].visible = false;
//Stop my timer
}
else
{
//A delay timer for my viewers to see the cards
//Add back the event listener
for(var m:int = 0; m < bCards.length; m++)
{
bCards[m].addEventListener(MouseEvent.CLICK, openCard);
}
//This will show the back view of the cards again.
bCards[Math.floor(indexNum*2)].visible = true;
bCards[Math.floor(indexNum*2) + 1].visible = true;
bCards[Math.floor(indexNum2*2)].visible = true;
bCards[Math.floor(indexNum2*2) + 1].visible = true;
//Stop my timer
}
}
}
EmoticonEmoticon