The Walking Dead - Survival Strategy Game

A browser-based, turn-based survival strategy game inspired by The Walking Dead comic universe. Two players build teams, move across a hex-grid map, fight walkers and rival survivors, gather supplies, construct factories, and race toward several possible endings.

The project is a static web application built with HTML, CSS, JavaScript ES modules, canvas rendering, JSON game data, and local browser storage. It does not require a backend or build pipeline.

Live Site

Production URL:

https://twd-game.netlify.app/

Gameplay Overview

The game is designed for two local players sharing the same browser session.

Each player starts by selecting three characters from the character catalog. Characters belong to one of three classes:

• Warrior - stronger in combat and wins tied combat pairs.
• Scout - moves farther than standard units.
• Engineer - can build and control production buildings.

Players take turns spending action points on movement, combat, healing, resource transfer, and construction. The board contains walkers, survivor tokens, resource drops, build zones, and player units.

Win and Loss Conditions

The game supports competitive and cooperative outcomes:

• Solo victory - one player wins when the opposing team has no surviving units.
• Shared cooperative victory - both players win together by reaching the survival objectives:
  • 3 active factories
  • 20 total team members
  • 200 Food
  • 200 Fuel
  • 200 Ammo
• Shared defeat - both players lose if the walker threat reaches the critical infection level.

The objective strip above the board tracks threat, factories, team size, and shared resource progress during play.

Main Features

• Hex-grid strategy board rendered on a canvas.
• Two-player local turn system.
• Character draft flow for new games.
• Class-based unit behavior.
• Action point economy.
• Movement, combat, healing, support, and building actions.
• Dice-based combat system with animated combat rounds.
• Walker encounters and survivor rescue events.
• Resource economy with Food, Fuel, and Ammo.
• Factory construction and timed production.
• Save and load support through localStorage.
• Hungarian and English UI translations.
• Light and dark themes.
• Music and sound effect volume settings.
• Modular HTML fragments loaded at runtime.
• Image, icon, sound, and music assets preloaded for smoother gameplay.
• Small-screen gate for devices that are too small for the board experience.

Technology Stack

• HTML5 for the application shell and loaded fragments.
• CSS3 for layout, responsive behavior, themes, animation, and UI styling.
• JavaScript ES modules for game logic and application structure.
• Canvas API for board rendering.
• jQuery 3.7.1 from CDN for DOM interaction.
• JSON for character and translation data.
• Browser localStorage for settings and saved games.
• Netlify-compatible static hosting.

Project Structure

.
├── index.html                  # App entry point and SEO/social metadata
├── main.js                     # Boot loader, partial loading, asset preload
├── main.css                    # CSS entry file
├── fragments/                  # HTML fragments injected into index.html
├── styles/                     # Feature-specific CSS files
├── modules/
│   ├── audio/                  # Music and UI sound helpers
│   ├── board/                  # Hex board engine, rendering, movement, actions
│   ├── combat/                 # Dice combat modal, renderers, constants, sounds
│   ├── core/                   # Settings, preload, cache, utility helpers
│   ├── game/                   # Bootstrap, runtime flow, saves, objectives, setup
│   ├── i18n/                   # Translation loading and DOM application
│   └── ui/                     # Cards, main menu, modal helpers
└── assets/
    ├── characters/             # Character and walker images
    ├── data/                   # characters.json and i18n.json
    ├── icons/                  # Action, resource, team, and UI icons
    ├── images/                 # Screens, backgrounds, endings, empty states
    ├── buildings/              # Factory/building artwork
    ├── sounds/                 # Short UI, dice, combat, and movement effects
    └── music/                  # Menu, gameplay, and ending music

Running Locally

Because the app loads ES modules, JSON files, and HTML fragments through fetch, it should be served through a local web server instead of opening index.html directly from the file system.

From the project root, run one of the following:

python3 -m http.server 8000

Then open:

http://localhost:8000/

Alternative static servers also work, for example:

npx serve .

Data Files

assets/data/characters.json

Contains the character catalog used during team setup and recruitment. Each character includes:

• unique key
• display name
• class/type key
• image path
• Hungarian and English descriptions
• health values
• starting resources

assets/data/i18n.json

Contains localized UI strings for Hungarian and English. The app applies translations through data-i18n and data-i18n-html attributes in the HTML fragments.

Game Persistence

The project stores data in the browser:

• Settings key: twd_settings_v1
• Save-game key: twd_game_saves_v1

Saved games include team state, health, resources, board markers, factories, action points, and production timing so a match can continue from the previous state.

Development Notes

• There is no package manager setup required for the current static version.
• The app depends on jQuery from a CDN and Google Fonts from Google-hosted font endpoints.
• The boot process in main.js loads HTML fragments, preloads key assets, wires the intro fallback, and imports the game bootstrap module.
• Most game behavior is split into small domain modules under modules/board, modules/game, and modules/combat.
• Canvas board logic is isolated behind createBoardEngine().
• Runtime settings are normalized before being saved, which protects the game from invalid localStorage values.

Credits and Disclaimer

This is an educational student project created at the University of Szeged. It is inspired by The Walking Dead comic series. All related intellectual property, characters, music references, and original source material belong to their respective rights holders.