Build a Classic Snake Game in ActionScript 2.0

Well, we're approaching the end of 2009, and as ever, these final days in December are a time for reflection, memories and nostalgia. At Activetuts+ we endeavor to be forward-thinking, moving with the times and embracing technology. Saying that, it's also important we appeal to all our readers, so for those of you who haven't made the jump yet, let's finish off the year with a bit of ActionScript 2.0!

In this tutorial, you'll create a simple AS2 snake game.

Step 1: Setting up the File

Start Flash, and click Create New: Flash File (Actionscript 2.0). You can set the stage size to whatever pleases you - I've set mine to 500 x 350. I do advise you to set the framerate to 30fps.

Now, you can either decide to follow this step and draw the required movieclips yourself, or you can skip ahead and use the ones I created. If you want to use the ones I created you can find them in the source file. Just add them to the library and drag them onto the stage. If you are going to draw your own: you don't have to literally draw the same as I did, but do make sure you stick to the sizes.

Step 2: Create the Snake Pit

The first thing we'll create is the pit for the snake to roam around. Create a rectangle of 400 x 250 and convert it to a movieclip. Make sure you pay attention to the registration point; make it top-left.

Make sure you give the snake pit the instance name snakepit and align it slightly above the center of the stage (so that we can add text below it later, without messing up the aesthetics).

Step 3: Create the Snake's Head

Draw a square (perhaps with rounded corners) without a border (size 25 x 25) and copy it so you have 2 exactly the same. Convert one of them to a movieclip. Again, pay attention to the top-left registration.

Make sure you give it the instance name bodypart0 and double check that its size is 25 x 25.

Step 4: Snake's Head ActionScript

Enter the "head" movieclip. Once inside it, add this line of code to the first and only frame:

1
2	stop();

Now, draw a little face on the snake's head, so you can tell it apart from other bodyparts.

Step 5: Additional Face

Add a second frame to the "head" movieclip, and on this frame, draw a sad or dead face.

Step 6: Create the Other Bodyparts

Remember the duplicate square you created in step 3? We're going to convert it to a movieclip now. Pay attention to the registration point again.

Make sure you give it the instance name bodypart.

Step 7: Create the Score Field

Create a dynamic text field below the right corner of the snake pit. Make sure you set the variable to score. Also, make sure the field is wide enough for several characters, and aligned to the right. The rest of the settings can be set according to your own style - I used Tahoma 24 Bold.

Step 8: Embedding the Font

Since it's a dynamic text field, we'll have to embed the font. Click the embed button in the properties panel (where you just defined the variable and text style).

You'll see the popup shown below. Make sure you select Numerals [0..9].

Step 9: Create the Food

Draw a blue circle without a border, size 25 x 25, and then erase the center using the eraser tool. Now select the circle that remains and convert it to a movieclip. Alternatively, you can design a piece of food for yourself, as long as it remains 25 x 25.

Step 10: Food Instance Name

Give the food a suprising instance name of food. Double check that its size is 25 x 25.

Step 11: Adding Instructions

Left-below the snake pit seemed like a good place to put some pointers. Simply type the static text "Use the arrow keys to move" here. I know, arrow keys don't function yet, but we'll get to that shortly. I promise!

Step 12: Creating the Popup

Draw a white square (somewhere outside the stage, for now) and add the text "You died!" to it. This is the popup we'll display after someone has lost a game.

Convert it to a movieclip, and give it the instance name popup as well. For alignment purposes, I've set the registration point to the center.

Step 13: Score

Double click on the popup you just created to enter it. Once inside it, create a dynamic text field (variable = score) and a button reading the text Play Again.

The button should be given the instance name againbutton.

Inside the button, you can create a slightly darker "Over" and even darker "Down" state.

Congratulations, you have created all the visual objects required for the snake game. Now over to the code!

Step 14: newgame Function

Before I throw a chunk of code at you, I'll tell you what to do with it. All the code in this tutorial goes on the first and only frame of your movie. No need to attach it to buttons or anything. Now, have a look at this piece of ActionScript.

Editor's Note: Sorry about this folks, the code syntax highlighter doesn't want to display this particular chunk of ActionScript in FireFox. Take a look at the code here.

In a nutshell, this bit of code does the following. First, the original bodypart is made invisible - we'll use duplicates soon. Some default values are (re)set, any duplicates left from the previous game are deleted. In the do { } while() loop, the food and bodypart0 (the head) are given an x and y coordinate. If this matches (so they are at the exact same spot), they are given a new coordinate, until we no longer have a match. Then, the arrays are set up in which we'll contain the bodyparts' x and y coordinates.

Step 15: Grabbing the Direction

In this bit of code, we create a keyListener object, which we attach to Key, which represents the keyboard. Whenever a key is pressed, the onKeyDown function is triggered. From the getCode() function, we'll derive which key was pressed and then define the direction according to this. We'll store this in the direction variable for later use. Remember: all the code of this tutorial goes on the first and only frame of your movie.


		keyListener = new Object();
		keyListener.onKeyDown = function () {
			keycode = Key.getCode()
			if (keycode == 37) {
				direction = 'left'
			}
			else if (keycode == 38) {
				direction = 'up'
			}
			else if (keycode == 39) {
				direction = 'right'
			}
			else if (keycode == 40) {
				direction = 'down'
			}
		};
		Key.addListener(keyListener);

Step 16: onEnterFrame Function

The function down here is a big one. It's executed on every frame, but only really does something every 5 frames. It checks if the snake isn't moving outside the box, and then moves all the bodyparts along to their new position. It then checks if the food is there too, and then eats it using the eat() function we'll discuss later. Then, it checks if the snake is smashing into a wall, and lastly it checks if the snake bites itself in the tail. All these functions will be added soon (insideSnake(), dead(), etcetera). Remember: all the code of this tutorial goes on the first and only frame of your movie.


		this.onEnterFrame = function () {
			if (game) {
				if (framecount/5 == Math.ceil(framecount/5)) {
					if (!(bodypart0._y <= snakepit._y && direction == 'up') && !(bodypart0._y+bodypart0._height >= snakepit._y+snakepit._height-2 && direction=='down') && !(bodypart0._x+bodypart0._width >= snakepit._x+snakepit._width - 2 && direction =='right') && !(bodypart0._x <= snakepit._x && direction == 'left'))
					{
						bodypartsy[0] = bodypart0._y;
						bodypartsx[0] = bodypart0._x;
						for (i=bodypartsy.length-1;i > 0; i--) {
							eval('bodypart'+i)._y = bodypartsy[(i-1)]
							eval('bodypart'+i)._x = bodypartsx[(i-1)]
							bodypartsy[i] = eval('bodypart'+i)._y
							bodypartsx[i] = eval('bodypart'+i)._x
						}
					}
					if (food._x == bodypart0._x && food._y == bodypart0._y) {
						eat()
					}
					if (direction) {
						if (direction == 'up') {
							if (bodypart0._y <= snakepit._y) {
								dead()
							}
							else {
								bodypart0._y-= bodypart0._width
							}
						}
						else if (direction == 'down') {
							if (bodypart0._y+bodypart0._height >= snakepit._y+snakepit._height-2) {
								dead()
							}
							else {
								bodypart0._y+= bodypart0._width
							}
						}
						else if (direction == 'right') {
							if (bodypart0._x+bodypart0._width >= snakepit._x+snakepit._width - 2) {
								dead()
							}
							else {
								bodypart0._x+= bodypart0._width
							}
						}
						else if (direction == 'left') {
							if (bodypart0._x <= snakepit._x) {
								dead()
							}
							else {
								bodypart0._x-= bodypart0._width
							}
						}
					}
					if (game) {
						if (insideSnake(bodypart0._x,bodypart0._y,true)) {
							dead()
						}
					}
				}
				framecount++
			}
		}

Step 17: dead() Function

This one's nice and easy. It executes the actions that need to be taken when the snake dies: the score needs to be defined in the popup, the popup shown, the snake's dead-face shown and the game-variable set to false (as the game ended).


		function dead() {
			popup.score = 'score: '+(bodypartsx.length-1)
			popup.swapDepths(this.getNextHighestDepth())
			popup._visible = true
			bodypart0.gotoAndStop(2)
			game = false;
		}

Step 18: eat() Function

The function below is triggered in the onEnterFrame function we discussed earlier, when the food is picked up. It first duplicates a part of the snake's body, then positions it at the spot of the last bodypart (so that it'll join in the line on the next frame). Its coordinates are added to the coordinate containing arrays, and the food is repositioned (somewhere not inside the snake!). Also, the score is updated.


		function eat() {
			duplicateMovieClip(bodypart,'bodypart'+bodypartsy.length,this.getNextHighestDepth())
			bodypart0.swapDepths(this.getNextHighestDepth())
			eval('bodypart'+bodypartsy.length)._y = eval('bodypart'+(bodypartsy.length-1))._y
			eval('bodypart'+bodypartsx.length)._x = eval('bodypart'+(bodypartsy.length-1))._x
			bodypartsy.push(eval('bodypart'+bodypartsy.length)._y)
			bodypartsx.push(eval('bodypart'+bodypartsx.length)._x)
			do {
				food._x = snakepit._x + Math.floor(((snakepit._width-food._width)/food._width)*Math.random())*food._width
				food._y = snakepit._y + Math.floor(((snakepit._height-food._height)/food._height)*Math.random())*food._height
			} while(insideSnake(food._x,food._y));
			score = bodypartsx.length-1
		}

Step 19: insideSnake() Function

This function merely checks if the inputted coordinates match any of the coordinates of the snake's bodyparts. If skiphead is set to true, it is allowed to match the head's coordinates (when checking if the head bites its tail, this comes in handy).


				function insideSnake(xneedle, yneedle,skiphead) {
			if (skiphead) { startat = 1; }
			else { startat = 0; }
			for (q=startat; q<bodypartsx.length; q++) {
				if (bodypartsx[q] == xneedle) {
					if (bodypartsy[q] == yneedle) {
						return true;
					}
				}
			}
			return false;
		}

Step 20: The Popup Button

As a last bit of code; we still have to add an on-release function to the button inside the popup! It'll trigger the newgame() function we discussed earlier, when clicked. Remember: all the code of this tutorial goes on the first and only frame of your movie - including this bit about the button!

1
2	popup.againbutton.onRelease = function() {
3	newgame()
4	}

Step 21: Wrapping it All Up

I'm sure you've done this before, but now is the time: hit Ctrl+Enter (or Cmd+Enter on a Mac) to compile the swf file and test your game. It should now be fully functional. Enjoy!

Conclusion

If you made it all the way here; congratulations! You created quite an addictive game, in AS2! Of course, a game is never finished. There is always room for creative improvement.

If you have any questions or suggestions, feel free to comment below. Also, I'm quite curious to see files produced as a result of this tutorial - I'd love to see a link in the comments!

Thanks for reading my tutorial. I hope you enjoyed it as much as I did.