Tic Tac Toe

Classic two-player game built entirely from UI widgets.

▶ Run in browser

Tags: game ui button grid signals game-state

A complete two-player Tic Tac Toe with no custom draw code: every pixel comes from SimVX UI widgets (Button, Label, GridContainer, VBoxContainer), laid out with anchors so the interface stays centred as the window resizes.

What it shows:

  • Widget composition: a 3x3 GridContainer of Button cells inside a VBoxContainer column, styled entirely through widget properties

  • Signals: each cell’s pressed signal drives the game logic, and the game emits game_over back to the app shell

  • Scene flow: a menu-first state machine (menu, game, result overlay) that swaps child nodes at runtime and tracks wins and draws across the session

  • Runtime property updates: marks, status text, and colours all change by assigning widget properties, and the UI re-renders itself

Controls: Click an empty cell Place the current player’s mark (X and O alternate) New Game Clear the board while a round is still in play Play Again Start the next round from the result overlay Back to Menu Return to the menu, where the session scores are shown

Playable with mouse or touch.

Source files

File

Summary

Lines

main.py

Tic Tac Toe: Classic two-player game built entirely from UI widgets.

42

demo.py

Tic Tac Toe: Scripted demo with menu, gameplay, and verification.

368

game.py

Tic Tac Toe – UI Widget Game

292

menu.py

TicTacToe: Main menu with score tracking.

161

web.py

Tic Tac Toe: Play in your browser via video streaming.

35

Source

 1"""Tic Tac Toe: Classic two-player game built entirely from UI widgets.
 2
 3# /// simvx
 4# tags = ["game", "ui", "button", "grid", "signals", "game-state"]
 5# web = { width = 400, height = 550, root = "TicTacToeApp" }
 6# ///
 7
 8A complete two-player Tic Tac Toe with no custom draw code: every pixel comes from
 9SimVX UI widgets (`Button`, `Label`, `GridContainer`, `VBoxContainer`), laid out with
10anchors so the interface stays centred as the window resizes.
11
12What it shows:
13
14- Widget composition: a 3x3 `GridContainer` of `Button` cells inside a `VBoxContainer`
15  column, styled entirely through widget properties
16- Signals: each cell's `pressed` signal drives the game logic, and the game emits
17  `game_over` back to the app shell
18- Scene flow: a menu-first state machine (menu, game, result overlay) that swaps child
19  nodes at runtime and tracks wins and draws across the session
20- Runtime property updates: marks, status text, and colours all change by assigning
21  widget properties, and the UI re-renders itself
22
23Controls:
24    Click an empty cell   Place the current player's mark (X and O alternate)
25    New Game              Clear the board while a round is still in play
26    Play Again            Start the next round from the result overlay
27    Back to Menu          Return to the menu, where the session scores are shown
28
29Playable with mouse or touch.
30"""
31
32from game import SCREEN_H, SCREEN_W, TicTacToeApp
33
34from simvx.graphics import App
35
36
37def main() -> None:
38    App(title="Tic Tac Toe", width=SCREEN_W, height=SCREEN_H).run(TicTacToeApp())
39
40
41if __name__ == "__main__":
42    main()