Skip to content

Gallind/Sky-Combat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

115 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Sky Combat

A 3D aerial combat game built with Three.js. Fly a fighter jet, shoot down drone swarms and enemy jets, survive every wave, and clear all five levels.

Three.js No Build Vanilla JS


Play

๐ŸŽฎ Play Online

Play now on Netlify โ†’

๐Ÿ  Run Locally

No install, no build step. Just open index.html in a browser.

For live-reload during development:

# Option A โ€” VS Code: right-click index.html โ†’ "Open with Live Server"

# Option B โ€” Python
python3 -m http.server 8080
# then open http://localhost:8080

Controls

Input Action
W Throttle up (accelerate)
S Throttle down (decelerate)
A / D Yaw left / right
Mouse Aim crosshair
Space (hold) Fire bullets
LMB (click) Fire missile
R Barrel roll (destroys all incoming missiles)
ESC Pause / resume

Missile targeting: aim at an enemy and click LMB. Missiles fired at jets home automatically. Missiles fired at drones fly straight from your nose โ€” use the aim dot for direction.


Levels

# Name Waves Notes
1 First Contact 3 Mostly drones, 1โ€“2 jets
2 Interceptors 3 Balanced drones + jets
3 Ace Squadron 4 Jet-heavy, elite AI
4 Full Assault 5 Large mixed swarms
5 Last Stand 6 Max enemies, no mercy

Complete all waves in a level to unlock the next. Each level starts a countdown then drops you straight into the first wave.


Enemies

Drones โ€” slow, fragile (1 bullet = destroyed). Fire straight-shot missiles with a splash radius. Bigger hitbox, easier to see.

Enemy Jets โ€” fast (~100 u/s), orbit the player, attack in bursts. Fire bullet sprays and homing missiles. Take multiple hits to destroy.


Mechanics

  • Health โ€” 100 HP. Enemy bullets deal 10 HP each; enemy missiles deal 20 HP.
  • Bullets โ€” rapid fire but overheat after ~3 seconds of continuous firing. Cools automatically; full overheat locks the gun for 2 seconds.
  • Speed lines โ€” appear above 60% of max speed for visual feedback.
  • Camera โ€” chase cam follows the jet with yaw-adjusted offset and dynamic FOV (wider at high speed).
  • Aim dot โ€” static indicator above the jet nose shows where bullets will fly.
  • Flythrough โ€” after a level ends or the player dies, the jet keeps coasting while the result screen fades in over the scene.

Project Structure

index.html          โ€” HTML shell + UI overlays (Tailwind CSS)
js/
  config.js         โ€” all tunable constants
  input.js          โ€” keyboard + pointer lock + virtual cursor
  flight.js         โ€” throttle, yaw, barrel roll
  drone.js          โ€” player jet mesh and visuals
  enemies.js        โ€” drone + jet AI state machines
  weapons.js        โ€” bullet/missile pools, heat system, splash damage
  combat.js         โ€” wave state machine, spawning, HP
  effects.js        โ€” explosions, particles, speed lines
  audio.js          โ€” Web Audio engine + HTML Audio music tracks
  levels.js         โ€” level data loading (assets/levels.json)
  ui.js             โ€” HUD, speed gauge, crosshair, aim dot, screens
  course.js         โ€” sky environment (clouds, terrain decorations)
  main.js           โ€” init, game loop, state machine wiring
assets/
  models/           โ€” GLB meshes (player jet, enemy jet, drone, missiles)
  sounds/
    music/          โ€” background loop, level-complete, game-over tracks
    sfx/            โ€” WAV files for bullets, explosions, engine, alerts
  levels.json       โ€” level + wave definitions

Tech Stack

Library Version Use
Three.js r128 3D scene, meshes, camera, GLB loading
Tailwind CSS v4 (CDN) UI overlays

No bundler, no transpiler. All scripts loaded via <script> tags in dependency order.


Assignment Context

Exercise 4 (Free-style) โ€” From Idea to App, Reichman University, Semester 4. The base project was a 3D ball-runner game. This submission transforms it into a full aerial combat experience.

About

Sky Combat is a 3D browser-based aerial combat game built with JavaScript and Three.js, featuring modular physics and collision detection. It uses WebGL to deliver high-performance aerial engagements against challenging AI enemies.

Topics

Resources

License

Stars

Watchers

Forks

Contributors