Tutorial : Tic-Tac-Toe

In this tutorial, we'll create a simple Tic Tac Toe game using the Aurora programming language. Tic Tac Toe is a classic two-player game where players take turns marking spaces in a 3x3 grid, aiming t

Step 1: Setting Up the Game Board

First, let's create the game board component. The game board will consist of a 3x3 grid where players can place their symbols (X or O).

pythonCopy codecomponent GameBoard:
    def __init__(self):
        self.board = [[' ']*3 for _ in range(3)]  # Initialize an empty 3x3 grid
    
    def render(self):
        board_html = ""
        for row in self.board:
            row_html = ""
            for cell in row:
                row_html += f"<div class='cell'>{cell}</div>"
            board_html += f"<div class='row'>{row_html}</div>"
        return f"<div class='board'>{board_html}</div>"

Step 2: Displaying the Game Board

Now, let's create the main component to display the game board and handle player interactions.

pythonCopy codecomponent TicTacToe:
    def __init__(self):
        self.board = GameBoard()
        self.current_player = 'X'
    
    def handle_click(self, row, col):
        if self.board[row][col] == ' ':
            self.board[row][col] = self.current_player
            self.current_player = 'O' if self.current_player == 'X' else 'X'
    
    def render(self):
        return f"""
            <div>
                <h1>Tic Tac Toe</h1>
                {self.board.render()}
            </div>
        """

Step 3: Adding CSS Styling

Let's add some basic CSS styling to make the game board visually appealing.

pythonCopy code# Inline CSS for simplicity
style TicTacToe:
    """
    .board {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        gap: 2px;
        border: 2px solid black;
        margin-bottom: 10px;
    }
    
    .cell {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        border: 1px solid black;
        cursor: pointer;
    }
    
    .row {
        display: flex;
    }
    """

Step 4: Testing the Game

Now, let's create an instance of the TicTacToe component and render it.

pythonCopy codegame = TicTacToe()
print(game.render())

Conclusion

Congratulations! You've created a simple Tic Tac Toe game using the Aurora programming language. Feel free to enhance the game by adding features like win detection, reset functionality, or a more visually appealing UI. Happy coding! 🎮🚀