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.

41

demo.py

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

368

game.py

Tic Tac Toe – UI Widget Game

280

menu.py

TicTacToe: Main menu with score tracking.

155

web.py

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

35

Source

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