Explosion types

constants.js

@@ -13,14 +13,9 @@ export const PLAYER_COLORS = [
   'orchid',
 ];
 
-export const WEAPON_TYPES = [
-  {id:'baby-missile', name:'Baby Missile', xr:5},
-  {id:'missile', name:'Missile', xr:10},
-  {id:'baby-nuke', name:'Baby Nuke', xr:50},
-  {id:'nuke', name:'Nuke', xr:100},
-];
-
 export const PLAYER_INITIAL_POWER = 300;
+export const PLAYER_MAX_ENERGY = 100;
+export const PLAYER_ENERGY_POWER_MULTIPLIER = 10;
 export const MAX_WIND = 25;
 export const REDUCTION_FACTOR = 10;
 export const MIN_BULLET_SOUND_FREQUENCY = 220;

main.js

@@ -1,11 +1,11 @@
-import {H, MAX_BULLET_SOUND_FREQUENCY, MAX_WIND, MIN_BULLET_SOUND_FREQUENCY, PLAYER_COLORS, PLAYER_INITIAL_POWER, REDUCTION_FACTOR, W, WEAPON_TYPES, Z, PROJECTILE_ITERATIONS_PER_FRAME, PROJECTILE_ITERATION_PROGRESS} from './constants.js';
+import {H, MAX_BULLET_SOUND_FREQUENCY, MAX_WIND, MIN_BULLET_SOUND_FREQUENCY, PLAYER_COLORS, PLAYER_INITIAL_POWER, REDUCTION_FACTOR, W, Z, PROJECTILE_ITERATIONS_PER_FRAME, PROJECTILE_ITERATION_PROGRESS, PLAYER_MAX_ENERGY, PLAYER_ENERGY_POWER_MULTIPLIER} from './constants.js';
 import {createCanvas, drawLine, drawRect, drawText, loop} from './gfx.js';
 import {key} from './input.js';
 import {clamp, deg2rad, parable, randomInt, vec, wrap} from './math.js';
 import {createSky} from './sky.js';
 import {audio, createOsc} from './sound.js';
 import {clipTerrain, collapseTerrain, createTerrain, isTerrain, landHeight} from './terrain.js';
-import {drawExplosion} from './weapons.js';
+import {drawExplosion, WEAPON_TYPES, EXPLOSION_TYPES} from './weapons.js';
 
 
 let state = 'start-turn';
@@ -34,7 +34,12 @@ let i=0;
 for (let color of PLAYER_COLORS) {
   const x = Math.round(50 + (W-100) / 5 * i);
   const a = x > W/2 ? 45 : 180-45;
-  players.push({x, y:landHeight(terrain, x), a, p:PLAYER_INITIAL_POWER, c:color, weapon:WEAPON_TYPES[i%WEAPON_TYPES.length]});
+  players.push({
+    x, y: landHeight(terrain, x), a,
+    p: PLAYER_INITIAL_POWER, c: color,
+    weapon: WEAPON_TYPES[i % WEAPON_TYPES.length],
+    energy: PLAYER_MAX_ENERGY,
+  });
   i++;
 }
 
@@ -46,16 +51,16 @@ function update() {
 
   else if (state === 'aim') {
     const player = players[currentPlayer];
-    const {x, y, a, p} = player;
+    const {x, y, a, p, energy} = player;
 
     if (key('ArrowLeft')) {
       player.a = wrap(0, a -1, 180);
     } else if (key('ArrowRight')) {
       player.a = wrap(0, a +1, 180);
     } else if (key('ArrowUp')) {
-      player.p = clamp(100, p +5, 1000);
+      player.p = clamp(0, p +1, energy * PLAYER_ENERGY_POWER_MULTIPLIER);
     } else if (key('ArrowDown')) {
-      player.p = clamp(100, p -5, 1000);
+      player.p = clamp(0, p -1, energy * PLAYER_ENERGY_POWER_MULTIPLIER);
     } else if (key(' ')) {
       state = 'fire';
       const [px, py] = vec(x, y-3, a+180, 5);
@@ -72,10 +77,12 @@ function update() {
 
   else if (state === 'fire') {
     prevProjectile = {...projectile};
+
     if (fadeCount++ === 1) {
       fadeProjectiles(1);
       fadeCount = 0;
     }
+
     for (let i=0; i<PROJECTILE_ITERATIONS_PER_FRAME; i++) {
       const {weapon, ox, oy, a, p, t} = projectile;
       const [x, y] = parable(t, ox, oy, deg2rad(180+a), p/REDUCTION_FACTOR, wind/REDUCTION_FACTOR);
@@ -87,12 +94,9 @@ function update() {
 
       if (y > H || isTerrain(terrain, x, y)) {
         projectile.osc.stop();
-        explosion = {
+        const explosionSpec = weapon.explosion;
-          x: projectile.x,
+        const explosionType = EXPLOSION_TYPES[explosionSpec.type];
-          y: projectile.y,
+        explosion = explosionType.create(explosionSpec, projectile.x, projectile.y);
-          r: weapon.xr,
-          cr: 0,
-        }
         state = 'explosion';
         return;
       }
@@ -100,14 +104,17 @@ function update() {
   }
 
   else if (state === 'explosion') {
-    if (explosion.cr++ >= explosion.r) {
+    const {weapon} = projectile;
+    const explosionType = EXPLOSION_TYPES[weapon.explosion.type];
+
+    if (!explosionType.update(explosion)) {
       explosion = null;
       state = 'land-collapse';
     }
   }
 
   else if (state === 'land-collapse') {
-    collapseTerrain(terrain, projectile.x, projectile.weapon.xr);
+    collapseTerrain(terrain, projectile.x, 100); // FIXME: Hardcoded radius
     projectile = null;
     state = 'land-players';
   }
@@ -125,7 +132,15 @@ function update() {
   }
 
   else if (state === 'end-turn') {
+    let i = 0;
+    let player;
+
+    do {
       currentPlayer = wrap(0, currentPlayer+1, players.length);
+      player = players[currentPlayer];
+      if (i++ === players.length) state = 'game-over';
+    } while (player.energy <= 0)
+
     state = 'start-turn';
   }
 }
@@ -134,7 +149,7 @@ function draw() {
   foreground.clearRect(0, 0, W, H);
   if (projectile) drawProjectile();
   for (let tank of players) drawPlayer(tank);
-  if (explosion) performExplosions();
+  if (explosion) drawExplosions();
   drawStatus();
 }
 
@@ -157,10 +172,10 @@ function fadeProjectiles(amount) {
   projectiles.putImageData(imageData, 0, 0);
 }
 
-function performExplosions() {
+function drawExplosions() {
-  const {x, y, cr} = explosion;
+  const {weapon} = projectile;
-  drawExplosion(foreground, x, y, cr);
+  const explosionType = EXPLOSION_TYPES[weapon.explosion.type];
-  clipTerrain(terrain, (ctx) => drawExplosion(ctx, x, y, cr));
+  explosionType.draw(explosion, foreground, terrain);
 }
 
 function drawStatus() {

terrain.js

@@ -1,5 +1,4 @@
 import {createCanvas, drawRect, clipCanvas, plot} from './gfx.js';
-import {randomInt} from './math.js';
 
 export function createTerrain(width, height) {
   const terrain = createCanvas(width, height);

weapons.js

@@ -1,6 +1,47 @@
 import {drawCircle} from './gfx.js';
+import {clipTerrain} from './terrain.js';
 
 export function drawExplosion(ctx, x, y, r) {
   const color = 255 - (16 * (r % 16));
   drawCircle(ctx, x, y, r, `rgb(${color}, 0, 0)`);
 }
+
+export const WEAPON_TYPES = [
+  {id:'baby-missile', name:'Baby Missile', explosion:{type:'blast', r:5}},
+  {id:'missile', name:'Missile', explosion:{type:'blast', r:10}},
+  {id:'baby-nuke', name:'Baby Nuke', explosion:{type:'blast', r:50}},
+  {id:'nuke', name:'Nuke', explosion:{type:'blast', r:100}},
+  {id:'dirt', name:'Dirt', explosion:{type:'dirt', r:25}},
+  {id:'large-dirt', name:'Ton of Dirt', explosion:{type:'dirt', r:75}},
+];
+
+export const EXPLOSION_TYPES = {
+  blast: {
+    create(spec, x, y) {
+      const {r} = spec;
+      return {x, y, r, cr:0};
+    },
+    update(explosion) {
+      return ++explosion.cr < explosion.r;
+    },
+    draw(explosion, foreground, terrain) {
+      const {x, y, cr} = explosion;
+      drawExplosion(foreground, x, y, cr);
+      clipTerrain(terrain, (ctx) => drawExplosion(ctx, x, y, cr));
+    },
+  },
+  dirt: {
+    create(spec, x, y) {
+      const {r} = spec;
+      return {x, y, r, cr:0};
+    },
+    update(explosion) {
+      return ++explosion.cr < explosion.r;
+    },
+    draw(explosion, foreground, terrain) {
+      const {x, y, cr} = explosion;
+      drawExplosion(foreground, x, y, cr);
+      drawExplosion(terrain, x, y, cr);
+    },
+  },
+}