diff --git a/main.js b/main.js index 7d2f59d..0244f21 100644 --- a/main.js +++ b/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(); } diff --git a/src/entities/Tank.js b/src/entities/Tank.js index 00a0570..99210a7 100644 --- a/src/entities/Tank.js +++ b/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); - } - } -} - -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; + update(dt, t) { + super.update(dt,t); + + // 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; + + // 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; + } -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); + // 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); + } } } diff --git a/src/index.js b/src/index.js index 2328d6a..af91eaf 100644 --- a/src/index.js +++ b/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"),