Added: Feb 14, 2007 Rating:Level: All levels Software:
Flash
Requirements
Flash MX or higher.
Preview
1. Start by creating a 300�400 document in Flash.
2. In the Property Inspector set the Frame Rate to 24.
3. Select the Rectangle Tool and draw a square on the stage.
4. Select the Selection Tool and double click on the square to select it.
5. Press F8 to convert it to a symbol and select: Movie Clip and give it a Name of "Piece". Make sure the registration is set to the top left square.
6. Double click on the square you just created to edit it.
7. Select frame 2.
8. Press F6 to create a new Keyframe then change the color of the piece.
9. Repeat steps 7-8 through frame 7. Your timeline should look like this.
10. Click on frame 1 and press F9 to open the Actions Panel.
11. Insert the following Actions into the Actions Panel
stop();
12. Return to Scene 1 and press Ctrl+L to open the Library.
13. Right click on the piece you just created in the library and select Linkage.
14. Select "Export for ActionScript" and make sure the Identifier gets set to "piece" and press OK.
15. Select the Line Tool and draw a vertical line in the middle of the stage. (Hold Shift to keep your line straight)
16. Select the line you drew with the Selection Tool and in the Property Inspector set the following settings:
Width: 0
Height: 400
X: 200
Y: 0
17. Select the Text Tool and set the Text Type to Static Text.
18. Click to the right of the line near the top of the stage and type "Level"
19. Near the middle of the stage to the right of the line type "Score"
20. Near the bottom of the stage tot he right of the line type "Lines"
21. Using the Text Tool draw a box below the "Level" text and set the Text Type to Dynamic Text
22. In the Property Inspector where it says var: put "level"
23. Using the Text Tool draw a box below the "Score" text and set the Text Type to Dynamic Text
24. In the Property Inspector where it says var: put "score"
25. Using the Text Tool draw a box below the "Lines" text and set the Text Type to Dynamic Text
26. In the Property Inspector where it says var: put "lines"
27. You should have something that looks like the following
28. Select the Rectangle Tool and draw a rectangle between the left edge of the stage and the line you drew earlier.
29. Select the Text Tool and make sure in the Property Inspector that the Text Type is set to Static Text. Click on the rectangle you drew and type "Click to start game".
30. Use the Selection Tool to draw a box around the rectangle and text and press F8 to convert it to a symbol.
31. Set the Name to "popup" and type to Movie Clip.
32. In the Property Inspector set the instance name to "popup"
33. Double click on the popup movie clip and click on frame 2 and press f6 to add a new keyframe.
34. Change the text in the rectangle to say Game Over, Click to restart.
35. Click on Frame 3 and press F7 to insert a blank Keyframe.
36. Click on Frame 1 and press F9 to open the Actions Panel.
37. Insert the following code into the Actions Panel
stop();
38. Return to Scene 1.
39. Click on Frame 1 and press F9 to open the Actions Panel.
40. Insert the following code into the Actions Panel
var unitsize = 20; //One unit is one Block
var unitheight = 20; //How many units stack vertically in tetris.
var unitwidth = 10; //How many units stack horizontally in tetris.
var piececount = 0;
var piecetype;
var oldlines = 0;
var speed = 10; //Starting speed
var frame = 1;
var level = 1;
var realpaused = false;
var levelspeed = 8;
lines = 0;
score = 0;
moviecliplist = new Array();
xx = new Array("1", "2", "3", "4");
yy = new Array("1", "1", "1", "1");
framecount = 0;
var paused = true;
var rotatedcount = 0;
unitmap = new Array();
for (var i = 0; i < unitwidth; i++) //Creates a 2 dimensional array to store the pieces in tetris.
{
unitmap[i] = new Array();
unitmap[i][unitheight + 1] = 1;
}
mouseListener = new Object();
mouseListener.onMouseDown = function() //When the mouse is clicked
{
if (paused && realpaused == false)
{
for (var i = 0; i <= unitheight; i++)
{
for (var j = 0; j <= unitwidth; j++)
{
unitmap[j][i] = undefined;
}
}
for (var i = 0; i < moviecliplist.length; i++)
{
removeMovieClip(moviecliplist[i]);
}
startgame(); //start the game
}
};
Mouse.addListener(mouseListener);
kListener = new Object();
kListener.onKeyDown = function() //When a key is pressed
{
var k = Key.getCode(); //Get the ASCII code of the key pressed
if (paused)
{
if (k == 80) //If it is paused and you press p it will unpause
{
paused = false;
}
}
else
{
if (k == 80) //If it's not paused and p is pressed it will pause the game.
{
realpaused = true;
paused = true;
}
if (k == 38) //Up button is pressed
{
/*Piece Types (piecetype == number)
* 0 - Line
* 1 - L shape
* 2 - Other L shape
* 3 - Square
* 4 - S shape
* 5 - Z shape
* 6 - T shape
*/
if (piecetype == 0)
{
if (rotatedcount == 0) //If it has been rotated 0 times.
{
if (unitmap[xx[0] + 2][yy[0] - 1] == undefined && unitmap[xx[1] + 1][yy[1]] == undefined && unitmap[xx[2]][yy[2] + 1] == undefined && unitmap[xx[3] - 1][yy[3] + 2] == undefined) //Checks if the space it will rotate to is available
{
//Changes the coordinates of the piece in the xx and yy arrays that hold the position of the piece.
xx[0] = xx[0] + 2;
yy[0] = yy[0] - 1;
xx[1] = xx[1] + 1;
yy[2] = yy[2] + 1;
xx[3] = xx[3] - 1;
yy[3] = yy[3] + 2;
rotatedcount++; //Adds one to the rotatedcount variable.
}
}
else
{
if (unitmap[xx[0] - 2][yy[0] + 1] == undefined && unitmap[xx[1] - 1][yy[1]] == undefined && unitmap[xx[2]][yy[2] - 1] == undefined && unitmap[xx[3] + 1][yy[3] - 2] == undefined && currentpiece._x != 0 && currentpiece._x != 20 && currentpiece._x != 180)
{
xx[0] = xx[0] - 2;
yy[0] = yy[0] + 1;
xx[1] = xx[1] - 1;
yy[2] = yy[2] - 1;
xx[3] = xx[3] + 1;
yy[3] = yy[3] - 2;
rotatedcount = 0;
}
}
reposition(); //Repositions the piece according to how you just moved it.
}
else if (piecetype == 1)
{
if (rotatedcount == 0)
{
if (unitmap[xx[0] + 1][yy[0] - 1] == undefined && unitmap[xx[2] - 1][yy[2] + 1] == undefined && unitmap[xx[3]][yy[3] - 2] == undefined)
{
xx[0] = xx[0] + 1;
yy[0] = yy[0] - 1;
xx[2] = xx[2] - 1;
yy[2] = yy[2] + 1;
yy[3] = yy[3] - 2;
rotatedcount++;
}
}
else if (rotatedcount == 1)
{
if (unitmap[xx[0] - 1][yy[0] + 1] == undefined && unitmap[xx[2] - 1][yy[2] - 2] == undefined && unitmap[xx[3]][yy[3] + 1] == undefined && currentpiece._x != 0)
{
xx[0] = xx[0] - 1;
yy[0] = yy[0] + 1;
xx[2] = xx[2] - 1;
yy[2] = yy[2] - 2;
yy[3] = yy[3] + 1;
rotatedcount++;
}
}
else if (rotatedcount == 2)
{
if (unitmap[xx[0]][yy[0] + 1] == undefined && unitmap[xx[2] + 1][yy[2]] == undefined && unitmap[xx[3] - 1][yy[3] + 1] == undefined)
{
yy[0] = yy[0] + 1;
xx[2] = xx[2] + 1;
xx[3] = xx[3] - 1;
yy[3] = yy[3] + 1;
rotatedcount++;
}
}
else
{
if (unitmap[xx[0]][yy[0] - 1] == undefined && unitmap[xx[2] + 1][yy[2] + 1] == undefined && unitmap[xx[3] + 1][yy[3]] == undefined && xx[0] != 8)
{
yy[0] = yy[0] - 1;
xx[2] = xx[2] + 1;
yy[2] = yy[2] + 1;
xx[3] = xx[3] + 1;
rotatedcount = 0;
}
}
reposition();
}
else if (piecetype == 2)
{
if (rotatedcount == 0)
{
if (unitmap[xx[0] + 1][yy[0] - 1] == undefined && unitmap[xx[2] + 1][yy[2]] == undefined && unitmap[xx[3]][yy[3] + 1] == undefined)
{
xx[0] = xx[0] + 1;
yy[0] = yy[0] - 1;
xx[2] = xx[2] + 1;
yy[3] = yy[3] + 1;
rotatedcount++;
}
}
else if (rotatedcount == 1)
{
if (unitmap[xx[0] - 1][yy[0] + 1] == undefined && unitmap[xx[2] + 1][yy[2] - 1] == undefined && unitmap[xx[3]][yy[3] - 2] == undefined && currentpiece._x != 0)
{
xx[0] = xx[0] - 1;
yy[0] = yy[0] + 1;
xx[2] = xx[2] + 1;
yy[2] = yy[2] - 1;
yy[3] = yy[3] - 2;
rotatedcount++;
}
}
else if (rotatedcount == 2)
{
if (unitmap[xx[0]][yy[0] - 1] == undefined && unitmap[xx[2] - 1][yy[2] + 1] == undefined && unitmap[xx[3] - 1][yy[3]] == undefined)
{
yy[0] = yy[0] - 1;
xx[2] = xx[2] - 1;
yy[2] = yy[2] + 1;
xx[3] = xx[3] - 1;
rotatedcount++;
}
}
else
{
if (unitmap[xx[0]][yy[0] + 1] == undefined && unitmap[xx[2] - 1][yy[2]] == undefined && unitmap[xx[3] + 1][yy[3] + 1] == undefined && xx[0] != 8)
{
yy[0] = yy[0] + 1;
xx[2] = xx[2] - 1;
xx[3] = xx[3] + 1;
yy[3] = yy[3] + 1;
rotatedcount = 0;
}
}
reposition();
}
else if (piecetype == 4)
{
if (rotatedcount == 0)
{
if (unitmap[xx[0] + 1][yy[0] - 2] == undefined && unitmap[xx[1] + 1][yy[1]] == undefined)
{
xx[0] = xx[0] + 1;
yy[0] = yy[0] - 2;
xx[1] = xx[1] + 1;
rotatedcount++;
}
}
else
{
if (unitmap[xx[0] - 1][yy[0] + 2] == undefined && unitmap[xx[1] - 1][yy[1]] == undefined && currentpiece._x != 0)
{
xx[0] = xx[0] - 1;
yy[0] = yy[0] + 2;
xx[1] = xx[1] - 1;
rotatedcount = 0;
}
}
reposition();
}
else if (piecetype == 5)
{
if (rotatedcount == 0)
{
if (unitmap[xx[0] + 1][yy[0]] == undefined && unitmap[xx[1] + 1][yy[1]] == undefined && unitmap[xx[3]][yy[3] - 2] == undefined)
{
xx[0] = xx[0] + 1;
xx[1] = xx[1] + 1;
yy[3] = yy[3] - 2;
rotatedcount++;
}
}
else
{
if (unitmap[xx[0] - 1][yy[0]] == undefined && unitmap[xx[1] - 1][yy[1]] == undefined && unitmap[xx[3]][yy[3] + 2] == undefined && currentpiece._x != 0)
{
xx[0] = xx[0] - 1;
xx[1] = xx[1] - 1;
yy[3] = yy[3] + 2;
rotatedcount = 0;
}
}
reposition();
}
else if (piecetype == 6)
{
if (rotatedcount == 0)
{
if (unitmap[xx[0] + 1][yy[0] - 1] == undefined)
{
xx[0] = xx[0] + 1;
yy[0] = yy[0] - 1;
rotatedcount++;
}
}
else if (rotatedcount == 1)
{
if (unitmap[xx[0] - 1][yy[0] + 1] == undefined && unitmap[xx[2]][yy[2] - 2] == undefined && currentpiece._x != 0)
{
xx[0] = xx[0] - 1;
yy[0] = yy[0] + 1;
yy[2] = yy[2] - 2;
rotatedcount++;
}
}
else if (rotatedcount == 2)
{
if (unitmap[xx[3] - 1][yy[3] + 1] == undefined)
{
xx[3] = xx[3] - 1;
yy[3] = yy[3] + 1;
rotatedcount++;
}
}
else
{
if (unitmap[xx[2]][yy[2] + 2] == undefined && unitmap[xx[3] + 1][yy[3] - 1] == undefined && currentpiece._x != 160)
{
yy[2] = yy[2] + 2;
xx[3] = xx[3] + 1;
yy[3] = yy[3] - 1;
rotatedcount = 0;
}
}
reposition();
}
}
if (k == 39 && current4piece._x != 180 && unitmap[xx[0] - 1][yy[0]] == undefined && unitmap[xx[1] - 1][yy[1]] == undefined && unitmap[xx[2] - 1][yy[2]] == undefined && unitmap[xx[3] - 1][yy[3]] == undefined && unitmap[xx[0] + 1][yy[0]] == undefined && unitmap[xx[1] + 1][yy[1]] == undefined && unitmap[xx[2] + 1][yy[2]] == undefined && unitmap[xx[3] + 1][yy[3]] == undefined) //Checks if it is safe to move right.
{
for (var i = 0; i < 4; i++)
{
xx[i]++; //Changes the x coordinate of the piece to one to the right
}
reposition(); //Repositions piece
}
if (k == 37 && currentpiece._x != 0 && unitmap[xx[0] - 1][yy[0]] == undefined && unitmap[xx[1] - 1][yy[1]] == undefined && unitmap[xx[2] - 1][yy[2]] == undefined && unitmap[xx[3] - 1][yy[3]] == undefined && unitmap[xx[0] + 1][yy[0]] == undefined && unitmap[xx[1] + 1][yy[1]] == undefined && unitmap[xx[2] + 1][yy[2]] == undefined && unitmap[xx[3] + 1][yy[3]] == undefined) //Left
{
for (var i = 0; i < 4; i++)
{
xx[i]--;
}
reposition();
}
}
};
Key.addListener(kListener);
gameover = function () //When gameOver is called the popup movie is called which says Game Over.
{
popup.swapDepths(5000);
popup.gotoAndStop(2);
realpaused = false;
paused = true;
};
reposition = function () //Changes all the x coordinates according to the spots in the array.
{
currentpiece._x = xx[0] * unitsize;
current2piece._x = xx[1] * unitsize;
current3piece._x = xx[2] * unitsize;
current4piece._x = xx[3] * unitsize;
currentpiece._y = yy[0] * unitsize;
current2piece._y = yy[1] * unitsize;
current3piece._y = yy[2] * unitsize;
current4piece._y = yy[3] * unitsize;
};
startgame = function ()
{
paused = false;
score = 0;
lines = 0;
level = 1;
popup.gotoAndStop(3); //Changes the popup to a blank frame so you can't see it.
newpiece(); //Adds a new piece to the stage.
};
newpieceattach = function ()
{
if (unitmap[3][0] != undefined || unitmap[4][0] != undefined || unitmap[5][0] != undefined || unitmap[6][0] != undefined) //Checks if the top middle spots have a piece in them, if they do, you lose.
{
gameover();
}
else
{
oldlines = 0;
for (var i = 0; i <= unitheight; i++)
{
if (unitmap[0][i] != undefined && unitmap[1][i] != undefined && unitmap[2][i] != undefined && unitmap[3][i] != undefined && unitmap[4][i] != undefined && unitmap[5][i] != undefined && unitmap[6][i] != undefined && unitmap[7][i] != undefined && unitmap[8][i] != undefined && unitmap[9][i] != undefined) //Checks for a horizontal line of tetris blocks
{
for (var j = 0; j < unitwidth; j++)
{
removeMovieClip(unitmap[j][i]); //Removes the blocks in the line
for (var k = 0; k < unitheight; k++) //Moves all blocks above the line down.
{
unitmap[j][i - k]._y += unitsize;
unitmap[j][i - k] = unitmap[j][i - k - 1];
}
}
oldlines++;
score += level * oldlines * oldlines * 100;
lines++;
if (lines % 10 == 0 && levelspeed > 1) //If you are at a line count divisible by ten, increase the speed.
{
levelspeed--;
level++;
}
}
}
xx[0] = xx[0] + 3;
xx[1] = xx[1] + 3;
xx[2] = xx[2] + 3;
xx[3] = xx[3] + 3;
//Attach four blocks to create a piece.
_root.attachMovie("piece", "currentpiece" + piececount, piececount * 4);
this["currentpiece" + piececount]._x = xx[0] * unitsize;
this["currentpiece" + piececount]._y = yy[0] * unitsize;
this["currentpiece" + piececount]._width = unitsize;
this["currentpiece" + piececount]._height = unitsize;
_root.attachMovie("piece", "current2piece" + piececount, piececount * 4 + 1);
this["current2piece" + piececount]._x = xx[1] * unitsize;
this["current2piece" + piececount]._y = yy[1] * unitsize;
this["current2piece" + piececount]._width = unitsize;
this["current2piece" + piececount]._height = unitsize;
_root.attachMovie("piece", "current3piece" + piececount, piececount * 4 + 2);
this["current3piece" + piececount]._x = xx[2] * unitsize;
this["current3piece" + piececount]._y = yy[2] * unitsize;
this["current3piece" + piececount]._width = unitsize;
this["current3piece" + piececount]._height = unitsize;
_root.attachMovie("piece", "current4piece" + piececount, piececount * 4 + 3);
this["current4piece" + piececount]._x = xx[3] * unitsize;
this["current4piece" + piececount]._y = yy[3] * unitsize;
this["current4piece" + piececount]._width = unitsize;
this["current4piece" + piececount]._height = unitsize;
currentpiece = _root["currentpiece" + piececount];
currentpiece.gotoAndStop(frame); //Changes the color of the piece to match the type.
current2piece = _root["current2piece" + piececount];
current2piece.gotoAndStop(frame);
current3piece = _root["current3piece" + piececount];
current3piece.gotoAndStop(frame);
current4piece = _root["current4piece" + piececount];
current4piece.gotoAndStop(frame);
moviecliplist.push(currentpiece); //Adds the movie clips to an array of movieclips.
moviecliplist.push(current2piece);
moviecliplist.push(current3piece);
moviecliplist.push(current4piece);
}
};
newpiece = function ()
{
rotatedcount = 0;
piececount++;
var rand = (Math.floor(Math.random() * 7)); //Random number 0-6
frame = rand + 1;
piecetype = rand;
if (rand == 0) //Fill the array of x and y coordinates with the piece so we can add it.
{
for (var i = 0; i < 4; i++)
{
xx[i] = i;
yy[i] = 0;
}
}
else if (rand == 1) //refer to chart of pieces.
{
xx[0] = 0;
yy[0] = 0;
xx[1] = 1;
yy[1] = 0;
xx[2] = 2;
yy[2] = 0;
xx[3] = 2;
yy[3] = 1;
}
else if (rand == 2)
{
xx[0] = 0;
yy[0] = 0;
xx[1] = 1;
yy[1] = 0;
xx[2] = 0;
yy[2] = 1;
xx[3] = 2;
yy[3] = 0;
}
else if (rand == 3)
{
xx[0] = 0;
yy[0] = 0;
xx[1] = 0;
yy[1] = 1;
xx[2] = 1;
yy[2] = 1;
xx[3] = 1;
yy[3] = 0;
}
else if (rand == 4)
{
xx[0] = 0;
yy[0] = 1;
xx[1] = 1;
yy[1] = 1;
xx[2] = 1;
yy[2] = 0;
xx[3] = 2;
yy[3] = 0;
}
else if (rand == 5)
{
xx[0] = 0;
yy[0] = 0;
xx[1] = 1;
yy[1] = 0;
xx[2] = 1;
yy[2] = 1;
xx[3] = 2;
yy[3] = 1;
}
else if (rand == 6)
{
xx[0] = 0;
yy[0] = 0;
xx[1] = 1;
yy[1] = 0;
xx[2] = 1;
yy[2] = 1;
xx[3] = 2;
yy[3] = 0;
}
newpieceattach(); //add the new piece
};
_root.onEnterFrame = function()
{
framecount++;
current4piece._y = (yy[3] - 1) * unitsize;
current3piece._y = (yy[2] - 1) * unitsize;
current2piece._y = (yy[1] - 1) * unitsize;
currentpiece._y = (yy[0] - 1) * unitsize;
if (Key.isDown(Key.DOWN) && !paused) //Increases speed when DOWN key is pressed.
{
score += level;
speed = 1;
}
else
{
speed = levelspeed;
}
if (framecount % speed == 0)
{
if (!paused)
{
if (unitmap[xx[0]][yy[0] + 1] == undefined && unitmap[xx[1]][yy[1] + 1] == undefined && unitmap[xx[2]][yy[2] + 1] == undefined && unitmap[xx[3]][yy[3] + 1] == undefined) //If the piece does not hit anything below it, move it down.
{
current4piece._y = yy[3] * unitsize;
current3piece._y = yy[2] * unitsize;
current2piece._y = yy[1] * unitsize;
currentpiece._y = yy[0] * unitsize;
for (var i = 0; i < 4; i++)
{
yy[i]++;
}
}
else //If the piece hits something below it, stop moving it and create a new piece.
{
unitmap[xx[0]][yy[0]] = currentpiece;
unitmap[xx[1]][yy[1]] = current2piece;
unitmap[xx[2]][yy[2]] = current3piece;
unitmap[xx[3]][yy[3]] = current4piece;
newpiece();
framecount = 7;
}
}
}
};
Tetris Game Im trying to get it work on a size: Width: 194 px and Height: 251 px. But i can't get the code to work on that size.
Could anyone tell me how to properly adjust it so it works with that size?
Or if it takes to long adjust the .fla and give/send it to me.
If you can please.
Tetris Game This was a great tutorial. thanx alot. I was wondering if you could expand it to showing how to add sfx and background music. that would really be great!
Home
Flash & Swish
Flash Tutorials
Tetris Game
Level: All levels Software:
Flash
More Flash & Swish: Most Popular Materials | Fresh Materials
| More Flash Tutorials at FlashPerfection.com
Quincy Q May 08, 2009 says: