CatTyping Challenge - AS3 Side Project

The game

CatTyping Challenge is a typing game I created back in July 2012. The game presents a list of words for the player to type. The objective of the game is to type as much of these words as you can minimizing spelling mistakes. You even have to take punctuation into account. There are even some words in Spanish. With accents.

As I always say, Try it Now! before you continue reading. Thanks.

You can also check out the source code at Github. Additional information can be found in the Technical details section bellow.

The motivation

I have very little memory where this idea came from. It do remember it was one of those surprise-gift projects of mine. I think it was born out of a conversation with Mar and Xime, about typing courses. I remember assisting to one of those when I was about 13. I really loved it!

There was also a super cool typing web application that I used a lot. I totally forgot the URL, though. But there was something missing. The missing elements were cats. And lots of them!

Of course, I could try to karma-whore the game on Reddit. Never did it, though.

The game

In this game the player has 30 seconds to type as much words presented as possible. Words are presented line by line. When all the words of a line are completed, a new line appears for the player to type.

The catch of the game is that whenever the player types a word correctly, the photo of a cute kitty is added on stage. But when a player makes a mistake then three kittens are removed at once. Life is tough.

Here's a screenshot of the playing screen. Nothing fancy:

The main elements in this game are:

1. The list of words to type.
2. Time remaining.
3. Counter with words typed correctly.
4. Counter with words typed wrong.
5. The input area

While letters are being typed, the game will display if the current word is being typed correctly or not.
A word is considered written when the spacebar is pressed.

When time runs out you will see something like this:

Choosing green for the text above was not the greatest of the ideas.

Green words are the ones typed correctly. Red words are the ones typed incorrectly. Black words are the ones that have not been typed yet.

WPM means Words per Minute. 70% is the typing accuracy, calculated as OK words divided by OK + Not OK words, multiplied by 100.

In the lower part of the image there is a counter for the amount of kitty images onscreen and the amount of kitties that have run away (fallen). It was supposed to be something cute.

Technical details

It might look strange that the very first thing you see when launching the application is that it asks the player to "click somewhere!".

There is no real need to click it.

The reason for this is to give focus to the application. By default, the embedded Flash movie will not have focus. Every key pressed by the user will be captured by the containing page. Not by the Flash movie.

I used TweenLite for the kitten animation. Again, it's just a very simple and easy-to-use interpolation library.

For example, to make the kittens appear, the following code is used:

What is going on in the previous code is pretty self-explained. 

But because I feel like writing, here's some additional explanation:

• A random bitmap is selected and added as a child. This class, Kitty, extends from Sprite.
• Horizontal and Vertical positions (x & y) are set randomly, anywhere on the stage. A small margin of 100 pixels is taken off the stage to account for the bitmap's dimensions.
• A starting transparency value is set (0.25).
• A starting size value is set (1.4).
• A starting rotation is randomly set. This value is in degrees!
• An end rotation is randomly set. This value will be passed to TweenLite as a parameter.
• TweenLite's .to() method is called. This method takes an object as its first argument (this in this case), then a Number value for the time it takes to perform the interpolation (1 second) and finally an optional "properties object".
• In this case the properties object contains all the final values for scaleX, scaleY (value of 1), and ending rotation value, alpha value (0.5) and a function pointer for when the interpolation ends (myOnCompleteFunction).
• Actually, after looking at the code I realized that the onComplete function was totally useless. I think it is still there because of some old code that got deprecated. Well, shit happens.

For the ending fireworks Flint particle engine was used. I'll do some dissecting some other time. Maybe. 

About the input of words, I attached an Event.CHANGE to the input TextField. In this way I do not have to be checking the keys pressed by the player. I only need to check the newly added character to the textfield. This character will be "formated". That is, it may be upper or lower cased, with or without an accent or any other strange symbol, etc.

If you are getting the game's source code from github, you will have to download both TweenLite and Flint particle engine library. Here is a screenshot of how my project folders look like with those folders included:

If you open the project's properties, class paths tab you fill find the following code sources:

Disclaimer

All of the images in the game, this post, and all my other posts have been taken from images.google.com. I do not claim to own the rights of any of these pictures. Expect for the ones I do actually own. You know, stealing other peoples kittens is no joke.

Great site, I just wish I had more experience with it

Afterthoughts

Can the game be improved? Hell yeah.
Will I improve it any time soon? Nope.
Why? Well, first of all it achieved its objective. In software development, you can always improve whatever is that you are creating. From the very beginning it is very important to set a clear objective of what you want to achieve. If not, you will be involved in a never-ending development life cycle. And that is no good for you nor your kittens.