Add key events for W, A, S, D, Q, E and Space

html/images/tanks.svg

@@ -111,7 +111,7 @@
 
     function fireBullet(x, y) {
       const degrees = getRotate(gun);
-      const radians = degrees * Math.PI / 180;
+      const radians = degrees * Math.PI / 180; // toFixed(15)?
       const vx = -Math.sin(radians);
       const vy = Math.cos(radians);
       const bulletTimeout = 5000; // miliseconds
@@ -122,7 +122,6 @@
       el.setAttribute('r', 1);
       el.setAttribute('cx', 0);
       el.setAttribute('cy', 0);
-      const node = bulletsContainer.appendChild(el);
 
       const bullet = {
         x: x + vx * cannonLength,
@@ -130,7 +129,7 @@
         vx: vx,
         vy: vy,
         time: bulletTimeout,
-        node: node
+        node: bulletsContainer.appendChild(el)
       }
 
       bullets.push(bullet);
@@ -233,6 +232,106 @@
 
     let force = 10;
 
+    let spacePressed = false;
+    let upPressed = false;
+    let downPressed = false;
+    let leftPressed = false;
+    let rightPressed = false;
+    let rotateCWPressed = false;
+    let rotateCCWPressed = false;
+
+    document.addEventListener("keydown", function(e) {
+      switch (e.code) {
+        case "Space":
+          if (!spacePressed) {
+            spacePressed = true;
+            const [x, y] = getTranslate(hitbox);
+            fireBullet(x, y);
+          }
+          break;
+        case "KeyW":
+          if (!upPressed) {
+            upPressed = true;
+            acceleration[1] += -force;
+          }
+          break;
+        case "KeyS":
+          if (!downPressed) {
+            downPressed = true;
+            acceleration[1] += force;
+          }
+          break;
+        case "KeyA":
+          if (!leftPressed) {
+            leftPressed = true;
+            acceleration[0] += -force;
+          }
+          break;
+        case "KeyD":
+          if (!rightPressed) {
+            rightPressed = true;
+            acceleration[0] += force;
+          }
+          break;
+        case "KeyQ":
+          if (!rotateCCWPressed) {
+            rotateCCWPressed = true;
+            rotate += -1;
+          }
+          break;
+        case "KeyE":
+          if (!rotateCWPressed) {
+            rotateCWPressed = true;
+            rotate += 1;
+          }
+          break;
+      }
+    });
+
+    document.addEventListener("keyup", function(e) {
+      switch (e.code) {
+        case "Space":
+          spacePressed = false;
+          break;
+        case "KeyW":
+          if (upPressed) {
+            upPressed = false;
+            acceleration[1] -= -force;
+          }
+          break;
+        case "KeyS":
+          if (downPressed) {
+            downPressed = false;
+            acceleration[1] -= force;
+          }
+          break;
+        case "KeyA":
+          if (leftPressed) {
+            leftPressed = false;
+            acceleration[0] -= -force;
+          }
+          break;
+        case "KeyD":
+          if (rightPressed) {
+            rightPressed = false;
+            acceleration[0] -= force;
+          }
+          break;
+        case "KeyQ":
+          if (rotateCCWPressed) {
+            rotateCCWPressed = false;
+            rotate -= -1;
+          }
+          break;
+        case "KeyE":
+          if (rotateCWPressed) {
+            rotateCWPressed = false;
+            rotate -= 1;
+          }
+          break;
+      }
+    });
+
     leftTurnButton.addEventListener("mousedown", function (e) {
       acceleration[0] = -force;
     });