8 Replies Latest reply: Sep 25, 2013 5:56 PM by asydd RSS

    Word game: Assigning letter values to movie clips

    Charine -FB buggoop Community Member

      Hi

       

      I want to make a word game for kids.

       

      A spelling word will appear on the screen (from arrays that I will set up) and then letters will "fall" from the top. The player will have to clicl on the correct letter to get points. In other words:

       

      if letters in word == letter tile clicked on

          then give points

       

      I have movie clips in individual .as classes for each letter tile. My question is - how do I define the letter tile Movie Clip as a specific letter in the alphabet for my code to be able to check if it is correct?

       

      Here is the .as file one of the letter tiles I have as an example:

       

      package

      {

          import flash.display.MovieClip;

             

          public class T extends MovieClip

            {

                  public function T()

                     {

                      // constructor code

                      }

              }

         }

       

      Thanks

      Charine

        • 1. Re: Word game: Assigning letter values to movie clips
          Ned Murphy MVP

          You can assign a variable to the object either dynamically (since it is a MovieClip object) or you can formally build that variable into the class and assign it a value.  THen when you want to check it you just test that object's variable (property) to see if it fits the solution.

          • 2. Re: Word game: Assigning letter values to movie clips
            Charine -FB buggoop Community Member

            Thanks Ned,

             

            So in the class above. - how do I build such a variable to say that this class represents the letter t in the alphabet?

             

            I tried to add the var to the .as class file made especially from the Movie clip of "T".

            I thought that this would do - but I get a this of error code:

             

            C:\Users\Charine\Creative Cloud Files\BugGoopFS\Classes\T.as, Line 91026: Constructor functions must be instance methods.

             

            Here is letter T's .as file that gives me the error

            package  {

             

                import flash.display.MovieClip;

                import flash.text.*;

             

                public class T extends MovieClip

                {

                   public var T:String = "t";

             

                    public function T()

                    {

                        // constructor code

             

                    }

                }

             

            }

            • 3. Re: Word game: Assigning letter values to movie clips
              Ned Murphy MVP

              You do not want to name the property the same thing as the class.  You want to name it something that will be the same for all of your letter classes so that you can test for it generically.  Something like the following would be more appropriate....

               

                    public var letter:String = "t";

              • 4. Re: Word game: Assigning letter values to movie clips
                Charine -FB buggoop Community Member

                Thank you Ned,

                This worked out perfectly.

                 

                Regards,

                Charine

                • 5. Re: Word game: Assigning letter values to movie clips
                  Andrei1 Community Member

                  Here is one of the basic ways to implement this kind of game.

                   

                  There are 4 classes involved - SpellingGame, SpellingLetter, LettersAnimator, Shuffler. Class SpellingGame is a document class. This is a pure AS3 solution - no additional timeline visuals or coding needed.

                   

                  Class SpellingGame

                   

                  package
                  {
                            import flash.display.Sprite;
                            import flash.events.Event;
                            import flash.events.MouseEvent;
                            import flash.geom.Rectangle;
                            import flash.text.TextField;
                            import flash.text.TextFieldAutoSize;
                            import flash.text.TextFormat;
                  
                            public class SpellingGame extends Sprite
                            {
                                      private var words:Array = ["dog", "cat", "apple", "orange"];
                                      private var guessWord:String;
                                      private var wordDisplay:TextField;
                                      private var _score:int = 0;
                                      private var scoreDisplay:TextField;
                                      private var letters:LettersAnimator;
                                      private var playButton:Sprite;
                                      public function SpellingGame()
                                      {
                                                init();
                                      }
                    
                                      private function init():void
                                      {
                                                drawWord();
                                                drawScore();
                                                drawAnimator();
                                                drawPlayButton();
                                      }
                    
                                      private function drawPlayButton():void 
                                      {
                                                var buttonLabel:TextField = new TextField();
                                                buttonLabel.multiline = buttonLabel.wordWrap = false;
                                                buttonLabel.defaultTextFormat = new TextFormat("Arial", 12, 0xffffff);
                                                buttonLabel.autoSize = TextFieldAutoSize.LEFT;
                                                buttonLabel.text = "play again";
                                                var margin:int = buttonLabel.x = buttonLabel.y = 4;
                                                playButton = new Sprite();
                                                playButton.mouseChildren = false;
                                                playButton.buttonMode = playButton.useHandCursor = true;
                                                playButton.graphics.beginFill(0x808040);
                                                playButton.graphics.drawRoundRect(0, 0, buttonLabel.width + margin * 2, buttonLabel.height + margin * 2, 10);
                                                playButton.addChild(buttonLabel);
                    
                                                playButton.x = wordDisplay.x;
                                                playButton.y = 200;
                    
                                                addChild(playButton);
                    
                                                playButton.addEventListener(MouseEvent.CLICK, onPlayClick);
                                                playButton.visible = false;
                    
                                      }
                    
                                      private function onPlayClick(e:MouseEvent):void 
                                      {
                                                score = 0;
                                                drawWord();
                                                letters.start();
                                                playButton.visible = false;
                                      }
                    
                                      private function drawScore():void 
                                      {
                                                scoreDisplay = new TextField();
                                                scoreDisplay.multiline = true;
                                                wordDisplay.wordWrap = false;
                                                scoreDisplay.defaultTextFormat = new TextFormat("Arial", 16);
                                                scoreDisplay.autoSize = TextFieldAutoSize.LEFT;
                                                scoreDisplay.text = "Score: 0";
                                                addChild(scoreDisplay);
                                                scoreDisplay.x = wordDisplay.x;
                                                scoreDisplay.y = wordDisplay.y + wordDisplay.height + 10;
                    
                                      }
                    
                                      private function drawAnimator():void 
                                      {
                                                letters = new LettersAnimator(new Rectangle(0, 0, stage.stageWidth - wordDisplay.width - 10, stage.stageHeight));
                                                letters.x = wordDisplay.x + wordDisplay.width + 10
                                                letters.addEventListener(SpellingLetter.ANSWER, onAnswer, true);
                                                letters.addEventListener(LettersAnimator.FINISHED, onFinished);
                                                addChild(letters);
                                                letters.start();
                                      }
                    
                                      private function onFinished(e:Event):void 
                                      {
                                                if (score != guessWord.length)
                                                          scoreDisplay.text = "Sorry, you have lost!";
                    
                                                playButton.visible = true;
                                      }
                    
                                      private function onAnswer(e:Event):void 
                                      {
                                                var re:RegExp = new RegExp(SpellingLetter(e.target).letter, "gi");
                                                var obj:Object = re.exec(guessWord);
                    
                                                while (obj) {
                                                          wordDisplay.setTextFormat(new TextFormat("Arial", 16, 0xff0000, true), obj.index);
                                                          obj = re.exec(guessWord);
                                                }
                                                score += guessWord.match(re).length;
                                      }
                  
                  
                                      private function drawWord():void
                                      {
                                                if (!wordDisplay) {
                                                          wordDisplay = new TextField();
                                                          wordDisplay.multiline = wordDisplay.wordWrap = false;
                                                          wordDisplay.defaultTextFormat = new TextFormat("Arial", 16);
                                                          wordDisplay.autoSize = TextFieldAutoSize.LEFT;
                                                          wordDisplay.x = wordDisplay.y = 10;
                                                          addChild(wordDisplay);
                                                }
                                                Shuffler.shuffle(words);
                                                wordDisplay.text = guessWord = words[0];
                                      }
                    
                                      private function get score():int 
                                      {
                                                return _score;
                                      }
                    
                                      private function set score(value:int):void 
                                      {
                                                _score = value;
                                                scoreDisplay.text = "Score: " + value;
                                                if (score == guessWord.length) {
                                                          words.shift();
                                                          scoreDisplay.text = "YOU WON!";
                                                          letters.stop();
                                                          playButton.visible = true;
                                                }
                                      }
                    
                            }
                  
                  }
                  
                  

                   

                  Class SpellingLetter

                   

                  package
                  {
                            import flash.display.Sprite;
                            import flash.events.Event;
                            import flash.events.MouseEvent;
                            import flash.text.TextField;
                            import flash.text.TextFieldAutoSize;
                            import flash.text.TextFormat;
                  
                  
                            public class SpellingLetter extends Sprite
                            {
                                      public static const ANSWER:String = "answer";
                                      public var letter:String;
                                      private var textField:TextField;
                                      private var color:uint;
                                      private var side:Number = 30;
                                      public function SpellingLetter(letter:String) 
                                      {
                                                this.letter = letter;
                                                addEventListener(Event.ADDED_TO_STAGE, init);
                                      }
                    
                                      private function init(e:Event):void 
                                      {
                                                addEventListener(MouseEvent.CLICK, onClick, false, 1);
                                                buttonMode = useHandCursor = true;
                                                color = 0xffffff * Math.random();
                                                mouseChildren = false;
                                                destroy();
                                                drawText();
                                                drawBackground();
                                      }
                    
                                      private function onClick(e:MouseEvent):void 
                                      {
                                                dispatchEvent(new Event(ANSWER));
                                      }
                    
                                      private function drawBackground():void 
                                      {
                                                graphics.lineStyle(1, color, 1, true);
                                                graphics.beginFill(0xffffff - color);
                                                graphics.drawRoundRect(0, 0, side, side, 10);
                                      }
                    
                                      private function drawText():void 
                                      {
                                                textField = new TextField();
                                                textField.defaultTextFormat = new TextFormat("Arial", 18, color);
                                                textField.multiline = textField.wordWrap = false;
                                                textField.autoSize = TextFieldAutoSize.LEFT;
                                                textField.text = letter.toUpperCase();
                                                addChild(textField);
                                                textField.x = (side - textField.width) * .5;
                                                textField.y = (side - textField.height) * .5;
                                      }
                    
                                      public function destroy():void {
                                                if (textField) {
                                                          removeChild(textField);
                                                }
                                                graphics.clear();
                                      }
                    
                            }
                  
                  }
                  
                  

                   

                  Class LettersAnimator

                   

                  package
                  {
                            import flash.display.Sprite;
                            import flash.events.Event;
                            import flash.events.MouseEvent;
                            import flash.events.TimerEvent;
                            import flash.geom.Rectangle;
                            import flash.utils.Timer;
                    
                            public class LettersAnimator extends Sprite
                            {
                                      public static const FINISHED:String = "finished";
                                      private var letters:Array;
                                      private var movingLetters:Array;
                                      private var timer:Timer = new Timer(1000);
                                      private var bounds:Rectangle;
                    
                                      public function LettersAnimator(bounds:Rectangle)
                                      {
                                                this.bounds = bounds;
                                      }
                    
                                      private function init():void
                                      {
                                                letters = [];
                                                for (var i:int = 65; i < 91; i++)
                                                          letters.push(new SpellingLetter(String.fromCharCode(i)));
                    
                                                Shuffler.shuffle(letters);
                                      }
                    
                                      public function start():void
                                      {
                                                init();
                                                movingLetters = [];
                                                timer.addEventListener(TimerEvent.TIMER, drawLetter);
                                                timer.start();
                                                addEventListener(Event.ENTER_FRAME, onFrame);
                                      }
                    
                                      public function stop():void
                                      {
                                                removeEventListener(Event.ENTER_FRAME, onFrame);
                                                while (movingLetters.length > 0)
                                                {
                                                          var letter:SpellingLetter = movingLetters.shift();
                                                          if (contains(letter))
                                                                    removeChild(letter);
                                                }
                                                dispatchEvent(new Event(FINISHED));
                                      }
                    
                                      private function onFrame(e:Event):void
                                      {
                                                for each (var letter:SpellingLetter in movingLetters)
                                                          letter.y += 1;
                    
                                                if (letter && letter.y > bounds.height)
                                                          stop();
                                      }
                    
                                      private function drawLetter(e:TimerEvent):void
                                      {
                                                var letter:SpellingLetter = letters.shift();
                                                letter.addEventListener(MouseEvent.CLICK, onClick);
                                                letter.cacheAsBitmap = true;
                                                addChild(letter);
                                                letter.y = -letter.height - 6;
                                                letter.x = (bounds.width - letter.width) * Math.random();
                                                movingLetters.push(letter);
                                                if (letters.length == 0)
                                                          timer.stop();
                                      }
                    
                                      private function onClick(e:MouseEvent):void
                                      {
                                                var letter:SpellingLetter = e.currentTarget as SpellingLetter;
                                                movingLetters.splice(movingLetters.indexOf(letter), 1);
                                                if (contains(letter))
                                                          removeChild(letter);
                                      }
                    
                            }
                  
                  
                  }
                  
                  

                   

                  Class Shuffler

                   

                  package
                  {
                    
                            public class Shuffler extends Object
                            {
                    
                                      public static function shuffle(a:Array):void
                                      {
                                                for (var i:int = a.length - 1; i >= 0; i--)
                                                {
                                                          var r:int = Math.floor(Math.random() * (i + 1));
                                                          var t:Object = a[r];
                                                          a[r] = a[i];
                                                          a[i] = t;
                                                }
                                      }
                    
                            }
                  
                  
                  }
                  
                  
                  • 6. Re: Word game: Assigning letter values to movie clips
                    Charine -FB buggoop Community Member

                    Hi Andrei1,

                    This is awesome!! Thank you so much for sharing. I'll be referencing back to this often.

                     

                    Regards

                    Charine

                    • 7. Re: Word game: Assigning letter values to movie clips
                      Andrei1 Community Member

                      Hi Charine,

                       

                      I am happy you find it useful.

                      • 8. Re: Word game: Assigning letter values to movie clips
                        asydd Community Member

                        Please don't be afraid to do this again... This is brilliant, took me a guess on how to implement it, and it shows me once more how much I don't know (thanks - needed that) but this has given me a greater on class programming etc etc and some particular things I have been putting lots of hours to without prior progress. Very good, thank you.