Sky

main.js

@@ -1,9 +1,10 @@
 import {key} from './input.js';
-import {createTerrain, clipTerrain, isTerrain, landHeight} from './terrain.js';
+import {createTerrain, clipTerrain, isTerrain, landHeight, collapseTerrain} from './terrain.js';
 import {createCanvas, drawLine, loop, drawText, drawRect} from './gfx.js';
 import {wrap, clamp, parable, deg2rad, vec, randomInt} from './math.js';
 import {drawExplosion, WEAPONS} from './weapons.js';
 import {createOsc, audio} from './sound.js';
+import {createSky} from './sky.js';
 
 const W = 640; const H = 400; const Z = 2;
 
@@ -21,10 +22,9 @@ fb.canvas.style.width = `${W * Z}px`;
 fb.canvas.style.height = `${H * Z}px`;
 document.body.appendChild(fb.canvas);
 
-// Init terrain
+// Init aux canvases
+const sky = createSky(W, H);
 const terrain = createTerrain(W, H);
-
-// Init projectiles
 const projectiles = createCanvas(W, H);
 
 // Init players
@@ -70,7 +70,7 @@ function update() {
 
   else if (state === 'fire') {
     prevProjectile = {...projectile};
-    if (fadeCount++ === 2) {
+    if (fadeCount++ === 1) {
       fadeProjectiles(1);
       fadeCount = 0;
     }
@@ -87,13 +87,18 @@ function update() {
         clipTerrain(terrain, (ctx) => drawExplosion(ctx, projectile.x, projectile.y, weapon.xr));
         projectile.osc.stop();
         projectile = null;
-        state = 'land';
+        state = 'collapse-land';
         return;
       }
     }
   }
 
-  else if (state === 'land') {
+  else if (state === 'collapse-land') {
+    collapseTerrain(terrain);
+    state = 'land-players';
+  }
+
+  else if (state === 'land-players') {
     let stable = true;
     for (let player of players) {
       const y = landHeight(terrain, player.x);
@@ -113,6 +118,7 @@ function update() {
 
 function draw() {
   fb.clearRect(0, 0, W, H);
+  fb.drawImage(sky.canvas, 0, 0);
   fb.drawImage(terrain.canvas, 0, 0);
   if (projectile) drawProjectile();
   fb.drawImage(projectiles.canvas, 0, 0);

sky.js

@@ -0,0 +1,19 @@
+import {createCanvas, drawRect, clipCanvas, plot} from './gfx.js';
+import {randomInt} from './math.js';
+
+export function createSky(width, height) {
+  const ctx = createCanvas(width, height);
+  generateSky(ctx);
+  return ctx;
+}
+
+export function generateSky(ctx) {
+  const {width, height} = ctx.canvas;
+  const [r, g, b] = [70*0.6, 130*0.6, 180*0.6];
+
+  for (let y=0; y<height; y++) {
+    const darken = 1 - (1/height*y);
+    const [dr, dg, db] = [r*darken, g*darken, b*darken];
+    drawRect(ctx, 0, y, width, 1, `rgb(${dr},${dg},${db})`);
+  }
+}

terrain.js

@@ -10,11 +10,26 @@ export function createTerrain(width, height) {
 export function generateTerrain(ctx) {
   const {width, height} = ctx.canvas;
   for (let x=0; x<width; x++) {
-    const h = Math.round(80 + 30 * Math.sin(x/25));
+    const h = Math.round(120 + 30 * Math.sin(x/25));
     drawRect(ctx, x, height-h, 1, h, 'burlywood');
   }
 }
 
+export function collapseTerrain(ctx) {
+  const {width, height} = ctx.canvas;
+  for (let x=0; x<width; x++) {
+    const imageData = ctx.getImageData(x, 0, 1, height);
+
+    let land = 0;
+    for (let y=0; y<height*4; y+=4) {
+      if (imageData.data[y+3] > 0) land++;
+    }
+
+    ctx.clearRect(x, 0, 1, height);
+    drawRect(ctx, x, height-land, 1, land, 'burlywood');
+  }
+}
+
 export function isTerrain(ctx, x, y) {
   const imageData = ctx.getImageData(x, y, 1, 1);
   return imageData.data[3] > 0;