Long days ago I spoke with a dentist of game demos, and of a festival dedicated to those. We talked of Ticktacktoe, a classic game of boxes and shapes – a boring, beatable game, but an easy one to program.
It’d be easy to program, right? We could probably make one with flash in less than thirty minutes, couldn’t we? At least one way to find out!
Yup. Sure could!
Ticktacwhatsit is made up of nine (9) blocks, and each can be either blank, an X, or an O. That’s so easy to represent in flash!
I started by making a symbol called called block which had two layers and three keyframes on one layer: blank, X, and O. On the other layer, i added the action stop(); to prevent it from flipping through the frames.
I dragged 9 instances of block onto the stage, and arranged them into a game board (named them in sequence) – and drew some lines between them.
And then I wrote the game code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| var boxes:Array = [ b0, b1, b2, b3, b4, b5, b6, b7, b8 ];
var nextSymbol:int = 0;
removeChild( done );
done.addEventListener( 'go_again', restart );
function restart( e:Event ) : void {
nextSymbol = 0;
for( var i:int=0; i < boxes.length; i++ )
boxes[i].gotoAndStop( 1 );
removeChild( done );
}
for( var i:int=0; i < boxes.length; i++ ) {
boxes[i].addEventListener( MouseEvent.CLICK, onClick );
boxes[i].buttonMode = true;
}
function onClick( e:MouseEvent ) : void {
if ( e.currentTarget.currentFrame == 1 ) {
e.currentTarget.gotoAndStop( nextSymbol+2 );
if ( checkGame() ) {
trace( 'won!' );
done.gotoAndStop( nextSymbol + 1 );
addChild( done );
}
nextSymbol = (nextSymbol+1)%2;
}
}
function checkGame() {
for( var t:int=0; t < possible.length; t++ ) {
var val:int = boxes[possible[t][0]].currentFrame;
for( var i:int=0; i < possible[t].length; i++ ) {
if ( boxes[possible[t][i]].currentFrame != val || val == 1 )
break;
else if ( i == 2 )
return true;
}
}
return false;
}
var possible:Array = [
[ 0, 1, 2 ],
[ 3, 4, 5 ],
[ 6, 7, 8 ],
[ 0, 3, 6 ],
[ 1, 4, 7 ],
[ 2, 5, 8 ],
[ 0, 4, 8 ],
[ 2, 4, 6 ]
]; |
So the main idea is that we have a bunch of boxes and whenever one of them gets clicked, we may have to do something. I added each of the boxes to an array (line 1), so I could easily loop through them all (line 14), and set the buttonMode and add an onClick event handler to each. A true buttonMode tells flash to display the little hand when you mouseover the object.
The main processing is done whenever you click a block, and the onClick event handler starts on line 20. That’s really all there is to the game, the rest of the stuff are just extras.
The mouse event is passed as a param to the event handler. Its currentTarget property represents the object clicked, which in this case is one of the blocks.
The first test to do on that block is see if it’s empty. If it’s not empty, there’s nothing for us to do.
A block is empty if it is still on its first frame, which is where currentFrame comes in. If it’s not on its first frame it’s either an X (frame 2) or an O (frame 3).
If it is empty, I need to either fill it with an X or an O, whichever wasn’t used last. For this, I have the nextSymbol variable, which is only ever either a 0(X) or a 1(O). I set the block using its gotoAndStop function, passing it the frame we wish it to change to.
After that, I just check if a player has won!
I was pretty lazy about checking; I made a list of every possible victory combination (line 46), and check each of those (line 32) to ensure all the squares in each aren’t on the same frame, or on frame 1 (line 36).
Done!
Line 28: I wonder why I did nextSymbol = ( nextSymbol + 1 ) % 2; instead of nextSymbol ^= 1; Laziness?
Dev, Uncategorized, being helpful to people less experienced than myself in the ways of the world; mostly in the ways of the web actually
Actionscript, Flash, Games, Programming