Skip to content

Tic-Tac-Toe

Screenshot

The Tic-Tac-Toe example shows how to develop a complete turn-based multiplayer game by implementing the well-known paper-and-pencil game for two players, also known as Noughts and Crosses. In this game players take turns marking the spaces in a three-by-three grid with X or O; the player who succeeds in placing three of their marks in a horizontal, vertical or diagonal row is the winner.

This example features a server-side Extension which implements the main game logic: it determines if the game should start or stop, validates the player moves, updates the spectators if they join a game already in progress, checks if the victory condition is met, etc. Using a server-side Extension — or, in other words, having an authoritative server — is a more flexible and secure option with respect to keeping all the game logic on the client-side only. Even if SmartFoxServer provides powerful tools for developing application logic on the client, this approach can be limiting when your games start getting more complex. Additionally, keeping the game state on the server-side allows overall better security from hacking or cheating attempts. The server-side Extension is dynamically attached to the SFSGame Room when created; it updates the game state and sends game-related events back to the JavaScript client, which in turn updates the Game view accordingly.

This example also shows how to use two extra features provided by Game Rooms: player ids and spectators. Each user joining a Game Room is automatically assigned a unique player id which facilitates the tasks of starting and stopping the game, determining whose turn is it, etc. Spectators instead can replace players when they leave, by means of a dedicated client request.

Prerequisites: raylib

TicTacToe uses raylib 5.x for graphics and rendering. If raylib is installed, the build uses it. If not, the build downloads raylib 5.5 and compiles it: this needs an internet connection the first time.

On Linux, compiling raylib needs these development packages:

# Debian/Ubuntu
sudo apt install libasound2-dev libx11-dev libxrandr-dev libxi-dev libgl1-mesa-dev \
                 libglu1-mesa-dev libxcursor-dev libxinerama-dev libwayland-dev libxkbcommon-dev

# Fedora
sudo dnf install gcc-c++ cmake mesa-libGL-devel alsa-lib-devel libX11-devel libXrandr-devel \
                 libXi-devel libXcursor-devel libXinerama-devel libatomic

Server side Extension

The server Extension is provided in the distribution under TicTacToeExtension/ in 4 different languages: Java, Kotlin, Scala and Groovy. For the sake of running this example follow these steps:

  • Under your SmartFoxServer 3 installation create a new folder in server/extensions/ called TicTacToe/
  • Copy the provided Extension from TicTacToeExtension/java/dist/TicTacToeExtension.jar to the newly created folder
  • Start/restart SmartFoxServer 3

Source code