Tic Tac Toe
Tic Tac Toe
Tic Tac Toe was a famous game long before the first computers appeared, it was expected to see it become one of the first game computerized.
For example OXO, an adaptation of the game was built in 1952, it appear to be one of the first video game ever made on computer.
The game is for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.
Disk (and souce code) :
oxo.disk.png (image png file to save and load directly in DiskOS) -not implemented yet
oxo.disk : link: http:// github (disk file) oxo.lua : link: http:// github (code source only)
Manual :
oxo_manual.pdf
Box cover (Front & Back) :
oxo_box_cover.jpg
1: Preparing our tools
Description:
Starting to build a game, we need to have a plan about how we will proceed, ce can describe all the features of the Tic Tac Toe game as follow. *
A board of 3 x 3 squares is displayed.
A cursor that point to the square to be marked with a O or X symbol.
Moving the cursor with the mouse hovering or the keyboard arrows.
Alternatively, player O and player X can mark a square with their symbol.
If three symbols are aligned then the game is won else it is a draw.
Code:
In liko-12, we can create a new file with the command new open the editor with the escape key to write the following code.
And save a new file tictactoe.lk12 (tictactoe.disk).
Result:
From here we can use the command run to start the game, nothing should happen for now. (Escape key to leave the game loop.)
Steps:
Create a new file and open the editor and write the title of the game as a comment.
We add the title as a comment and add the function _init() which load first when we start the game.
We choose a white color (8) with the function color() and use print(text, x, y) with x and y as coordinate of the screen.
Save the new file.
Infos:
Notes: It take time and experience to be able to build a game design document, in the beginning we generally have vaguely an idea of the different features we need (a paddle moving, a mouse clicking an object, a score system) but often what happen is that we find an idea in the middle of the development and try to add it in our program. This programming improvisation can bring inexpected problems and bugs. Even if it appear less interesting than programming the game directly, having a global idea wrote down pointing where the game going can save lot of troubles later.
2: Initializing and drawing the game board
Description:
There is many way to start programming a game, we generally start by initializing the first datas we will need later in the program. That mean we save important values in variables (or sometimes when the value is not supposed to change we call it a constant) and give them meaningful names.*
We also can start to draw something right in the beginning, because for many persons, having a visual understanding of what happening is important. It help to go back and forth between the game logic and graphics. In particular in game development where the experience is both visual (video) and interactive (game). (it is also an auditory experience but we won't go there yet)
We could focus only on logic and wait the end to draw the game but the programming make generally more sense when we add a graphical element aswell as we add game logic. It is how we will proceed here, adding one logical layer and one graphical layer step by step alternatively until completion of the game.
Code:
Result:
The board is drawn once when the game start. (command run)
Steps:
We use the _init() function that start once we run the game (and we delete the previous introduction print code).
We add a table variable board with the data concerning the game board measures. To get the x, the left coordinate of the board, we go from the middle of the screen (192/2) and we substract by half the size of the board (90/2).
We then create a new function draw_board() that will be called when there is the need to draw the board game.
We clear the screen with the color dark blue clear(2) and choose the color white (color(8)) before to draw the lines of the board.
To draw the four horizontal lines, we loop four time by moving the index i to 1/3 of the board height, the first line is at 0 of the height, the fourth line is at 3/3 (or 1) of the height and are applied to the y coordinate of the line.
To draw the four vertical lines, we do the same than step 5 but instead the index move on the width of the board and is applied to x.
We then add the function draw_board() to a main function draw() that will contain all the drawing function call.
We add the _update(dt) function that is essentially the main game loop.
We don't need to call the drawing function every frame of the loop, only when there is a change. To say to the game there have been a change and it is now time to update the drawing we will use a flag variable, updateBoard, when true, the drawing functions are called.
We add the flag variable set true to the end of the _init() function to call it once the game start. (Will draw once because updateBoard is true and then the updateBoard is switched to false so the update game loop ignore the draw function call)
Infos:
Notes: Giving a meaningful name to a variable is not important for the computer but much valuable for an human who read the code afterward (even the original author can forget what he meant then), it give an easiest way to understand how the program behave by a simple reading, for example, a variable velocity will be easier to grasp quickly than the letter v or a random variable name like e1e_T.
3: Defining squares and positions
Description:
Before to go further with the game display, we first need to clearly define in our game the different squares the player can play. We also need a way to save the game status, what the players have played and on which square. The first give us the limits of each square on the board axis that we will need to select the square to play, the second give a global overview of the game that we use to check the progress of the game and reach to a conclusion.
Code:
Result:
Each square have an id number from 1 to 9, the square top left has an id of 1, the square down right has an id of 9. Each square are created and added to the table squares. Each square are also indexed by their id in the table positions and each are set to a default empty string "". When selected later, a square position will change to either "X" or "O" by using positions[id of the square].
Steps:
We add in the _init() function the variables squares and positions with an empty table. These will contain the squares datas.
We create a fucntion set_squares() and call it from the function _init() to be called once when the game start.
One square is one third of the height of the board and one third of the width of the board, it is how we add to the table squares their width and height.
We are going to loop nine time to create nine squares, each loop we will give an id from 1 to 9, we use for this index starting at 1 and incrementing by at 1 each loop. (see step 10)
We doing now what is called a nested loop, the purpose of it is to build a grid of coordinate x/y, to do so we need to loop 3 times for x, and for each x loop, loop 3 times for y. We loop from 0 to 1 with a step of 1/3. We then have the value, 0, 1/3 and 2/3 for x, and 0, 1/3, 2/3 for y, we then can apply them to the height and width to get the 9 coordinates x,y up left of the 9 squares on the board.
In fact, we loop 4x4 times because the loops take also the finale value of 3/3 = 1, but we don't want to create a square for this last value, so the trick here is to check if both loop values are less than 1 to create a new square.
Each loop, we initialize a new square with the current id index and x and y variable in the table squares.
x and y variables of the square current id index are given the value of the left x coordinate or top y coordinate of the board plus a portion of the board height of width.
We then give to the square of current id index the default empty position with an empty string "" (no "X" or "O" on the square yet)
And finally we increment the id index before the loop to end and restart to create the new square.
Infos:
4: Drawing the selection cursor
Description:
Now we have defined each square on our board, we can now create a cursor that will move on each square when we use the mouse or the keyboard.
The first step before to code is to open the sprite editor (Escape key and Icon top right) and create an arrow like on the image below. This arrow sprite must be on the first sprite (top left) of the spritesheet to have the id of 001.
Code:
Result:
A cursor is displayed on the current selected square. It will stay at 1 by default, after we will update the cursor position with mouse and keyboard input but for now it is possible to test the cursor on others squares by modifying manually the variable cursor (1 to 9) in the _init() function.
Steps:
We add a variable cursor in the _init() function that will be the indicator of the selected square.
We create a function draw_cursor() to update the cursor drawing when called.
We loop through the squares table and check which square id is equal the the cursor position. (see infos)
From this square x and y coordinates, we set the orange color color(10), draw a little rectangle rect(...) and add the Sprite(1,...) to draw an orange cursor to the top of the square.
Finally we add the draw_cursor() function to the main function draw().
Infos:
In lua, we can use a table like an array (value with an index position) or like a map or dictionnary (with a key=value struture). To loop through a table with lua we can use the two functions pairs(table) or ipairs(table), the main difference between both is that using ipairs() will loop through an iterator (from 1) and ignore datas with a key. And pairs() is more adapted to return all the table datas in the form of key and value, and for datas without a key return an index position as a key.
5:Using the mouse and keyboard inputs
Description:
At this point we want to be able to select a square with the mouse or the keyboard. What we need in the first case is a way to check what is the mouse position and compare it with the different position of the squares. In the second case with want to update the cursor position with the keyboard arrows.
Code:
Result:
We can now move the cursor with the keyboard up, left, down and rigth or by simply hovering the squares with the mouse cursor. The square cursor is automatically updated with both inputs.
Steps:
First we add a flag variable winner in the _init() function set to false, it will be useful to check after if the game is running (false, no winner) or not. And give different controls to the player depending the status of this flag.
We add the _mmove(x, y) function which is the default function (an event listener) that is called each time the mouse is moving with x and y as the current position of the mouse cursor.
We want to check if the game is running (if winner not false) to update the board cursor position.
We create a new function called mouse_cursor() that will be used to check the position of the mouse cursor with the different squares of the board, we call the function from the _mmove() function passing the parameter x and y.
We loop through the squares table, using the ipairs() to loop only through an iterator. (careful not to use pairs() to avoid height and width in the table, only loop square)
We check if the x and y coordinates of the mouse cursor are hold inside one of the square four coordinates.
When we find a square that match, we set the board cursor to the id of the square and set the flag updateBoard to true to call to redraw the game.
We add the _kpress() function which is the default function (also an event listener) that is called each time a key from the keyboard is pressed (with the key parameter as which key have been pressed).
We create a new function keyboad_cursor() that will check which key of the keyboad is pressed only if the game have no winner. (if winner not false)
If the key is left or right, we simply move the cursor forward or backward if the limit of the square are not crossed (1 - 9), in the case of up and down arrow key, we jump by 3 cases (which is the lenght of a board row) and check to not go out of the limits board limit (3 - 7).
We then set the flag updateBoard to true to update the game drawing.
Infos:
With Liko-12 (DiskOS) the differents input function are event listener that are called when the related input is used, here the different functions:
_mpress(...): This function is called when a mouse button is pressed.
_mmove(...) This function is called whenever the mouse gets moved.
_mrelease(...) This function is called when a mouse button is released.
_tpress(...) This function is called when the screen is touched.
_tmove(...) This function is called when a screen touch is moved.
_trelease(...) This function is called when a screen touch is released.
_kpress(...) This function is called when a keyboard key is pressed.
_krelease(...) This function is called when a keyboard key is released.
6: Inputs playing on the board
Description:
We have seen how to use mouse and keyboard to move on the board, what we want to do now is to actually play when the mouse is clicked or a specific keyboard key is pressed.
Code:
Result:
Because the functions check_board() and end_turn() have not been defined yet, the game will crash when the inputs are used. The next section (7: checking the board and go to next turn) must be completed to have the program not returning an error.
Steps:
We first add a variable turn to the _init() function that will keep track of which turn it is, "O" or "X". We set turn in the beginning with "O", which will be the first to play.
We use the _mmpress() function to trigger when a mouse button is clicked, from there we check if the button left is clicked (if b == 1) and if the game have no winner, then we pass the x and y coordinates of the mouse to the function mouse_play.
We create the function mouse_play() that is called when the mouse button is clicked.
We loop through each square of the squares table with the ipairs() function.
Before to play on the square we need to check which square the mouse click (check coordinates like with the mouse_cursor() function seen before) and if the square is not already a occupied position (must have an empty string "").
If the check pass, we give to the position of the square the value of the current turn, "O" or "X" and we set the flag updateBoard to true to update the game drawing.
We call the function check_board() that will return false or true and give it to the variable winner. If the winner flag is true, the game is finished and then the end_turn() function is called.
In the keyboard_cursor() function created in the previous section, we add a new check which is to find out if the key "x", "c" or "v" are pressed. If yes, the keyboard_play function is called.
We create the function keyboard_play() that will first check (similarly to step 6) if the position of the cursor is empty and if yes, will change the position with the current turn.
This do the same that step 7. Also, the updateBoard = true have been already added to the keyboard_cursor() function previously so we don't need it in the keyboard_play function. (section 5, step 11)
7: checking the board and go to next turn
Description:
To complete the previous section setting the input to play on the board, we need to write an important behavior that is the board checking method, it is the moment the computer check all the possible position to win the game and conclude if the game is finished or if the player turn change and continue to play.
Code:
Result:
Nothing visually new happen, but a lot happen behing the curtain to make the gameplay of the tic tac toe working. When the function check_board is called, the whole board positions are checked and the computer return a winner or change to the next turn.
Steps:
We first initialize at the start of the game (function _init()) a table checks that contain all the three positions possibilities on the board that make a win. All the horizontal, vertical and diagonal position. Remember the square have id from 1 (up left) to 9 (down right).
We create a function end_turn() that check what turn it is and switch to the opposite. (if turn is O then turn is X and vice versa)
We create a function check_board() that will first check for a winner, then for a draw and will return false if nor winner nor draw is found.
We set a local variable count that we will use for checking the positions.
We first loop through all the victory position combination and for each combination we loop to the three square ids.
What happen now is that we check if the square is marked with the current turn symbol ('O' or 'X') (positions[id of the square]), if yes, then we add 1 to the count.
If it happen that the 3 id of the combination are marked by the same symbol, the count is equal to three, then the loop is ended and the function return true (that will be assigned to winner)
If the count if less than 3, then the count is reset to 0 to be used in the next loop to check the next combination.
If there is no winner found, the loop set count to 0 a last time and we can use it for a new loop, this time, all the positions.
We check if the position of each square is empty (""), and if yes, add 1 to the count.
Finally we check if count is equal to 0, which mean, if it's true, that there is no empty square anymore then the game is a draw and we return true to signal the game is finished.
We return false only in the case there is no winner and there is still empty squares.
8: Drawing squares symbols and turn message
Description:
It is time to go back to the drawing of our game, lot is happening under the hood to make the game mechanic working but we need now to show an output to the player of what is happening when there is a square played with an input.
The player need to know two important things: 1) What is the status of the game, which turn is it to play, "O" or "X"? and 2) What is the result of one action, when I use the mouse or the keyboard, by displaying the square symbol where I want to play.
Code:
Result:
The game is now nearly complete and all the gaming display is functional.
Steps:
We first create a draw_squares() function that start by looping through the square of the squares table.
For each square we draw a black (color(1)) rectangle (rect()) that will serve as background.
If the position of the current square is marked by the symbol O then a blue (color(13)) circle (circle_line()) is drawn to the center position of the square.
If the position of the current square is marked by the symbol X then two red (color(9)) lines (line()) are drawn on the square. (The coordinates of the lines are deducted from the center)
We create a function clearMsg() which draw to the bottom of the screen a green rectangle, it will serve as container for the messages and also a simple way to erase previous messages.
We create a draw_message() function that start by calling the clearMsg() function, then display the current turn with the print(text, x, y) function with x and y for the coordinates where to display the text. (see notes 1 and 2)
We call the two new drawing functions from the main function draw(), careful to call the draw_squares() function before the draw_cursor() to not hide the cursor behind the background.
Infos:
In the liko-12 (DiskOS) api, it is possible to draw different forms.
point(x, y, c)
Draws the given point (x,y).
line(x1, y1, x2, y2, c)
Draws line connecting the given points (x1,y1 and x2,y2)
circle(x, y, r, c)
Draws a circle at the given position (x,y) and radius (r).
circle_line(x, y, r, c)
Same as circle but draw only the outline of the circle.
rect(x, y, w, h, c)
Draws a rectangle at the given top left position (x,y), height and width (w,h).
rect_line(x, y, w, h, c)
Same as rect but draw only the outline of the rectangle.
Notes 1 : The color can be defined from the drawing function itself (parameter c above) or with the function color() called before, the print function need the color() function in any case.
Notes 2 : An operation on string that consist in combining together two values is called concatenation, with lua we use two dots ".." to concatenate two values in one string.
9: Game over and resetting the game
Description:
A game cannot be complete without a way to end it. We need to add a game over function that will act as a method to block the game when the board is finished with a winner or a draw and propose the player to play again.
Code:
Result:
The game is now complete, we can play, win, lose, draw and restart the game.
Steps:
We add one variable time and one constant time_max to the _init() function that load our datas at the beginning of the game. We will use them to give an amount of second before to be able to restart the game.
We create a function called reset_game() that will be used to reset all our data to the starting default value, we need it to be able to restart the game and draw a new board by reseting all position with an empty string "".
We add a check in the two function that listen the mouse click event and the keyboard key pressed event, if the game is finished (winner true) and the timer have reach the max_time, then the a click or a key pressed restart the game.
To the main loop function _update(dt) we add a check on the winner variable, if the variable is true, the game is ended and we call the game_over() function, also the timer is incremented by the delta time. (see infos)
We create a function game_over() which will be called each time the game finish. (winner = true) It's purpose is to draw a message with the final status of the game and to propose to start a new game.
We erase the message box with the clearMSg() function and we set the color to black (color(1))
If the turn is an empty string, it is a draw else we print the winner in the message box.
While the timer has not reach the maximum, we display the seconds, then we display a message to propose to play again. (see infos)
Infos:
To know the time and the number of frame per second, we can use the delta time of the _update(dt) loop. One delta time is the time between two frame, two have one second/delta time give the number of frame per second.
We can do some tests with dt by creating a new program in liko-12 (DiskOS):
Last updated
