Activity 1: Snake Game

Intent

Students will be introduced to the Flash programming environment through the creation of a snake game. They will examine the code and make modifications.

Criteria

Students will complete the game as outlined in the tutorial. In doing so they will learn to:

  • Create a flash document of a prescribed size and frame rate.
  • Use the property inspector to draw simple objects to exacting dimensions.
  • add code to a document
  • alter code to customize a game

Task

  1. Start by opening Flash and creating an Actionscript 2.0 document that is  300px wide and  350px high with a frame rate of 12.
  2. Select the Rectangle Tool and draw a square on the stage.
  3. Use the Selection Tool to double click on the square and in the Property Inspector set the following:
    W: 300
    H: 300
    X: 0
    Y: 0
  4. Change the colors of the square. The square will become the background of your snake game. 
  5. Select the Text Tool and in the Property Inspector set the Text Type to Dynamic.Draw a text box in the white area of the stage, this is where your score will be displayed
  6. Inside the text box write “Click to start” and change the font face and color.
  7. With the text box selected, in the Property Inspector set the instance name to “tScore”.

  8.  Now press Ctrl+F8 and type “piece” for the name and set the type to Movie Clip. Click on Advanced and check the box by “Export for ActionScript”, the identifier should automatically be set to “piece”, if not, set it as that and press OK.
  9. Select the Rectangle Tool and draw a square on the stage.
  10.  Use the Selection Tool to double click on the square and in the Property Inspector set the following:
    W: 15
    H: 15
    X: 0
    Y: 0
  11. This will be the piece that makes up the body of your snake. If you do not want your snake to be made of squares you can change it here, but keep the width and height to 15.
  12. Return to Scene 1 and press Ctrl+F8 again and this time type “food” for the name and set the type to Movie Clip. Click on Advanced and check the box by “Export for ActionScript”, the identifier should automatically be set to “food”, if not, set it as that and press OK.
  13. Select the Oval Tool and draw a circle on the stage.
  14. Use the Selection Tool to double click on the circle and in the Property Inspector set the following:
    W: 15
    H: 15
    X: 0
    Y: 0
  15. This will be the food that your snake eats to gain length. If you do not want your food to be made of circles you can change it here, but keep the width and height to 15.
  16. Return to Scene 1 and click on frame 1 and press F9 to open the Actions Panel and add add the following code or the code which appears in the file snake.txt.
  17. Test the game. You may need to make alterations to the text size of the score.
var unit = 15;
var uwh = 20;
var canMove = false;
var dir = 2;
var score = 0;
aPieceList = new Array();
mouseListener = new Object();
mouseListener.onMouseDown = function()
{
if (!canMove)
{
canMove = true;
startGame();
}
};
Mouse.addListener(mouseListener);
k = new Object();
k.onKeyDown = function()
{
var k = Key.getCode();
if (k == Key.UP && dir != 2 && canMove)
{
dir = 0;
canMove = false;
}
else if (k == Key.LEFT && dir != 3 && canMove)
{
dir = 1;
canMove = false;
}
else if (k == Key.DOWN && dir != 0 && canMove)
{
dir = 2;
canMove = false;
}
else if (k == Key.RIGHT && dir != 1 && canMove)
{
dir = 3;
canMove = false;
}
};
Key.addListener(k);
function addPiece()
{
var p = this.attachMovie(“piece”, “piece” + aPieceList.length, aPieceList.length);
p._x = aPieceList[aPieceList.length – 1]._x;
p._y = aPieceList[aPieceList.length – 1]._y;
aPieceList.push(p);
}
function moveFood()
{
var moveIt = true;
while (moveIt)
{
food._x = Math.floor(Math.random() * uwh) * unit;
food._y = Math.floor(Math.random() * uwh) * unit;
moveIt = false;
for (var i = 0; i < aPieceList.length; i++)
{
if (aPieceList[i]._x == food._x && aPieceList[i]._y == food._y)
{
moveIt = true;
}
}
}
}
function gameOver()
{
delete this.onEnterFrame;
tScore.text = “You Lose.  Score: ” + score;
canMove = false;
}
function startGame()
{
for (var i = aPieceList.length – 1; i >= 0; i–)
{
aPieceList[i].removeMovieClip();
aPieceList.pop();
}
score = 0;
var p = this.attachMovie(“piece”, “piece” + aPieceList.length, aPieceList.length);
aPieceList.push(p);
p._x = 10 * unit;
p._y = 10 * unit;
var food = this.attachMovie(“food”, “food”, -1);
var c = 0;
moveFood();
var startingLength = 3;
for (var i = 1; i < startingLength; i++)
{
addPiece();
}
this.onEnterFrame = function()
{
canMove = true;
tScore.text = score;
for (var i = aPieceList.length – 1; i > 0; i–)
{
aPieceList[i]._x = aPieceList[i – 1]._x;
aPieceList[i]._y = aPieceList[i – 1]._y;
}
if (dir == 0)
{
aPieceList[0]._y -= unit;
}
else if (dir == 1)
{
aPieceList[0]._x -= unit;
}
else if (dir == 2)
{
aPieceList[0]._y += unit;
}
else if (dir == 3)
{
aPieceList[0]._x += unit;
}
if (aPieceList[0]._y / unit == 20)
{
aPieceList[0]._y = 0;
}
else if (aPieceList[0]._y / unit == -1)
{
aPieceList[0]._y = 19 * unit;
}
else if (aPieceList[0]._x / unit == -1)
{
aPieceList[0]._x = 19 * unit;
}
else if (aPieceList[0]._x / unit == 20)
{
aPieceList[0]._x = 0;
}
if (aPieceList[0]._x == food._x && aPieceList[0]._y == food._y)
{
score += 10 * aPieceList.length / 2;
moveFood();
addPiece();
}
for (var i = 1; i < aPieceList.length; i++)
{
if (aPieceList[0]._x == aPieceList[i]._x && aPieceList[0]._y == aPieceList[i]._y)
{
gameOver();
}
}
};
}

 

Adapted from: http://www.webdesign.org/flash-swish/flash-tutorials/snake-game.11079.html