Simplified tank entity

Preparing to send the players' variables over socket.io

main.js

@@ -13,7 +13,8 @@ function createWindow () {
     width: 720,
     height: 480,
     backgroundColor: "#111",
-    resizable: false,
+    // TODO: Turn off resizing and frame on release
+    resizable: true,
     frame: true,
     webPreferences: {
       nodeIntegration: true
@@ -25,12 +26,14 @@ function createWindow () {
   });
 
   // Remove alt menu
+  // TODO: Turn off menu on release
   //win.removeMenu();
 
   // and load the index.html of the app.
   win.loadFile(path.join("html/game.html"));
 
   // Open the DevTools.
+  // TODO: Turn off development tools on release 
   if (process.env.NODE_ENV === "dev") win.webContents.openDevTools();
 }
 

src/entities/Tank.js

@@ -2,73 +2,40 @@ var asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
 const { Container, TileSpriteXML, math } = asdf;
 
-const container = new Container();
-
-class Body extends TileSpriteXML {
-  constructor(keyboard, mouse, tanksTexture, tanksXml, colour) {
-    super(tanksTexture, tanksXml, tanksXml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`));
+class Tank extends TileSpriteXML {
+  constructor(keys, mouse, texture, xml, colour) {
+    super(texture, xml, xml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`));
+    this.keys = keys;
     this.mouse = mouse;
-    this.keyboard = keyboard;
+    this.children = [];
+
+    // Define body
     this.pos = { x: 250, y: 100 };
     this.pivot = { x: 17, y: 22 };
-    this.scale = { x: 1, y: 1 };
-    this.speed = 1;
+    this.speed = {
+      move: 1
+    };
     this.rotation = 0;
-    this.rotationSpeed = 0.5;
 
+    // TODO: Do not allow movement when this.locked = true
     this.locked = false;
+
+    // Define barrel
+    this.barrel = new TileSpriteXML(texture, xml, xml.findIndex("name", `tank${colour}_barrel2_outline.png`));
+    this.barrel.pivot = { x: 6, y: 24 };
+    this.barrel.pos = {
+      x: 13,
+      y: -3
+    };
+    this.children.push(this.barrel);
   }
 
-  update(dt) {
-    // Set rotation back to zero if higher than 2 * Pi (same angle)
-    if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) {
-      this.rotation = 0;
-    }
-    if (this.rotation < 0) {
-      this.rotation = (2 * Math.PI) - this.rotation;
-    }
-    // Rotate clockwise
-    if (this.keyboard.x == 1) {
-      this.rotation += dt * 2;
-    }
-    // Rotate anti-clockwise
-    if (this.keyboard.x == -1) {
-      this.rotation -= dt * 2;
-    }
-    // Move
-    if (this.mouse.isDown) {
-      console.log(this.rotation);
-    }
-    if (this.keyboard.y == 1) {
-      this.pos.x += this.speed * Math.cos(this.rotation + 0.5 * Math.PI);
-      this.pos.y += this.speed * Math.sin(this.rotation + 0.5 * Math.PI);
-    }
-    if (this.keyboard.y == -1) {
-      this.pos.x -= this.speed * Math.cos(this.rotation + 0.5 * Math.PI);
-      this.pos.y -= this.speed * Math.sin(this.rotation + 0.5 * Math.PI);
-    }
-  }
-}
+  update(dt, t) {
+    super.update(dt,t);
     
-class Barrel extends TileSpriteXML {
-  constructor(body, mouse, tanksTexture, tanksXml, colour) {
-    super(tanksTexture, tanksXml, tanksXml.findIndex("name", `tank${colour}_barrel2_outline.png`));
-    this.mouse = mouse;
-    this.body = body;
-    this.pos = { x: 0, y: 0 };
-    this.pivot = { x: 6, y: 24 };
-    this.scale = { x: 1, y: 1 };
-    this.rotation = 0;
-  }
-
-  update() {
-    // Stay on top of tankbody
-    this.pos.y = this.body.pos.y - 3;
-    this.pos.x = this.body.pos.x + 11;
-
-    // Follow Mouse
-    var dx = this.pos.x - this.mouse.pos.x;
-    var dy = this.pos.y - this.mouse.pos.y;
+    // Make this.barrel follow the mouse
+    var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x;
+    var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y;
     var tan = dy / dx;
     var atan = Math.atan(tan);
     if (dy > 0 && dx > 0) {
@@ -77,19 +44,40 @@ class Barrel extends TileSpriteXML {
     else if (dy < 0 && dx > 0) {
       atan -= Math.PI;
     }
-    this.rotation = atan + 0.5 * Math.PI;
-  }
-}
+    this.barrel.rotation = atan + (0.5 * Math.PI) - this.rotation;
     
-class Tank extends Container {
-  constructor(keys, mouse, texture, xml, colour) {
-    super(container);
-    this.keys = keys;
-    this.mouse = mouse;
-    var body = new Body(this.keys, this.mouse, texture, xml, colour);
-    var barrel = new Barrel(body, this.mouse, texture, xml, colour);
-    this.add(body);
-    this.add(barrel);
+    // Set rotation back to zero if higher than 2 * Pi (same angle)
+    // TODO: Fix rotation, the barrel glitches a bit on 0 and 180 degrees
+    if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) {
+      this.rotation = 0;
+    }
+    if (this.rotation < 0) {
+      this.rotation = (2 * Math.PI) - this.rotation;
+    }
+
+    // TODO: If the angle is 90 or 270 degrees, allow the tank to move in that direction if 'a' or 's' is pressed
+    // Rotate clockwise
+    if (this.keys.x == 1) {
+      this.rotation += dt * 2;
+    }
+    // Rotate anti-clockwise
+    if (this.keys.x == -1) {
+      this.rotation -= dt * 2;
+    }
+
+    // TODO: Make it easier to see what end of the tank is forward
+    // Move
+    if (this.mouse.isDown) {
+      console.log(this.rotation);
+    }
+    if (this.keys.y == 1) {
+      this.pos.x += this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI);
+      this.pos.y += this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI);
+    }
+    if (this.keys.y == -1) {
+      this.pos.x -= this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI);
+      this.pos.y -= this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI);
+    }
   }
 }
 

src/index.js

@@ -4,6 +4,8 @@ var asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
 const { Game, KeyControls, MouseControls } = asdf;
 
+// TODO: Add more screens
+
 const 
   //Logo = require(__dirname + "/../src/screens/logo.js"),
   //Title = require(__dirname + "/../src/screens/title.js"),