Terrain colors

main.js

@@ -11,7 +11,7 @@ import {AI_TYPES} from './ai.js';
 
 
 let idle = false;
-let state = 'start-turn';
+let state = 'start-game';
 const players = [];
 let currentPlayer = 0;
 let projectile = null;
@@ -60,8 +60,12 @@ for (let color of PLAYER_COLORS) {
 function update() {
   idle = false;
 
-  if (state === 'start-turn') {
+  if (state === 'start-game') {
     wind = randomInt(-MAX_WIND, +MAX_WIND);
+    state = 'start-turn';
+  }
+
+  else if (state === 'start-turn') {
     state = 'aim';
   }
 
@@ -272,7 +276,7 @@ function fadeProjectiles(amount) {
 
 function drawExplosions() {
   const explosionType = EXPLOSION_TYPES[explosion.type];
-  explosionType.draw(explosion, foreground);
+  explosionType.draw(explosion, foreground, terrain);
 }
 
 function drawStatus() {

terrain.js

@@ -1,5 +1,6 @@
-import {createCanvas, drawRect, clipCanvas} from './gfx.js';
-import {coords2index} from './math.js';
+import {createCanvas, drawRect, clipCanvas, drawCircle} from './gfx.js';
+import {coords2index, random, randomInt, clamp} from './math.js';
+import {sample} from './utils.js';
 
 let cachedImageData;
 
@@ -10,18 +11,46 @@ function cacheImageData(ctx) {
 
 export function createTerrain(width, height) {
   const terrain = createCanvas(width, height);
+  const generateTerrain = sample(Object.values(TERRAIN_TYPES));
   generateTerrain(terrain);
   return terrain;
 }
 
-export function generateTerrain(ctx) {
-  const {width, height} = ctx.canvas;
-  for (let x=0; x<width; x++) {
-    const h = Math.round(120 + 30 * Math.sin(x/25));
-    drawRect(ctx, x, height-h, 1, h, 'burlywood');
+const TERRAIN_TYPES = {
+  mountain(ctx) {
+    ctx.color = sample(['palegreen', 'white']); // FIXME
+    const {width, height} = ctx.canvas;
+    const stepCount = 8;
+    const stepSize = width / stepCount;
+
+    let cy = random(.3, .7) * height;
+    let dy = 0;
+
+    for (let x=0; x<width; x++) {
+      if (x % stepSize === 0) dy = ((random(.3, .7)*height)-cy)/stepSize;
+      if (x % (stepSize/16) === 0) dy = dy - random(-1, 1);
+      cy = clamp(0, Math.round(cy + dy), height);
+      drawRect(ctx, x, cy, 1, height-cy, ctx.color);
+    }
+
+    cacheImageData(ctx);
+  },
+
+  sand(ctx) {
+    ctx.color = 'burlywood'; // FIXME
+    const {width, height} = ctx.canvas;
+    const stepCount = 16;
+    const stepSize = width / stepCount;
+
+    for (let s=0; s<=stepCount; s++) {
+      drawCircle(ctx, s*stepSize, height, randomInt(stepSize, stepSize*2), ctx.color);
+      if (s % 3 === 0) drawCircle(ctx, s*stepSize, 0, randomInt(0, stepSize*4), ctx.color);
+    }
+
+    cacheImageData(ctx);
+    collapseTerrain(ctx, width/2, width/2);
   }
-  cacheImageData(ctx);
-}
+};
 
 export function collapseTerrain(ctx, ox, r) {
   const {height} = ctx.canvas;
@@ -37,7 +66,7 @@ export function collapseTerrain(ctx, ox, r) {
     }
 
     ctx.clearRect(left+x, 0, 1, height);
-    drawRect(ctx, left+x, height-land, 1, land, 'burlywood');
+    drawRect(ctx, left+x, height-land, 1, land, ctx.color);
   }
 
   cacheImageData(ctx);

weapons.js

@@ -8,8 +8,8 @@ export function drawExplosion(ctx, x, y, r) {
   drawCircle(ctx, x, y, r, `rgb(${color}, 0, 0)`);
 }
 
-export function drawDirt(ctx, x, y, r) {
-  drawCircle(ctx, x, y, r, 'burlywood');
+export function drawDirt(ctx, x, y, r, c) {
+  drawCircle(ctx, x, y, r, c);
 }
 
 export const WEAPON_TYPES = [
@@ -72,12 +72,12 @@ export const EXPLOSION_TYPES = {
     update(explosion) {
       return ++explosion.cr < explosion.r;
     },
-    draw(explosion, foreground) {
+    draw(explosion, foreground, terrain) {
       const {x, y, cr, osc} = explosion;
       const f = explosion.cr % 2 === 0 ? 220 + explosion.cr : 0;
       osc.frequency.setValueAtTime(f, audio.currentTime);
       osc.frequency.setValueAtTime(0, audio.currentTime+0.1);
-      drawDirt(foreground, x, y, cr);
+      drawDirt(foreground, x, y, cr, terrain.color);
     },
     clip(explosion, terrain) {
       const {x, y, cr} = explosion;
@@ -100,7 +100,7 @@ export const EXPLOSION_TYPES = {
     update(explosion) {
       return ++explosion.cr < explosion.r;
     },
-    draw(explosion, foreground) {
+    draw(explosion, foreground, terrain) {
       const {x, y, cr, osc, pattern} = explosion;
 
       let row = [];
@@ -112,7 +112,7 @@ export const EXPLOSION_TYPES = {
       for (let cy=0; cy<pattern.length; cy++) {
         const row = pattern[cy];
         for (let cx=0; cx<row.length; cx++) {
-          if (row[cx]) plot(foreground, x-cy+cx, y-cy, 'burlywood');
+          if (row[cx]) plot(foreground, x-cy+cx, y-cy, terrain.color);
         }
       }
 
@@ -126,7 +126,7 @@ export const EXPLOSION_TYPES = {
       for (let cy=0; cy<pattern.length; cy++) {
         const row = pattern[cy];
         for (let cx=0; cx<row.length; cx++) {
-          if (row[cx]) plot(terrain, x-cy+cx, y-cy, 'burlywood');
+          if (row[cx]) plot(terrain, x-cy+cx, y-cy, terrain.color);
         }
       }
     },