LITTLEBIGPLAY.COM - FREE ONLINE GAMES   DONAGAMES.COM - GAMES FOR GIRLS     CONTACT ME    
    SHAJBY  MY CREATIONS 
FLASH GAMES | FOR KIDS | ANDROID ONLINE GAMES | TABLET GAMES | ANDROID GAMES | WEBSITES


TUTORIALS

1. How to load SWF with JAVA and package it as APK file!
2. LET'S MAKE SOME MONEY - ADDING LEADBOLT ADS!
3. FINDING PAIRS #1 - FLASH GAME TUTORIAL
4. FINDING PAIRS #2 - PUBLISHING AN ANDROID VERSION WITH ADOBE AIR
5. FINDING PAIRS #3 - ADDING MORE FUNCTIONALITY TO OUR ANDROID GAME
6. EARNING EVEN MORE MONEY WITH REVMOB - ADDING REVMOB TO OUR ANDROID GAME!!

Do you want to see more tutorials? Please buy me some beer! :)





3) FIND PAIRS #1 - FLASH GAME TUTORIAL

Welcome to my third tutorial in which I show you how to create a simple FINDING PAIRS game, the same one you can see and play below! The rules are simple - find 2 same cards! The game is written in AS3 and I will try to comment every piece of code for you! Unfortunately I can not include any screenshots this time, because my adobe flash is in a language that nobody would understand to :)!



REQUIREMENTS
- Adobe Flash
- basic Flash and AS3 knowledge
- download initial game files

1) Unzip the downloaded file and open it in flash!

Or create your own file - create a new MovieClip (card) with a linkage Card. Inside this MovieClip insert 11 frames - the first one will be the card in an upside state, all the other frames will be the actual cards (different cards) - one card on 1 frame, so you have 11 frames in total. Also create a dynamic textfield called tf_end and place it on the bottom of the main stage.

2) As you can see there are 2 objects on the stage:
- textfield on the bottom of the stage - it will show the game over text
- our card - you can remove it, but for a demonstration I left it out of the stage. It has Card linkage in a library so we can load it dynamically

3) Go inside the card (double click on it), you can see there several frames - the first frame shows the card in an upside position, all the other frames shows the actual cards, you can create here as many different cards as you need, just remember each one must be on a separate frame!

4) Now its time to add the game logic. I have tried to describe every possible line of code for you below. Copy the code below and paste it to the frame 1 of the main timeline (not inside the card)

import flash.utils.Timer;
import flash.events.TimerEvent;

var aCards:Array = new Array(); //to store the card ids
var initPosX:Number = 10; // initial x-position of the first card on the stage, you can change it as you need
var initPosY:Number = 10; // initial y-position of the first card on the stage, you can change it as you need
var spacer:Number = 5; // space between cards, you can change it as you need
var inrow:Number = 5; // how many cards to display in one row, you can change it as you need
var posX:Number = 0; // to store the current x position
var posY:Number = 0; // to store the current y position
var totalPairs:Number = 10; //how many cards we have - we have 10 different cards in our Card movieclip so we set here 10
var firstCard:MovieClip; // to store the first card we choose to turn on
var secondCard:MovieClip; // to store the second card we choose to turn on
var showTime:Number = 400; // how long time the card should be turned on before turning back (in milliseconds)
var pairsFound:Number = 0; //how many pairs we already found

//adds numbers 1-10 twice into the array
function buildArray():void{

//these lines create array of numbers 2,2,3,3,4,4,5,5...11,11. Our MovieClip card has 10 different cards inside + first frame
for(var i:uint=1;i<=totalPairs;i++){
for (var j:uint=1;j<=2;j++){
aCards.push(i+1);
}
}

//randomly sort the array so its not 2,2,3,3,... but 1,3,5,4, etc
aCards.sort(sort);

//create cards
createCards();
}


//randomly sort the array
function sort(a:Object, b:Object):Number {
return (Math.random() < .5) ? -1 : 1;
}

//builds the cards
function createCards():void{
var counter:Number = 0; //storing how many cards we have in a row

//for each number in aCards array create corresponding card
for(var i=0;i<aCards.length;i++){
var card:MovieClip = new Card(); //create new card
var cardWidth:Number = card.width; //whats the width of the card
var cardHeight:Number = card.height; //whats the height of the card

addChild(card); //add the card to the stage
posX = initPosX+counter*(cardWidth+spacer); //count the position X for the card

card.x = posX; //set the position x
card.y = initPosY+posY; //set the position y

counter++; //increase the number of cards we already created

//if we created as many cards as we defined in inrow variable, jump to the new row and reset the counter
if(counter==inrow){
posY+=cardHeight+spacer;
counter = 0;
}

card.id=aCards[i]; //assign the id to the card
card.gotoAndStop(1); //turn off the card (to an upside state)
card.addEventListener(MouseEvent.MOUSE_DOWN,onCardClick); //we must define what happens after click on the card
card.buttonMode = true;
card.mouseChildren = false;
}
}

//when we click on the card
function onCardClick(e:MouseEvent):void {
if(firstCard&&secondCard) return; //both cards are turned on, dont allow playing until they are hiden or removed
if(e.target.currentFrame!=1) return; //clicking the same card

e.target.gotoAndStop(e.target.id); //set the card we clicked on - jump to the corresponding frame depending on the card id

if(!firstCard) firstCard = e.target as MovieClip; //store the first card in firstCard variable
else secondCard = e.target as MovieClip; //store the second card in secondCard variable

//if exists the second card => we turned 2 cards
if(secondCard){
var tm:Timer = new Timer(showTime,1); //let the cards on for (showTime) time before we hide them or remove them
if(firstCard.id==secondCard.id){// the cards are the same - remove them
tm.addEventListener(TimerEvent.TIMER,removeCards);
}else{//the cards are not the same - turn them back
tm.addEventListener(TimerEvent.TIMER,hideCards);
}
tm.start(); // start the timer
}
}

//checks if we found all the cards
function checkEnd():void{
if(pairsFound==totalPairs){//we found all the cards
tf_end.text = "GAME OVER"
}
}

function resetCards():void{
firstCard = null;
secondCard = null;
}

//remove the cards from the stage and checks the end of the game
function removeCards(e:TimerEvent):void{
pairsFound++;
removeChild(firstCard);
removeChild(secondCard);
resetCards();
checkEnd();
}

//resets the cards
function hideCards(e:TimerEvent):void{
firstCard.gotoAndStop(1);
secondCard.gotoAndStop(1);
resetCards();
}

buildArray();// inits the game
5) Publish the game :)..you should see the same functionality as displayed on the beginning of this tutorial!

Download the final version here

I hope you enjoyed this tutorial!
You can try to add some more functionality - scoring, time, restart etc! Next time I will show you how to make a cell phone game from this file in ADOBE AIR, so have the game ready!:-) Or you can go to tutorial 1 - How to load SWF with JAVA and package it as APK file and create a cell-phone version of this game now.


TUTORIALS

1. How to load SWF with JAVA and package it as APK file!
2. LET'S MAKE SOME MONEY - ADDING LEADBOLT ADS!
3. FINDING PAIRS #1 - FLASH GAME TUTORIAL
4. FINDING PAIRS #2 - PUBLISHING AN ANDROID VERSION WITH ADOBE AIR
5. FINDING PAIRS #3 - ADDING MORE FUNCTIONALITY TO OUR ANDROID GAME
6. EARNING EVEN MORE MONEY WITH REVMOB - ADDING REVMOB TO OUR ANDROID GAME!!

Do you want to see more tutorials? Please buy me some beer! :)





 
 
Copyright © shajby 2010-2011