5 Replies Latest reply on Aug 25, 2009 11:08 PM by shaylee tan

    Memory game.Comparing images(if-else statement)

    shaylee tan

      Hi all!  i am doing a memory flipping game.Currently i am hardcoding all the image path for the images i had.

       

      <mx:Image id="test" x="480" y="177" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="test.source = 'assets/torres.JPEG'"/>
         
      <mx:Image id="tests" x="623" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="tests.source = 'assets/torres.JPEG'"/>

       

       

      What i need to do is to store all the images in an array.After that, i need to compare those image arrays. Because for the memory game,i must able to match all the identical pairs of cards. So my question is how am i going to match those images. When the 1st image is clicked,it flipped open. If i clicked on a 2nd image,it flipped open too. This is the tricky part. If both images are the same,it will stay open. If both images are different,both will flipped back.

       

       

      Can anyone guide me along with my doubts? I faced a serious problem in understanding the codes. Thank for the help in advance.

       

       

       

      Is the the correct way of storing those images in an array?

       

       

      private function Image():void {
                             
      gameArray.push("assets/pat.jpg");
      gameArray.push("assets/hunt.jpg");
      gameArray.push("assets/ger.jpg");
      gameArray.push("assets/ars.jpg");
      gameArray.push("assets/lamps.jpg");
      gameArray.push("assets/kaka.jpg");
      gameArray.push("assets/torres.jpg");
      gameArray.push("assets/vidic.jpg");

       

      gameArray.push(test.source);
      gameArray.push(tests.source);
      gameArray.push(kaka.source);
      gameArray.push(kaka1.source);
      gameArray.push(vidic.source);
      gameArray.push(vidic1.source);
      gameArray.push(gerrard.source);
      gameArray.push(gerrard1.source);
      gameArray.push(ars.source);
      gameArray.push(ars1.source);
      gameArray.push(lampard.source);
      gameArray.push(lampard1.source);
      gameArray.push(hunt.source);
      gameArray.push(hunt1.source);
      gameArray.push(pato.source);
      gameArray.push(pato1.source);

       


      }

        • 1. Re: Memory game.Comparing images(if-else statement)
          Gregory Lafrance Level 6

          If this post answered your question or helped, please mark it as such.

           

          You seem to be storing the paths to the images in the array, and that is fine. If the paths match, then you have a match.

           

          You could also store the image data in an ArrayCollection where there is a path and name field, and then when you create the image, populate the name property with the name data. Then on compare, just compare the names.

           

          This sample code illustrates this basic point:

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
               import mx.controls.Alert;
               import mx.events.ListEvent;       
                import mx.collections.ArrayCollection;

                [Bindable] private var imageData:ArrayCollection =  new ArrayCollection([
                    {path:"assets/images/cat.png", name:"cat"},
                    {path:"assets/images/dog.png", name:"dog"},
                    {path:"assets/images/cow.png", name:"cow"},
                    {path:"assets/images/rat.png", name:"rat"},
                    {path:"assets/images/bug.png", name:"bug"},
                    {path:"assets/images/horse.png", name:"horse"},
                    {path:"assets/images/rat.png", name:"rat"},
                    {path:"assets/images/dog.png", name:"dog"},
                    {path:"assets/images/cat.png", name:"cat"},
                    {path:"assets/images/bug.png", name:"bug"},
                    {path:"assets/images/cow.png", name:"cow"},
                    {path:"assets/images/horse.png", name:"horse"}
                  ]);
                 
                  private function clickHandler():void{
                    if(list.selectedIndices.length == 2){
                      if(list.selectedIndices[0].name == list.selectedIndices[1].name){
                        mx.controls.Alert.show("MATCH");
                      }else{
                        mx.controls.Alert.show("NOT A MATCH");
                      }
                    }
                  }
              ]]>
            </mx:Script>
            <mx:TileList id="list" dataProvider="{imageData}" allowMultipleSelection="true"
              rowCount="2" columnCount="6">
              <mx:itemRenderer>
                <mx:Component>
                  <mx:Image source="{data.path}" name="{data.name}"/>
                </mx:Component>
              </mx:itemRenderer>
            </mx:TileList>
            <mx:Button label="Check" click="clickHandler();"/>
          </mx:Application>

          • 2. Re: Memory game.Comparing images(if-else statement)
            shaylee tan Level 1

            Hi greg. The code that you have provided does not seems to be working. I am not able to click on the images on the tile. And the images do not appear. Your codes do help me understand beter. But this is not exactly what i want. I want to show 8 images on the application.All images are closed which i set all the image source as the same.

             

             

            <mx:Image id="test" x="480" y="177" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="test.source = 'assets/torres.JPEG'"/>
               
            <mx:Image id="tests" x="623" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="tests.source = 'assets/torres.JPEG'"/>

             

             

             

             

            When the 1st image is clicked, i want the card to flip open with a image shown. When i clicked on the 2nd image, the card flipped open too. If both images flipped is the same, it will stay open. If both cards are different, it will flipped back.etc

             

             

            For this part, currently i am hardcoding. When the image is clicked, it changes source.

             

            click="test.source = 'assets/torres.JPEG'"

             

             

            How am i supposed to get those images from the array i have created without hardcoding?

             

             

             

            private function Image():void {
                                   
            gameArray.push("assets/pat.jpg");
            gameArray.push("assets/hunt.jpg");
            gameArray.push("assets/ger.jpg");
            gameArray.push("assets/ars.jpg");
            gameArray.push("assets/lamps.jpg");
            gameArray.push("assets/kaka.jpg");
            gameArray.push("assets/torres.jpg");
            gameArray.push("assets/vidic.jpg");

             

            gameArray.push(test.source);
            gameArray.push(tests.source);
            gameArray.push(kaka.source);
            gameArray.push(kaka1.source);
            gameArray.push(vidic.source);
            gameArray.push(vidic1.source);
            gameArray.push(gerrard.source);
            gameArray.push(gerrard1.source);
            gameArray.push(ars.source);
            gameArray.push(ars1.source);
            gameArray.push(lampard.source);
            gameArray.push(lampard1.source);
            gameArray.push(hunt.source);
            gameArray.push(hunt1.source);
            gameArray.push(pato.source);
            gameArray.push(pato1.source);

             


            }

             

             

            Thanks for your help once again

            • 3. Re: Memory game.Comparing images(if-else statement)
              Gregory Lafrance Level 6

              You'll want to use HTTPService to get the image data from the server:

               

              http://livedocs.adobe.com/flex/3/html/help.html?content=data_access_2.html

               

              http://www.uibuzz.com/?p=38

               

              If this post answers your question or helps, please mark it as such.

              • 4. Re: Memory game.Comparing images(if-else statement)
                shaylee tan Level 1

                Hi greg. I dont really understand what u mean. Are you able to show me an example based on my codes? I am really confused  Thanks alot

                • 5. Re: Memory game.Comparing images(if-else statement)
                  shaylee tan Level 1

                  Hi Greg. I dont really understand by what you meant. Are you able to see my codes and give me an example based on it? I am really confused

                   

                  I hope you can guide me along. Thanks for your help

                   

                   

                   

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1141" height="721" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#758379, #FAFAFA]" fontWeight="bold" borderStyle="solid" borderColor="#7DBBE6"
                      creationComplete="init();srv.send();">
                     
                     
                  <mx:HTTPService id="flip" url="http://api.flickr.com/services/feeds/photos_public.gne?format=rss_200_enc" result="onFetchResult(event)"/>
                     
                  <mx:HTTPService id="srv" url="Soccer.xml"/>

                   

                   

                   

                  <mx:Script>
                  <![CDATA[
                  import mx.events.*;
                  import mx.controls.*;

                   

                   

                   


                         import mx.rpc.events.FaultEvent;
                         import mx.rpc.events.ResultEvent;
                         import flash.utils.Timer;
                         import flash.events.TimerEvent;
                         import mx.collections.ArrayCollection;
                       
                        
                        
                         [Bindable]
                     
                         private var gameArray:Array;
                        
                         private var myXMLDataArray:Array = ["Soccer.xml"];
                        
                         private var totalClicks:int = 1;
                         private var timerActive:Boolean;
                         private var cardImageFeed:XML;
                         private var oneCardFlipped:Boolean;

                   

                         private var assetsPath:String;

                   

                         private var currentImage:int =0;
                         private var images:Array=[];
                        

                       
                       
                                                                                                                                                                                                                                                                                                                                                                                                       
                  private const MIN_MASK:String = "00";
                              private const SEC_MASK:String = "00";
                              private const MS_MASK:String = "000";
                              private const TIMER_INTERVAL:int =0;

                   

                              private var baseTimer:int;

                   

                              private var t:Timer;

                   


                  private function init():void {
                                  t = new Timer(TIMER_INTERVAL);
                                  t.addEventListener(TimerEvent.TIMER, updateTimer);
                                  t.addEventListener(TimerEvent.TIMER, stopTimer);
                                 
                                
                                 
                              }

                   

                              private function updateTimer(evt:TimerEvent):void {
                                  var d:Date = new Date(getTimer() - baseTimer);
                                  var min:String = (MIN_MASK + d.minutes).substr(-MIN_MASK.length);
                                  var sec:String = (SEC_MASK + d.seconds).substr(-SEC_MASK.length);
                                  var ms:String = (MS_MASK + d.milliseconds).substr(-MS_MASK.length);
                                  counter.text = String(min + ":" + sec + "." + ms);
                              }
                             
                             
                               private function onFetchResult(event:ResultEvent):void {
                                                        var items:ArrayCollection = event.result.rss.channel.item as ArrayCollection;
                                                       
                                                        for each(var item:Object in items)
                                                        images.push("assets/torres.jpeg");
                                                        kaka.source= images[currentImage];   
                                                        kaka1.source= images[currentImage];
                                                        test.source= images[currentImage];
                                                        tests.source= images[currentImage];
                                                        vidic.source= images[currentImage];
                                                        vidic1.source= images[currentImage];
                                                        gerrard.source= images[currentImage];
                                                        gerrard1.source= images[currentImage];
                                                        lampard.source= images[currentImage];
                                                        lampard1.source= images[currentImage];
                                                        hunt.source= images[currentImage];
                                                        hunt1.source= images[currentImage];
                                                        pato.source= images[currentImage];
                                                        pato1.source= images[currentImage];
                                                        ars.source= images[currentImage];
                                                        ars1.source= images[currentImage];
                                                       
                                                       
                                                       
                                                        var t:Timer = new Timer(2000);
                                                        t.addEventListener(TimerEvent.TIMER, changeTimer);
                                                       
                                                  
                                                       
                               }
                             
                              private function changeTimer(evt:TimerEvent):void{
                                  currentImage +=1;
                                  if (currentImage >= images.length)
                                  currentImage =0;
                                 
                                          
                                 
                                 
                              }

                   

                              private function startTimer():void {
                                  baseTimer = getTimer();
                                  t.start();
                                 
                              }
                             
                              private function stopTimer():void {
                                  t.stop();
                                 
                                  }

                  private function setTotalClicks():void  {
                                 
                                Clicks.text = "" + totalClicks;
                                totalClicks++;
                    }
                          
                          
                  public function itemClickHandler(event:MenuEvent):void {
                                  Alert.show("Menu label: " + event.label
                                      + "  \n menu item index within parent menu: " + event.index);
                              }
                         

                   

                  private function Image():void {
                                         
                  gameArray.push("assets/pat.jpg");
                  gameArray.push("assets/hunt.jpg");
                  gameArray.push("assets/ger.jpg");
                  gameArray.push("assets/ars.jpg");
                  gameArray.push("assets/lamps.jpg");
                  gameArray.push("assets/kaka.jpg");
                  gameArray.push("assets/torres.jpg");
                  gameArray.push("assets/vidic.jpg");

                   

                  gameArray.push(test.source);
                  gameArray.push(tests.source);
                  gameArray.push(kaka.source);
                  gameArray.push(kaka1.source);
                  gameArray.push(vidic.source);
                  gameArray.push(vidic1.source);
                  gameArray.push(gerrard.source);
                  gameArray.push(gerrard1.source);
                  gameArray.push(ars.source);
                  gameArray.push(ars1.source);
                  gameArray.push(lampard.source);
                  gameArray.push(lampard1.source);
                  gameArray.push(hunt.source);
                  gameArray.push(hunt1.source);
                  gameArray.push(pato.source);
                  gameArray.push(pato1.source);

                   


                  }

                   

                   

                   

                  ]]>
                  </mx:Script>

                   

                   

                   

                      <mx:Image id="test" x="480" y="177" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="test.source = 'assets/torres.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="tests" x="623" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="tests.source = 'assets/torres.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="kaka" x="335" y="311" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="kaka.source = 'assets/kaka.JPEG'; startTimer(); flip.send(); setTotalClicks();"/>
                     
                      <mx:Image id="kaka1" x="765" y="177" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="kaka1.source = 'assets/kaka.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="vidic" x="335" y="177" width="100" height="100"  source="assets/card_2.JPG" scaleContent="false" click="vidic.source = 'assets/vidic.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="vidic1" x="765" y="311" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="vidic1.source = 'assets/vidic.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="gerrard" x="335" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="gerrard.source = 'assets/ger.JPG';setTotalClicks();"/>
                     
                      <mx:Image id="gerrard1" x="480" y="311" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="gerrard1.source = 'assets/ger.JPG';setTotalClicks();"/>
                     
                      <mx:Image id="ars" x="623" y="311" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="ars.source = 'assets/ars.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="ars1" x="623" y="563" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="ars1.source = 'assets/ars.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="lampard" x="765" y="563" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="lampard.source = 'assets/lampard.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="lampard1" x="480" y="563" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="lampard1.source = 'assets/lampard.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="hunt" x="765" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="hunt.source = 'assets/hunt.JPEG';setTotalClicks();"/>
                     
                      <mx:Image id="pato" x="480" y="438" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="pato.source = 'assets/pat.JPG';"/>
                     
                      <mx:Image id="pato1" x="623" y="177" width="100" height="100" source="assets/card_2.JPG"  scaleContent="false" click="pato1.source = 'assets/pat.JPG';"/>
                     
                      <mx:Image id="hunt1" x="335" y="563" width="100" height="100" source="assets/card_2.JPG" scaleContent="false" click="hunt1.source = 'assets/hunt.JPEG';" themeColor="#00FF18" alpha="1.0"/>
                     
                      <mx:Panel x="206" y="10" width="668" height="103" layout="absolute" borderColor="#FE0876" fontSize="31" alpha="1.0" cornerRadius="0" backgroundColor="#FE0876" color="#2D8CCF" themeColor="#2DE9C3" backgroundAlpha="0.97">
                          <mx:Label x="238.5" y="0" text="Match It!" height="63" width="291" color="#0B6EE9"/>
                      </mx:Panel>
                      <mx:Label id="counter" fontSize="30" x="882" y="28" width="237" height="85"/>
                      <mx:Label id="Clicks" x="158" y="121" width="164" height="29" fontSize="17"/>
                      <mx:Button x="33" y="580" label="Main Menu" width="150" height="30" fontSize="20" fontWeight="bold"/>
                      <mx:Button x="69" y="628" label="Exit" fontSize="20"/>
                      <mx:Text x="10" y="121" text="Total Clicks:" width="140" height="29" fontSize="18"/>
                     
                  </mx:Application>