Canvas Space Battle

Intro

Another post in the "canvas drawing series". You can look up the basics of drawing etc. in the previous posts:

1. Canvas Crossroad
2. Canvas Balloons
3. Canvas Bus
4. Canvas Trains
5. Canvas, circular motions and networks
6. Canvas Wipers
7. DIY Canvas Fountain
8. Canvas Random Spherical Effects
9. Canvas Ant Colony Optimization

Canvas Space Battle

I always liked watching Star Trek. The thing I love the most are space battle scenes. Especially the ones that are on the epic scales :)

Ship types

The battle is between the Cardassian, the United Federation of Planets and the Romulans. Every race has it's own ship property, for instance:

 shipTypes.push({
  color : '#CAD8DB',
  warpTrailColor : 'rgba(141, 189, 240, 0.5)',
  trailLife : 30,
  impulseSpeedMax : 3,
  newDirectionCycle : 40,
  warpCycleMin : 350,
  warpCycleVar : 900,
  range : 33,
  fireColor : 'rgba(237, 209, 133, 0.8)',
  fireRecharge : 40,
  fireDischarge : 10
 });

Why Warp trails?

The tactical warp jumps are inspired by the following wiki:

In 2355, the Stargazer was seriously damaged in a battle with an unknown enemy vessel, later discovered to be a Ferengi ship. Picard managed to destroy the enemy vessel using the Stargazer's warp engines in a unique tactical maneuver (later named the "Picard Maneuver").

Ship movement

Ship movement is based upon a counter, every time the counter drops to zero the ship selects new direction to move to and resets the counter. There is a second counter (with substantially greater value) that's in charge for the warp jump. Upon jumping to warp the ship moves to random new coordinates and leaves a warp trail.

Warp trails

Warp trails are stored in linked list because storing them in arrays would perhaps be to operation heavy especially if the number of the ships would increase or the warp jumping interval would shorten for a certain race. The other advantage is that every trail can remove itself from the animation loop upon its end of life.

Phaser fire

Phaser firing is determined by counters. There is impulse duration counter and time between phaser pulse counter. It's race specific and configurable. When shooting there is small random offset so that if the other ship is shooting back the trail is still visible.

And here's my example on:
Codepen