Terrain and tanks

main.js

@@ -1,6 +1,6 @@
 import {key} from './input.js';
-import {createTerrain, clipTerrain, isTerrain} from './terrain.js';
-import {createCanvas, drawCircle, drawLine, plot, drawParagraph, loop, drawText} from './gfx.js';
+import {createTerrain, clipTerrain, isTerrain, landHeight} from './terrain.js';
+import {createCanvas, drawCircle, drawLine, plot, drawParagraph, loop, drawText, drawRect} from './gfx.js';
 import {wrap, clamp, parable, deg2rad, vec} from './math.js';
 import {drawExplosion, WEAPONS} from './weapons.js';
 
@@ -24,8 +24,8 @@ const terrain = createTerrain(W, H);
 const projectiles = createCanvas(W, H);
 
 // Init players
-players.push({x:100, y:H-80, a:0, p:100, c:'red', weapon:WEAPONS[0]});
-players.push({x:220, y:H-80, a:0, p:100, c:'blue', weapon:WEAPONS[1]});
+players.push({x:100, y:landHeight(terrain, 100), a:0, p:100, c:'red', weapon:WEAPONS[0]});
+players.push({x:220, y:landHeight(terrain, 220), a:0, p:100, c:'blue', weapon:WEAPONS[1]});
 
 function update() {
   if (state === 'aim') {
@@ -43,7 +43,7 @@ function update() {
     } else if (key(' ')) {
       state = 'fire';
       fadeProjectiles();
-      const [px, py] = vec(x, y, a+180, 10);
+      const [px, py] = vec(x, y-3, a+180, 3);
       projectile = {
         player: player,
         weapon: player.weapon,
@@ -78,13 +78,14 @@ function draw() {
   if (projectile) drawProjectile();
   fb.drawImage(projectiles.canvas, 0, 0);
   for (let tank of players) drawPlayer(tank);
+  drawStatus();
 }
 
 function drawPlayer(player) {
   const {x, y, a, c} = player;
-  const [px, py] = vec(x, y, a+180, 10);
-  drawLine(fb, x, y, Math.round(px), Math.round(py), c);
-  drawStatus();
+  const [px, py] = vec(x, y-3, a+180, 3);
+  drawLine(fb, x, y-3, Math.round(px), Math.round(py), c);
+  drawRect(fb, x-3, y-2, 6, 3, c);
 }
 
 function drawProjectile() {

terrain.js

@@ -1,13 +1,18 @@
-import {createCanvas, drawRect, clipCanvas} from './gfx.js';
+import {createCanvas, drawRect, clipCanvas, plot} from './gfx.js';
+import {randomInt} from './math.js';
 
 export function createTerrain(width, height) {
   const terrain = createCanvas(width, height);
-  generateTerrain(terrain, width, height);
+  generateTerrain(terrain);
   return terrain;
 }
 
-export function generateTerrain(ctx, width, height) {
-  drawRect(ctx, 0, height-80, width, 80, 'burlywood');
+export function generateTerrain(ctx) {
+  const {width, height} = ctx.canvas;
+  for (let x=0; x<width; x++) {
+    const h = Math.round(80 + 8 * Math.sin(x/25));
+    drawRect(ctx, x, height-h, 1, h, 'burlywood');
+  }
 }
 
 export function isTerrain(ctx, x, y) {
@@ -15,6 +20,14 @@ export function isTerrain(ctx, x, y) {
   return imageData.data[3] > 0;
 }
 
+export function landHeight(ctx, x) {
+  const {height} = ctx.canvas;
+  const imageData = ctx.getImageData(x, 0, 1, height);
+  for (let y=height-1; y>=0; y--) {
+    if (imageData.data[y*4+3] === 0) return y;
+  }
+}
+
 export function clipTerrain(ctx, fn) {
   return clipCanvas(ctx, fn);
 }