Here is a link to a Tic-Tac-Toe game that I created using Flash and its programming language Actionscript: http://www.constantlimit.com/site/portfolio/flash/tic_tac_toe.html
This codetorial requires a solid understanding of basic programming concepts along with Actionscript.
The playing board is a 3×3 grid that consists of 9 spots. Each spot can hold a piece, and X or O. Intially, each spot is empty since no piece has made any moves yet. So at any point in the game, there are three possible statuses for each spot, X, O, or empty.
Click the link below to continue with this codetorial:
The easiest way to create the 3×3 grid is using an array. Each index in the array can hold the current status of each spot. Then you can perform algorithms upon the array after a piece moves, to determine if a pieces has won. In tic-tac-toe, a piece has won if it has occupied an entire row, column, or diagonal.
var board_array = new Array(); // Create the array
When the array is created, each index will hold a default value of 0. These default values will need to be replaced with unique identifiers so that winning combinations can be determined as the game goes.
This ”for” loop creates unique identifiers from 0 to 8.
for(var i = 0; i < total_turns; i++)
{
array[i] = i;
}
What we end up with is an array whose indices contain these values:
0 1 2 3 4 5 6 7 8
But in reality we must envision the array as a grid like this:
0 1 2
3 4 5
6 7 8
Without that for loop we would have a grid as follows:
0 0 0
0 0 0
0 0 0
As you can tell, it is easier to differentiate between the spots on the first grid then the second. The second grid would require you to reference the array index in order to spot out the correct 0.
Here is the grid again:
0 1 2
3 4 5
6 7 8
We can easily see that for example, if X occupies spots 0, 3, and 6 before O does and the game is still contiuning, then X will have won via a column winning combination. Also, if O occupies spots 2, 4, and 6, before X and the game progresses, O will have won due a diagonal winning combination. A winning combination is a group of spots that a piece must occupy in order to claim victory. Since these winning combinations can be determined prior to game play, we can create a second array that will hold these winning combinations. Then, as the game progresses, you can compare the current board array to the winning combinations array after every move to see if a piece has won or not.
Creating the winning combinations array is trickier than the board array because this new array will actually contain a reference to other arrays. Think of this array is actually being an array of arrays.
Using the grid the winning combinations array will look as follows:
var winning_array:Array = new Array(); // Contain winning combinations
winning_array =
[
// Vertical/Column Win
[0,1,2],
[3,4,5],
[6,7,8],
// Horizontal/Row Win
[0,3,6],
[1,4,7],
[2,5,8],
// Diagonal Win
[0,4,8],
[6,4,2]
];
Next we will see how to compare the playing board to the set of winning combinations. This is the heart of determining a winner in tic-tac-toe. Below is the algorithm along with a walkthrough of each line.
1. // Compare the winning array to the player’s
2. for(var i = 0; i < winning_array.length; i++)
3. {
4. var winning_combination:Array = winning_array[i];
5. if(player_array.length >= 3)
6. {
7. for(var k = 0; k < player_array.length; k++)
8. {
9. for(var j = 0; j < winning_combination.length; j++)
10. {
11. if(player_array[k] == winning_combination[j])
12. {
13. match_counter++;
14. }
15. if(match_counter == 3)
16. {
17. is_match = true;
18. wc = winning_array[i];
19. break;
20. }
21. }
22. }
23. }
24. match_counter = 0;
25.}
Here is a breakdown of every line:
- This is just a comment used for code readibility and algorithm comprehension.
- This begins a “for” loop to check every single winning combination against the current status of the game board.
- Open curly brace for #2.
- This is a new array that will determine what kind of winning combination the piece achieved (row, column, or diagonal).
- Only start checking the player’s pieces if they occupy more than 2 spots on the board. A piece must occupy at least 3 spots to win. Do not bother continuining the algorithm until the player has occupied 3 spots.
- Open curly brace for #5.
- Here is where we build a double “for” loop for checking the player’s spots against the set of winning combinations. We start with the player array and check it for every single possible winning combination. That is why the player array is the outer loop and the winning combinations are the inner loop. This set goes until line 10.
- See #7
- See #7
- See #7
- Inside this double “for” loop we check to see if the player has occupied a spot of the winning array if it does increment the match counter, as seen in #13.
- Open curly brace for #11.
- Continue to increment the match counter as long as matches are found, you can tell what happens at line 15.
- Close curly brace for #11.
- If you find 3 matches of a winning combination (0, 1, 2 - Row Win) then perform the next set of instructions, because a winning combination has been found.
- Open curly brace for #15.
- Set a variable that determines if a winning combination has been found to true. Once this variable is set to true, we know that is a piece/player has won and the game is over.
- Assign the winning combination to a variable that has been abbreviated to wc (winning combination) to avoid variable name conflict. Now we know what spots were used to generate this particular victory.
- Once we found a winner, we are done with this double “for” loop so we break out of it to exit since we do not need to continue this algorithm anymore.
- Lines 20 to 23 are all close curly braces for all the nested regions on this algorithm.
- See #20
- See #20
- See #20
- If we only found 1 or 2 matching spots, reset this variable to zero for the next iteration in the winning combinations array. For example, for the winning combination 0, 1, 2. If X occupied only 0 and 1 but not 2 on its current turn, then it has not completed the 0, 1, 2 set needed to win. X must be the first to occupy 0, 1, 2 in order to win this way. So we make sure to reset the match counter to zero after an interation since every winning combination only requires 3 spots and we do not want to over-increment this variable.
- Closing the final curly brace for this algorithm.
So this is the algorithm that I used to determine a winner in tic-tac-toe. After determining this information you can use it to print out a victory message on who won and even draw the winning combination as I have done at the end of the game.
Debugging can be very difficult to pinpoint so I use the trace() function to output variable values to make sure the flow of the code in the algorithm is being performed correctly. I hope this has helped you understand how the grid/play board works in tic-tac-toe. Feel free to post comments or suggestion about this post.
WordPress Blog Feed
Hello. Who knows any greate MP3 sites to download some compilations? Of course you can buy it in nearest shop or market, but I found more suitable opportunity for me. I really like listening music with my mp3 player or PC. Yes It’s true :-)! I have found one great site where I can download either rare songs or popular tracks or both of them. And I’m very happy because I can download it and upload to my IPod.
I have traced all INTERNET to find it. But it’s happened and I can share it for you:
[URL=http://mp3trace.com/download/mp3/artist-various-artists/album-la-musique-bretonne-165297/index.html]download Various Artists-La Musique Bretonne mp3[/URL]
or:
[URL=http://mp3trace.com/download/mp3/artist-various-artists/album-dj-promotion-cd-pool-techno-32-83264/index.html]download Various Artists-DJ Promotion CD Pool Techno 32 mp3[/URL]
real huge catalog!
Sorry if wrong branch
Hi all. Who knows any greate MP3 sites to download some musics? I have found new mp3 portal and downloaded my favourite tracks. I really like listening music with my mp3 player or PC. Yes It’s true :-)! I have found one great site where I can download either rare songs or popular tracks or both of them. And I’m very happy because I can download it and upload to my IPod.
But I cant find this tracks for free(see below), can you help me please?:
[URL=http://mp3trace.com/download/mp3/artist-alex-stealthy/album-permanent-133407/index.html]download Alex Stealthy-Permanent mp3[/URL]
or:
[URL=http://mp3trace.com/download/mp3/artist-the-charlatans/album-just-lookin-1990-1997-36295/index.html]download The Charlatans-Just Lookin 1990-1997 mp3[/URL]
real huge catalog!
Please don’t delite moderators
Have you tried to do this in AS3? I working an it and got stuck. Can you do a Tutorial for a AS3 version?
Cool idea, I’ll try to implement it!
I am trying to identify who wins (either X or O) in my game of tic-tac-toe. Please help. Here is the coding:
// Tic-Tac-Toe Game
// Created By: Jessica
var mouseSound:Sound = new Sound();
mouseSound.attachSound(”Ding”);
this.onMouseDown = function() {
mouseSound.start();
};
var startSound:Sound = new Sound();
startSound.attachSound(”tada1″);
this.onLoad = function() {
startSound.start();
};
// Drag a piece O.
O_mc.onPress = function() {
this.startDrag(false);
};
// When the O is placed on a square.
O_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
O_mc._visible = false;
}
};
// Drag a piece O.
O1_mc.onPress = function() {
this.startDrag(false);
};
// When the O is placed on a square.
O1_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
O1_mc._visible = false;
}
};
// Drag a piece O.
O2_mc.onPress = function() {
this.startDrag(false);
};
// When the O is placed on a square.
O2_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
O2_mc._visible = false;
}
};
// Drag a piece O.
O3_mc.onPress = function() {
this.startDrag(false);
};
// When the O is placed on a square.
O3_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
O3_mc._visible = false;
}
};
// Drag a piece O.
O4_mc.onPress = function() {
this.startDrag(false);
};
// When the O is placed on a square.
O4_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
O4_mc._visible = false;
}
};
// Drag a piece O.
O5_mc.onPress = function() {
this.startDrag(false);
};
// When the O is placed on a square.
O5_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
O5_mc._visible = false;
}
};
// Drag a piece X.
X_mc.onPress = function() {
this.startDrag(false);
};
// When the X is placed on a square.
X_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
X_mc._visible = false;
}
};
// Drag a piece X.
X1_mc.onPress = function() {
this.startDrag(false);
};
// When the X is placed on a square.
X1_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
X1_mc._visible = false;
}
};
// Drag a piece X.
X2_mc.onPress = function() {
this.startDrag(false);
};
// When the X is placed on a square.
X2_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
X2_mc._visible = false;
}
};
// Drag a piece X.
X3_mc.onPress = function() {
this.startDrag(false);
};
// When the X is placed on a square.
X3_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
X3_mc._visible = false;
}
};
// Drag a piece X.
X4_mc.onPress = function() {
this.startDrag(false);
};
// When the X is placed on a square.
X4_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
X4_mc._visible = false;
}
};
// Drag a piece X.
X5_mc.onPress = function() {
this.startDrag(false);
};
// When the X is placed on a square.
X5_mc.onRelease = function() {
this.stopDrag();
// Convert the slash notation to dot notation using eval.
if (eval(this._droptarget) == Board6_mc) {
X5_mc._visible = false;
}
};
var board_array = new Array();
// Create the array
for(var i = 0; i < total_turns; i )
{
array[i] = i;
}
var winning_array:Array = new Array();
// Contain winning combinations
winning_array =
[
// Vertical/Column Win
[0,1,2],
[3,4,5],
[6,7,8],
// Horizontal/Row Win
[0,3,6],
[1,4,7],
[2,5,8],
// Diagonal Win
[0,4,8],
[6,4,2]
]
// Compare the winning array to the player’s
for(var i = 0; i = 3)
for(var k = 0; k < player_array.length; k )
for(var j = 0; j < winning_combination.length; j )
if(player_array[k] == winning_combination[j])
match_counter ;
if(match_counter == 3)
is_match = true;
wc = winning_array[i];
break;
match_counter = 0;
function checkWin() {
if(display1.text == ” X ” && display2.text == ” X” && display3.text == ” X”) {
text_winner = ” Player X has Won”;
}
}
//in the release action of your button
checkWin();
function checkWin() {
if(display1.text == ” O ” && display2.text == ” X” && display3.text == ” X”) {
text_winner = ” Player O has Won”;
}
}
//in the release action of your button
checkWin();
Also, I need to figure out when there is a tie in the game.
Gday, ial: Translating the Tic-Tac-Toe Playing Board to Flash Actionscript | Constant Limit is such an interesting topic! It’s hard to find good information on notation games but it’s all here!
Hey!, Loved your post on ial: Translating the Tic-Tac-Toe Playing Board to Flash Actionscript | Constant Limit. I’m interested in flash mp3 player and on Sunday found a similar comment in a local newspaper. Couldn’t have said it better myself!