Add another ship

html/images/space.svg

@@ -25,7 +25,7 @@
       fill: gray;
     }
 
-    .ship circle#body {
+    .ship circle.body {
       fill: white;
     }
 
@@ -69,7 +69,7 @@
       stroke: gold;
     }
 
-    #legs {
+    .legs {
       display: none;
     }
 
@@ -81,7 +81,7 @@
       fill: gray;
     }
 
-    line:not(#cannon *) {
+    line:not(.cannon *) {
       stroke-width: 0.5px;
     }
 
@@ -101,11 +101,11 @@
       r: 5px;
     }
 
-    #cannon .tip {
+    .cannon .tip {
       transform: translate(-2px);
     }
 
-    #cannon .tip.recoil {
+    .cannon .tip.recoil {
       transform: translate(0px);
       transition: transform 0.25s ease-out;
     }
@@ -115,22 +115,32 @@
   <!-- <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">
+    <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" /> -->
@@ -232,7 +242,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
@@ -945,10 +958,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');
@@ -1014,19 +1027,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 };
@@ -1034,10 +1039,31 @@ function init() {
     AngularAcceleration[entity_id] = s.angularAcceleration;
     AngularVelocity[entity_id] = s.angularVelocity;
     Degrees[entity_id] = s.degrees;
+    let node = document.querySelector(`#${entity_id}`);
+    node.style.transform = `translate(${s.position.x}px, ${s.position.y}px)`;
+  }
+
+  Ships.forEach(({ entity_id }) => {
+    setInits(entity_id, {
+      acceleration: { x: 0, y: 0 },
+      velocity: { x: 0, y: 0 },
+      position: { x: -50, y: 0 },
+      angularAcceleration: 0,
+      angularVelocity: 0,
+      degrees: 0
+    });
+  });
+
+  setInits("ship1", {
+    acceleration: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+    position: { x: 3, y: -6 },
+    angularAcceleration: 0,
+    angularVelocity: 0,
+    degrees: 0
   });
 
   [...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);
@@ -1366,7 +1392,7 @@ function drawShot(shot) {
   lineEl.setAttribute('y2', shot.target.y);
   lineEl.addEventListener('transitionend', e => e.target.remove());
   setTimeout(() => lineEl.classList.add('fade'), 1000);
-  const tipEl = document.querySelector("#cannon .tip")
+  const tipEl = document.querySelector(".cannon .tip")
   tipEl.classList.remove("recoil");
   setTimeout(() => tipEl.classList.add('recoil'), 0);
 
@@ -1405,7 +1431,6 @@ document.addEventListener("keydown", function(e) {
     case "ArrowUp":
       if (!upPressed) {
         upPressed = true;
-        s.acceleration.y += -force;
         Acceleration[entity_id].y += -force;
       }
       break;
@@ -1413,7 +1438,6 @@ document.addEventListener("keydown", function(e) {
     case "ArrowDown":
       if (!downPressed) {
         downPressed = true;
-        s.acceleration.y += force;
         Acceleration[entity_id].y += force;
       }
       break;
@@ -1421,7 +1445,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;
@@ -1429,7 +1452,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;
@@ -1471,7 +1493,6 @@ document.addEventListener("keyup", function(e) {
     case "ArrowUp":
       if (upPressed) {
         upPressed = false;
-        s.acceleration.y -= -force;
         Acceleration[entity_id].y -= -force;
       }
       break;
@@ -1479,7 +1500,6 @@ document.addEventListener("keyup", function(e) {
     case "ArrowDown":
       if (downPressed) {
         downPressed = false;
-        s.acceleration.y -= force;
         Acceleration[entity_id].y -= force;
       }
       break;
@@ -1487,7 +1507,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;
@@ -1495,7 +1514,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;