8 Replies Latest reply on Sep 1, 2009 2:13 AM by shaylee tan

    Comparing image Array(if-else)

    shaylee tan Level 1

      Hi all. I am doing a memory game. Anyone can give me an idea how to compare arrays of the images? For the memory game, i need to match 2 cards of identical image together. If the 1st image is clicked, it will flipped open. When the 2nd image is clicked, it will flipped open. But if both images if different, both will flipped back to the original. However,if both cards flipped are of the same images, both will stay opened. I am new in flex. Can someone tell me how to code it? I am at my wits end  Thanks for the help u advance. Your help will be highly appreciated

       

       

      Currently i am hardcoding the source codes for the images.

       

      <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';"/>

       

      For the click="test.source = 'assets/torres.JPEG';"/>,  it means when i click the image, it change to another image source.

       

       

       

      I did the arrays for storing those images. Is this the correct way?

       

      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: Comparing image Array(if-else)
          Barna Biro Level 3

          Try to put your hands on this book: http://www.amazon.com/ActionScript-3-0-Game-Programming-University/dp/0789737027 You can visit their website here: http://flashgameu.com/ ( maybe download the source code and take a look at it ).

           

          You'll find example on this exact game and also many more.

          • 2. Re: Comparing image Array(if-else)
            shaylee tan Level 1

            Sorry to say, but this will not help much. Any other help you can provide me?

            • 3. Re: Comparing image Array(if-else)
              _Natasha_ Level 4

              Hi,

              I think REpeater component is what you need.

               

              http://livedocs.adobe.com/flex/3/langref/mx/core/Repeater.html

               

              In data source you can create Objects with three fields: commons src, src for picture and current src (is one of the previous values).

              Notes that you need ArrayCollection as a dataProvider to automaticaly change pictures on changing properties.

              • 4. Re: Comparing image Array(if-else)
                shaylee tan Level 1

                Thanks natasha anyway . But i am not sure whether this will helps. Can i ask u what are repeaters? i dont really understand what it means. Thanks for your help =)

                • 5. Re: Comparing image Array(if-else)
                  _Natasha_ Level 4

                  Repeater is very useful thing. I give a link to docs.

                  This is an example with source code: http://livedocs.adobe.com/flex/3/langref/mx/core/Repeater.html#includeExamplesSummary

                   

                  This component create components with special properties from dataProvider.

                   

                  You need something like these:

                   

                  [Bindable]

                  private var dp:ArrayCollection = [{currSrc:"assets/pat.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/pat.jpg"},

                  {currSrc:"assets/hunt.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/hunt.jpg"}];

                   

                   

                  <mx:Tile direction="horizontal" borderStyle="inset"              horizontalGap="10" verticalGap="15"             paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

                  <mx:Repeater id="rp" dataProvider="{dp}">

                  <mx:Image id="test" x="480" y="177" width="100" height="100" source="rp.currentItem.currSrc" scaleContent="false" click="event.currentTarget.getRepeaterItem().currSrc = event.currentTarget.getRepeaterItem().torresSrc"/>

                  </mx:Repeater>

                  </mx:Tile>

                  • 6. Re: Comparing image Array(if-else)
                    shaylee tan Level 1

                    Hi Natasha. After using the sample codes you have provided, i am still getting errors. For this part,

                     

                    [Bindable]

                    private var dp:ArrayCollection = [{currSrc:"assets/pat.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/pat.jpg"},

                    {currSrc:"assets/hunt.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/hunt.jpg"}];

                     

                    I am getting error 1067: Implicit coercion of a value of type array to an unrelated type mx.collections.ArrayCollection.

                     

                     

                    Can you kindly help me debug it? Thanks for your help

                    • 7. Re: Comparing image Array(if-else)
                      _Natasha_ Level 4

                      [Bindable]

                      private var dp_s:Array = [{currSrc:"assets/pat.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/pat.jpg"},

                      {currSrc:"assets/hunt.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/hunt.jpg"}];

                      private var dp:ArrayCollection = new ArrayCollection(dp_s);

                      • 8. Re: Comparing image Array(if-else)
                        shaylee tan Level 1

                        Hi Natasha.Sorry to bother you again. I have tried out sample code that you have provided. However, it seems that when i run the application the image doesnt show any pictures.  Why is this so? Thanks for your help again

                         

                         

                         

                        <?xml version = '1.0' encoding = 'ISO-8859-1'?>
                        <mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>

                         


                        <mx:Script>
                        <![CDATA[

                         


                        import mx.collections.ArrayCollection;

                         

                        [Bindable]

                         

                        private var dp_s:Array = [{currSrc:"assets/pat.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/pat.jpg"},

                         

                        {currSrc:"assets/hunt.jpg", torresSrc:"assets/torres.JPEG", imageScr:"assets/hunt.jpg"}];

                         

                        private var dp:ArrayCollection = new ArrayCollection(dp_s);  

                         


                        ]]>
                        </mx:Script>

                         

                         

                         

                        <mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="15" paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

                         

                        <mx:Repeater id="rp" dataProvider="{dp_s}">

                         

                        <mx:Image id="test" x="480" y="177" width="100" height="100" source="rp.currentItem.currSrc" scaleContent="false" click="event.currentTarget.getRepeaterItem().currSrc = event.currentTarget.getRepeaterItem().torresSrc"/>

                         

                        </mx:Repeater>

                         

                        </mx:Tile>
                        </mx:Application>