Clean up some

README.md

@@ -122,9 +122,7 @@ Delete your `.sitegen_cache` file.
 
 ## todo
 
-* add more than one ship
 * destroy a target ship by shooting them with the cannon
 * make corners not bouncy (leave them bouncy for now?)
-* add a Draw system?
 * wall entities
-* node entities?
+* ship-ship collision

html/images/space.svg

@@ -25,7 +25,7 @@
       fill: gray;
     }
 
-    .ship circle#body {
+    .ship circle.body {
       fill: white;
     }
 
@@ -43,6 +43,16 @@
       opacity: 0;
     }
 
+    .explosion {
+      r: 5px;
+      transition: r 0.01s ease-in;
+      opacity: 0.7;
+    }
+
+    .explosion.flash {
+      r: 0px;
+    }
+
     #triangles polygon {
       fill-opacity: 0.2;
       stroke-width: 1px;
@@ -69,7 +79,7 @@
       stroke: gold;
     }
 
-    #legs {
+    .legs {
       display: none;
     }
 
@@ -81,7 +91,7 @@
       fill: gray;
     }
 
-    line:not(#cannon *) {
+    line:not(.cannon *) {
       stroke-width: 0.5px;
     }
 
@@ -100,27 +110,47 @@
       opacity: 0.2;
       r: 5px;
     }
+
+    .cannon .tip {
+      transform: translate(-2px);
+    }
+
+    .cannon .tip.recoil {
+      transform: translate(0px);
+      transition: transform 0.25s ease-out;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
   <!-- <polygon class="wall inverse" points="-180,-40 -170,-120 40,-130 170,-120 180,40 170,130 -40,130 -170,120" /> -->
   <!-- <polygon class="wall inverse" points="-160,-40 -170,-120 40,-110 170,-120 160,40 170,130 -40,110 -170,120" /> -->
 
-  <g id="player" class="ship">
-    <circle id="body" cx="0" cy="0" r="5"/>
+  <g id="ship1" class="ship">
+    <circle class="body" cx="0" cy="0" r="5"/>
     <circle cx="0" cy="0" r="3" fill="transparent" stroke="green" />
-    <g id="cannon">
-      <line x1="4" y1="0" x2="6.5" y2="0" stroke="black"/>
+    <g class="cannon">
+      <line class="tip recoil" x1="4" y1="0" x2="6.5" y2="0" stroke="black"/>
+      <line x1="1" y1="0" x2="4" y2="0" stroke="white" stroke-width="3" />
       <line x1="1" y1="0" x2="4" y2="0" stroke="black" stroke-width="1.5" />
     </g>
     <line id="velocity-indicator" x1="0" y1="0" x2="0" y2="0"/>
     <line id="acceleration-indicator" x1="0" y1="0" x2="0" y2="0"/>
-    <g id="legs">
+    <g class="legs">
       <path d="M 3 2 l 2 2 v 2 m -1.5 0 h 3" stroke="black" fill="none" />
       <path d="M -3 2 l -2 2 v 2 m -1.5 0 h 3" stroke="black" fill="none" />
     </g>
   </g>
 
+  <g id="ship2" class="ship">
+    <circle class="body" cx="0" cy="0" r="5"/>
+    <circle cx="0" cy="0" r="3" fill="transparent" stroke="#CC0000" />
+    <g class="cannon">
+      <line class="tip recoil" x1="4" y1="0" x2="6.5" y2="0" stroke="black"/>
+      <line x1="1" y1="0" x2="4" y2="0" stroke="white" stroke-width="3" />
+      <line x1="1" y1="0" x2="4" y2="0" stroke="black" stroke-width="1.5" />
+    </g>
+  </g>
+
   <!-- <g> -->
   <!--   <polygon class="wall" points="20,20 30,20 40,40 20,40" /> -->
   <!--   <polygon class="wall" points="-50,-50 -60,-50 -60,-60 -50,-60" /> -->
@@ -168,10 +198,12 @@
 
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
   <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
-  <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->\
+  <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
+
+  <polygon class="wall" points="-20,20 10,40 40,20 0,100" />
 
   <!-- Wrench shape -->
-  <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" />
+  <!-- <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
 
   <!-- <g> -->
   <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
@@ -222,7 +254,10 @@
 
 <script type="text/javascript">//<![CDATA[
 // entities
-const Ships = [{ entity_id: "ship1" }];
+const Ships = [
+  { entity_id: "ship1" },
+  { entity_id: "ship2" }
+];
 // const Walls = [{ entity_id: "wall_1" }, { entity_id: "wall_2" }];
 
 // components
@@ -232,6 +267,9 @@ const Acceleration = {};
 const AngularAcceleration = {};
 const AngularVelocity = {};
 const Degrees = {};
+const Nodes = {};
+const CannonNodes = {};
+const GravityEffect = {}
 
 // Points = {
 //   "wall_1": "0,0 2,0 1,1",
@@ -239,28 +277,108 @@ const Degrees = {};
 // };
 
 // systems
-const Shoot = (() => {
+const Combat = (() => {
   const cannonLength = 8;
   const scalar = 50;
 
   return {
-    update: ({ entity_id }) => {
+    shoot: ({ entity_id }) => {
       const radians = Degrees[entity_id] * Math.PI / 180; // toFixed(15)?
       const { x, y } = Position[entity_id];
       const rise = Math.sin(radians) * cannonLength;
       const run = Math.cos(radians) * cannonLength;
       const origin = { x: x + run, y: y + rise };
 
+      const mag = Math.sqrt(rise**2 + run**2)
+      const normalized = {
+        rise: rise / mag,
+        run: run / mag
+      }
+
+      // console.log("RISE", rise);
+      // console.log("RUN", run);
+      // console.log("NORMALIZED", normalized);
+
       const { x: vx, y: vy } = Velocity[entity_id];
       Velocity[entity_id] = { x: vx - run, y: vy - rise };
 
+      const target = {};
+      let i = 0;
+      while (true) {
+        const x = origin.x + normalized.run * i;
+        const y = origin.y + normalized.rise * i;
+        const pt = { x, y };
+        target.x = pt.x;
+        target.y = pt.y;
+
+        const hitShips = Ships.filter(({ entity_id: id }) => {
+          const node = Nodes[id];
+          const p = Position[id];
+          const body = node.querySelector(".body");
+          const hit = body.isPointInFill({ x: pt.x - p.x, y: pt.y - p.y });
+          // console.log("checking ship", id, "position", pt, hit);
+          return hit;
+        });
+
+        const offBg = !bg.isPointInFill(pt);
+        const wallHits = [...wallElements].find(el => el.isPointInFill(pt));
+
+        hitShips.forEach(({ entity_id }) => GravityEffect[entity_id] = true);
+
+        i += 1;
+        if (hitShips.length || offBg || wallHits) break;
+      }
+
       return {
         origin,
-        target: {
-          x: origin.x + run * scalar,
-          y: origin.y + rise * scalar
+        target
+      };
     }
   };
+})();
+
+const Draw = (() => {
+  return {
+    ship: ({ entity_id }) => {
+      const node = Nodes[entity_id];
+      const gun = CannonNodes[entity_id];
+      const p = Position[entity_id];
+      const deg = Degrees[entity_id];
+      node.style.transform = `translate(${p.x}px, ${p.y}px)`;
+      gun.style.transform = `rotate(${deg}deg)`;
+    },
+
+    shot: ({ entity_id }, shot) => {
+      const gun = CannonNodes[entity_id];
+
+      const lineEl = document.createElementNS(namespaceURIsvg, 'line');
+      lineEl.classList.add('bullet');
+      lineEl.setAttribute('x1', shot.origin.x);
+      lineEl.setAttribute('y1', shot.origin.y);
+      lineEl.setAttribute('x2', shot.target.x);
+      lineEl.setAttribute('y2', shot.target.y);
+      lineEl.addEventListener('transitionend', e => e.target.remove());
+
+      const tipEl = gun.querySelector(".tip")
+      tipEl.classList.remove("recoil");
+
+      const explosionEl = document.createElementNS(namespaceURIsvg, 'circle');
+      explosionEl.classList.add('explosion');
+      explosionEl.setAttribute('cx', shot.target.x);
+      explosionEl.setAttribute('cy', shot.target.y);
+      explosionEl.setAttribute('fill', 'orange');
+      explosionEl.addEventListener('transitionend', e => e.target.remove());
+      bulletsContainer.appendChild(explosionEl);
+
+      setTimeout(() => {
+        explosionEl.classList.add('flash');
+        tipEl.classList.add('recoil');
+      }, 100);
+
+      const le = bulletsContainer.appendChild(lineEl);
+      setTimeout(() => lineEl.classList.add('fade'), 1000);
+
+      return le;
     }
   };
 })();
@@ -754,10 +872,14 @@ const Move = (() => {
   }
 
   return {
-    update: ({ entity_id }, elapsed) => {
+    ship: ({ entity_id }, elapsed) => {
+      const gravity = 1;
+      // affectedByWalls & affectedByGravity toggles?
+      const isAffectedByGravity = GravityEffect[entity_id];
       const { x: px, y: py } = Position[entity_id];
       const { x: vx, y: vy } = Velocity[entity_id];
-      const { x: ax, y: ay } = Acceleration[entity_id];
+      const ax = Acceleration[entity_id].x;
+      const ay = isAffectedByGravity ? Acceleration[entity_id].y + gravity : Acceleration[entity_id].y;
 
       const vr = {
         x: Math.round(vx * 100 + ax * 100) / 100,
@@ -935,10 +1057,10 @@ let previous, zero, frameCount = 0;
 let rotate = 0;
 
 const s = {};
-s.node = document.querySelector(".ship");
-s.radius = +s.node.querySelector("#body").getAttribute('r');
-const gun = s.node.querySelector('#cannon');
-const legs = s.node.querySelector("#legs");
+s.node = document.querySelector("#ship1");
+s.radius = +s.node.querySelector(".body").getAttribute('r');
+const gun = s.node.querySelector('.cannon');
+const legs = s.node.querySelector(".legs");
 
 const svg = document.querySelector('svg');
 const bg = svg.querySelector('#bg');
@@ -1004,19 +1126,11 @@ function init() {
   started = false;
   const mult = 10;
 
-  s.position = { x: 3, y: -6 };
-  s.velocity = { x: 0, y: 0 };
-  s.acceleration = { x: 0, y: 0 };
-
-  s.angularAcceleration = 0;
-  s.angularVelocity = 0;
-  s.degrees = 0;
-
   s.collision = null;
   s.isLanded = false;
   s.gearDown = false;
 
-  Ships.forEach(({ entity_id }) => {
+  const setInits = (entity_id, s) => {
     Acceleration[entity_id] = { x: s.acceleration.x, y: s.acceleration.y };
     Velocity[entity_id] = { x: s.velocity.x, y: s.velocity.y };
     Position[entity_id] = { x: s.position.x, y: s.position.y };
@@ -1024,10 +1138,35 @@ function init() {
     AngularAcceleration[entity_id] = s.angularAcceleration;
     AngularVelocity[entity_id] = s.angularVelocity;
     Degrees[entity_id] = s.degrees;
+    Nodes[entity_id] = document.querySelector(`#${entity_id}`);
+    CannonNodes[entity_id] = document.querySelector(`#${entity_id} .cannon`);
+    GravityEffect[entity_id] = false;
+  }
+
+  Ships.forEach(({ entity_id }) => {
+    setInits(entity_id, {
+      acceleration: { x: 0, y: 0 },
+      velocity: { x: 0, y: 0 },
+      position: { x: 3, y: 0 },
+      angularAcceleration: 0,
+      angularVelocity: 0,
+      degrees: 0
+    });
   });
 
+  // player ship
+  setInits("ship1", {
+    acceleration: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+    position: { x: -50, y: 0 },
+    angularAcceleration: 0,
+    angularVelocity: 0,
+    degrees: 0
+  });
+
+  Ships.forEach(Draw.ship);
+
   [...edgeContainer.children].forEach(c => c.remove());;
-  s.node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
 
   wallElements.forEach(w => w.setAttribute('fill', 'black'));
   velIndic.setAttribute('x2', 0);
@@ -1294,20 +1433,12 @@ function animate(timestamp) {
     frameCount++;
   }
 
-  Ships.forEach(({ entity_id }) => {
-    Move.update({ entity_id }, elapsed);
-    Rotate.update({ entity_id }, elapsed);
+  Ships.forEach(s => {
+    Move.ship(s, elapsed);
+    Rotate.update(s, elapsed);
+    Draw.ship(s);
   });
 
-  // let newPos = updateShip(s, elapsed);
-  newPos = Position[Ships[0].entity_id];
-  let newVel = Velocity[Ships[0].entity_id];
-
-  s.node.style.transform = `translate(${newPos.x}px, ${newPos.y}px)`;
-  positionEl.innerText = `${newPos.x},${newPos.y}`;
-  velocityEl.innerText = `${newVel.x},${newVel.y}`;
-  gun.style.transform = `rotate(${Degrees[Ships[0].entity_id]}deg)`;
-
   // updateEdges(position);
   if (drawCollisionLines) updateTriangles(position);
 
@@ -1347,31 +1478,6 @@ let rotateCWPressed = false;
 let rotateCCWPressed = false;
 const { entity_id } = Ships[0];
 
-function drawShot(shot) {
-  const lineEl = document.createElementNS(namespaceURIsvg, 'line');
-  lineEl.classList.add('bullet');
-  lineEl.setAttribute('x1', shot.origin.x);
-  lineEl.setAttribute('y1', shot.origin.y);
-  lineEl.setAttribute('x2', shot.target.x);
-  lineEl.setAttribute('y2', shot.target.y);
-  lineEl.addEventListener('transitionend', e => e.target.remove());
-  setTimeout(() => lineEl.classList.add('fade'), 1000);
-
-  let pt, hit;
-  for (let i = 0; i <= lineEl.getTotalLength(); i++) {
-    pt = lineEl.getPointAtLength(i);
-    hit = [...wallElements].find(el => el.isPointInFill(pt));
-    if (hit) break;
-  }
-
-  if (hit) {
-    lineEl.setAttribute('x2', pt.x);
-    lineEl.setAttribute('y2', pt.y);
-  }
-
-  return bulletsContainer.appendChild(lineEl);
-}
-
 document.addEventListener("keydown", function(e) {
   if (!isReadingKeys) return;
 
@@ -1385,14 +1491,14 @@ document.addEventListener("keydown", function(e) {
     case "Space":
       if (!spacePressed) {
         spacePressed = true;
-        drawShot(Shoot.update(Ships[0]));
+        const coords = Combat.shoot(Ships[0]);
+        Draw.shot(Ships[0], coords);
       }
       break;
     case "KeyW":
     case "ArrowUp":
       if (!upPressed) {
         upPressed = true;
-        s.acceleration.y += -force;
         Acceleration[entity_id].y += -force;
       }
       break;
@@ -1400,7 +1506,6 @@ document.addEventListener("keydown", function(e) {
     case "ArrowDown":
       if (!downPressed) {
         downPressed = true;
-        s.acceleration.y += force;
         Acceleration[entity_id].y += force;
       }
       break;
@@ -1408,7 +1513,6 @@ document.addEventListener("keydown", function(e) {
     case "ArrowLeft":
       if (!leftPressed) {
         leftPressed = true;
-        if (!s.gearDown) s.acceleration.x += -force;
         if (!s.gearDown) Acceleration[entity_id].x += -force;
       }
       break;
@@ -1416,7 +1520,6 @@ document.addEventListener("keydown", function(e) {
     case "ArrowRight":
       if (!rightPressed) {
         rightPressed = true;
-        if (!s.gearDown) s.acceleration.x += force;
         if (!s.gearDown) Acceleration[entity_id].x += force;
       }
       break;
@@ -1458,7 +1561,6 @@ document.addEventListener("keyup", function(e) {
     case "ArrowUp":
       if (upPressed) {
         upPressed = false;
-        s.acceleration.y -= -force;
         Acceleration[entity_id].y -= -force;
       }
       break;
@@ -1466,7 +1568,6 @@ document.addEventListener("keyup", function(e) {
     case "ArrowDown":
       if (downPressed) {
         downPressed = false;
-        s.acceleration.y -= force;
         Acceleration[entity_id].y -= force;
       }
       break;
@@ -1474,7 +1575,6 @@ document.addEventListener("keyup", function(e) {
     case "ArrowLeft":
       if (leftPressed) {
         leftPressed = false;
-        if (!s.gearDown) s.acceleration.x -= -force;
         if (!s.gearDown) Acceleration[entity_id].x -= -force;
       }
       break;
@@ -1482,7 +1582,6 @@ document.addEventListener("keyup", function(e) {
     case "ArrowRight":
       if (rightPressed) {
         rightPressed = false;
-        if (!s.gearDown) s.acceleration.x -= force;
         if (!s.gearDown) Acceleration[entity_id].x -= force;
       }
       break;