WASM F-22 Raptor Flight Simulator

Introduction

Written in pure C

Browser-based flight simulator featuring the iconic F-22 Raptor. This project demonstrates real-time 3D graphics, procedural terrain, dynamic weather, and a custom heads-up display (HUD) - all running in the browser using WebAssembly and JavaScript. The simulator is designed for both fun and as a technical showcase of modern web capabilities.

Radar data

This project is a WIP.

Hint - Click inside the play area and tap W to accelerate.

Live Demo

📊 FLIGHT DATA

FPS: --

Speed: -- units/s

Throttle: --%

Altitude: -- units

Position: --, --, --

Heading: --°

Press 'I' to toggle

RADAR

🚀 Engine Control

W - Increase Throttle

S - Decrease Throttle

✈️ Flight Control

↑ - Pitch Up

↓ - Pitch Down

← - Yaw Left

→ - Yaw Right

🔄 Roll Control

A - Roll Left

D - Roll Right

📊 HUD Controls

I - Toggle Info Panel

Features

Procedural Terrain: Fly over algorithmically generated landscapes for endless variety.
Dynamic Clouds: Realistic sky and weather effects enhance immersion.
F-22 Raptor Model: Detailed aircraft rendering and flight physics.
HUD Overlay: On-screen flight data, including speed, altitude, throttle, and heading.
Radar Display: Circular radar with animated sweep and aircraft position indicator.
Keyboard Controls: Intuitive WASD and arrow key controls for throttle, pitch, yaw, and roll.
Info Panel: Toggleable panel showing real-time flight stats (press I).

How to Use

Click on the simulator canvas to focus and enable keyboard controls.
Use W/S to increase/decrease throttle.
Use ↑/↓ to pitch up/down.
Use ←/→ to yaw left/right.
Use A/D to roll left/right.
Press I to toggle the info panel with detailed flight data.

All controls are displayed below the simulator for quick reference.

Technical Overview

Rendering: Uses an HTML5 <canvas> for all graphics, with overlays for HUD and radar.
Performance: Core simulation and rendering are powered by WebAssembly (WASM) for smooth, real-time updates.
UI Overlays: HUD and radar are implemented as absolutely positioned HTML elements layered over the canvas.
Data Sync: JavaScript bridges WASM simulation data to the UI, updating flight stats and radar in real time.
Accessibility: Canvas is focusable and keyboard input is managed for a seamless experience.

Project Structure

airplane.html: Main entry point, contains canvas, overlays, and all UI/controls.
airplane_complex.js: Compiled WebAssembly module for simulation and rendering.
CSS: Embedded for layout, HUD, radar, and control panels.

Conclusion & Recommendations

This project demonstrates how modern web technologies can deliver interactive, high-performance simulations. For best results, use a modern browser with WebAssembly support. Future improvements could include multiplayer, more aircraft, or VR support. Explore the code to learn about integrating WASM with JavaScript and advanced canvas techniques.