Building a Tic-Tac-Toe Game with Rust, Bevy, and WebAssembly

Introduction

I recently built a Tic-Tac-Toe game using Rust, the Bevy game engine, and WebAssembly.
This project combines modern game development with artificial intelligence, running directly
in the browser thanks to WebAssembly. Let me walk you through how it works and what I learned.

Technical Stack

• 🦀 Rust: Systems programming language
• 🎮 Bevy: Data-driven game engine
• 🧠 Minimax AI: Advanced game algorithm
• 🌐 WebAssembly: Browser-based deployment
• 🎨 HTML/CSS: Responsive game interface

Key Features

1. Interactive Gameplay

   • Click-to-play interface
   • Real-time move validation
   • Visual feedback with colored squares

2. AI Opponent

   • Minimax algorithm implementation
   • Alpha-beta pruning optimization
   • Strategic decision making

3. Modern Web Interface

   • Responsive design
   • Loading animations
   • Clean, gradient-based UI
   • Tech stack badges

4. Game State Management

   • Win detection
   • Draw conditions
   • Easy restart functionality

Code Highlights

Gameboard Setup

// Key components of the board initialization
pub struct BoardState {
    pub board: [[Option<Player>; 3]; 3],
    pub current_player: Player,
    pub game_over: bool,
    pub winner: Option<Player>
}

Rust

AI Implementation

// Minimax algorithm with alpha-beta pruning
fn minimax(board: &[[Option<Player>; 3]; 3], depth: i32, maximizing: bool) -> i32 {
    // ... algorithm implementation
}

Rust

Learning Points

1. Rust and ECS Architecture

   • Component-based design
   • System organization
   • Resource management

2. WebAssembly Integration

   • Rust-to-WASM compilation
   • Browser performance optimization
   • Web API interactions

3. Game AI Development

   • Minimax algorithm implementation
   • Game tree traversal
   • Performance optimization

Deployment Process

1. Build Process:

   • Rust compilation to WASM
   • Asset bundling
   • CSS/HTML optimization

2. Hosting:

   • Static file deployment
   • WebAssembly loading
   • Browser compatibility

Docker Integration

Development Environment

One of the key aspects of this project is its containerized development environment using Docker. This ensures consistent builds across different platforms and simplifies the setup process for contributors.

Docker Setup

The project uses a multi-stage Docker build process:

1. Base development image with Rust toolchain
2. WebAssembly compilation environment
3. Production-ready web server

Key Docker Components

project/
├── Dockerfile           # Main container configuration
├── docker-compose.yml   # Development orchestration
└── .dockerignore       # Build optimization rules

Build Process

The Docker setup handles several crucial aspects:

1. Development Environment

• Rust toolchain installation
• WASM target setup
• Development dependencies

1. Build Tools

• trunk for asset bundling
• wasm-pack for WebAssembly compilation
• System libraries for Bevy

1. Development Workflow

• Hot reloading support
• Volume mounting for live coding
• Port forwarding for local testing

Running the Project

To start development:

# Build and start the development server
docker-compose up --build

# Access the game at http://localhost:8080

# Stop the server
docker-compose down

Benefits

1. Consistency

• Same environment for all developers
• Reproducible builds
• Simplified dependency management

1. Cross-Platform

• Works on Windows, macOS, and Linux
• No local Rust installation required
• Consistent WebAssembly compilation

1. Production Ready

• Optimized builds for deployment
• Small container footprint
• Easy cloud deployment

This Docker integration makes the project more accessible to contributors and ensures reliable builds across different platforms and environments.

Future Improvements

1. Multiplayer Support
2. Difficulty Levels
3. Move Animation
4. Game History
5. Score Tracking

Repository Sections

bevy-tic-tac-toe/
├── src/
│   ├── components/
│   ├── systems/
│   ├── resources/
│   └── main.rs
├── dist/
│   └── index.html
├── Cargo.toml
└── README.md

Conclusion

This project demonstrates how modern web games can be built using Rust and WebAssembly,
providing a smooth, native-like experience in the browser. The combination of Bevy's ECS
architecture with Rust's safety guarantees made it possible to create a robust,
performant game with minimal code.