Vortex Game Tool

A mobile-friendly web application to automate the classic Vortex Game.

The game was played by our Scout Troop with a real grid marked on the floor and pen and paper to track the Vortex. This tool provides a digital game board, automatic rule enforcement, and adds sound effects to indicate ready to move and give the player a sense of their pending vapourisation.

We found that the Scouts enjoyed controlling the Vortex as much as they enjoyed playing the game. The sound works better with an external speaker.

This game was also used as a learning exercise in the REDUX toolkit. REDUX made features such as Undo/Redo easy to implement and allowed separation of the view state and the underlying sound subsystem.

About the Game

The Vortex Game is based on the "Vortex" challenge from the 1980s British TV show The Adventure Game. Players navigate a hexagonal (isometric) grid trying to cross from one end of the room to the other without stepping on the invisible Vortex. Players and Vortex take turns to move. The Vortex cannot capture the player, but the player can step into the Vortex.

Game Rules

The Board

• The game is played on a hexagonal grid with 7 ranks (rows) alternating between 3 and 4 nodes across.
• Players can move in 6 directions: North-West, North-East, West, East, South-West, South-East

Gameplay

1. Player starts at the top of the grid (rank 0)
2. Vortex starts at the bottom of the grid (rank 6)
3. Players alternate turns:
   • Player's turn: Move to an adjacent cell
   • Vortex's turn: The vortex moves toward the player
4. Objective: Reach one of the three safe positions at the far end without stepping on the Vortex
5. Game Over: If the player occupies the same cell as the vortex

Optional Rules

• Vaporization Test: Allow players to throw objects into the vortex when nearby (for testing if a cell is safe)

Features

• Interactive Game Board: Touch/click-friendly hexagonal grid
• Turn-by-Turn Tracking: Automatically tracks whose turn it is
• Rule Enforcement: Optional validation of legal moves
• Undo/Redo: Rewind up to 5 moves if mistakes are made
• Sound Effects:
  • Drone synth that changes with player-vortex distance
  • Movement sound effects
  • Vaporization effects
• Mobile Optimized: Designed to run on phones/tablets during gameplay

Technology Stack

• React 19 with TypeScript
• Redux Toolkit for state management
• Web Audio API for sound synthesis
• Webpack for bundling
• Redux Undo for move history

Getting Started

Prerequisites

• Node.js (v14 or higher recommended)
• npm or similar package manager

Installation

# Clone the repository
git clone <repository-url>
cd VortexGame

# Install dependencies
npm install

Development

# Development build with watch mode
npx webpack --watch

# Upload to a hosting site, or locally use Node's http-server:
npx http-server html -p 8000

Open your browser to http://localhost:8000

Production Build

# Build optimized bundle
npx webpack --config webpack.config-prod.js

The compiled JavaScript will be output to html/script/vortex.js

Usage

Starting a Game

1. Open the app on your mobile device or browser
2. The game board displays with the player (top) and vortex (bottom), the point of view of the controller in the original game
3. Configure game rules and audio in Settings if desired

Playing

1. Player Turn: Tap a highlighted cell to move your player
2. Vortex Turn: Tap a highlighted cell to move the vortex
3. Use Undo/Redo buttons if you make a mistake
4. Click New Game to reset

Settings

• Game Rules: Toggle rule enforcement and vaporization testing
• Sound Controls: Adjust volumes, configure musical notes, enable/disable channels
• Mixer: Fine-tune audio levels for different sound effects

Project Structure

VortexGame/
├── html/               # Static HTML, CSS, and output
│   ├── index.html
│   ├── style.css
│   └── script/         # Built JavaScript (generated)
├── src/
│   ├── app/           # Redux store and app setup
│   ├── features/      # Game features
│   │   ├── gameBoard/ # Game logic and UI
│   │   ├── gameControl/   # Rule settings
│   │   ├── soundEngine/   # Audio synthesis
│   │   ├── settings/      # Settings UI
│   │   └── error/         # Error handling
│   ├── index.tsx      # App entry point
│   └── types.ts       # Shared TypeScript types
├── package.json
├── tsconfig.json
└── webpack.config.js

License

To Be Determined. Currently:

UNLICENSED - All rights reserved

Acknowledgments

• Inspired by The Adventure Game (BBC TV, 1980-1986)
• Created for Scout group activities
• Built with modern web technologies for a retro gaming experience