[WIP] Start working on shots

src/GameLogic/collisionManager.js

@@ -25,8 +25,6 @@ export class CollisionManager {
     checkCollisionForShots(xMin, xMax, yMin, yMax) {
     }
 
-
-
     _checkTankCollision(xMin, xMax, yMin, yMax) {
         //TODO with AI tanks
         return null;
@@ -40,10 +38,6 @@ export class CollisionManager {
         return null;
     }
 
-    _checkShotCollision(xMin, xMax, yMin, yMax) {
-        return null;
-    }
-
     _checkBlockCollision(xMin, xMax, yMin, yMax) {
         const blocksToCheck = this._getAllElementsOfMapOn(xMin, xMax, yMin, yMax);
         const tilesize = Constants.TILE_SIZE.getValue();
@@ -71,9 +65,9 @@ export class CollisionManager {
             for (let y = 0; y < this._map.height; y++) {
                 if (this.intersect(xMin, xMax, yMin, yMax, x * tilesize, (x + 1) * tilesize, y * tilesize, (y + 1) * tilesize))
                     elements.push({
-                        "block": this._map.getElement(x, y),
+                        block: this._map.getElement(x, y),
-                        "xPos": x,
+                        xPos: x,
-                        "yPos": y
+                        yPos: y
                     });
             }
         }

src/KeyAdapters/tankKeyAdapter.js

@@ -9,6 +9,7 @@ export class TankKeyAdapter extends GameKeyAdapterInterface {
     }
 
     handleEvent(event) {
+        console.log(event.key);
         switch (event.key) {
             case "ArrowLeft":
                 this.tank.move(DirectionEnum.Left);
@@ -22,6 +23,8 @@ export class TankKeyAdapter extends GameKeyAdapterInterface {
             case "ArrowDown":
                 this.tank.move(DirectionEnum.Down);
                 break;
+            case "Control":
+                this.tank.shot();
         }
 
         //console.log(event.key);

src/Tanks/playerTank.js

@@ -1,5 +1,6 @@
 import { Constants } from "../constants";
 import { DirectionEnum } from "./directionEnum";
+import { ShotManager } from "./shotElement";
 
 export class PlayerTank {
 
@@ -9,6 +10,8 @@ export class PlayerTank {
         this.collisionManager = collisionManager;
         this.speed = 3.0;
         this.direction = DirectionEnum.Up;
+
+        this.shotManager = new ShotManager(collisionManager, this);
     }
 
     move(direction) {
@@ -45,9 +48,36 @@ export class PlayerTank {
         }
     }
 
+    shot() {
+        let x, y = 0
+        const tanksize = Constants.TANK_SIZE.getValue();
+
+        switch (this.direction) {
+            case DirectionEnum.Up:
+                x = this.x + tanksize / 2;
+                y = this.y;
+                break;
+            case DirectionEnum.Left:
+                x = this.x;
+                y = this.y + tanksize / 2;
+                break;
+            case DirectionEnum.Down:
+                x = this.x + tanksize / 2;
+                y = this.y + tanksize;
+                break;
+            case DirectionEnum.Right:
+                x = this.x + tanksize;
+                y = this.y + tanksize / 2;
+                break;
+        }
+
+        this.shotManager.tryShot(this.direction, x, y);
+    }
+
     draw(tileset, ctx) {
         ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y,
             Constants.TANK_SIZE.getValue(), Constants.TANK_SIZE.getValue());
+        this.shotManager.draw(ctx);
     }
 
 }

src/Tanks/shotElement.js

@@ -0,0 +1,107 @@
+import { Constants } from "../constants";
+import { DirectionEnum } from "./directionEnum";
+
+class Shot {
+    constructor(shotManager, direction, x, y) {
+        this.image = ShotVisualElement.createShot(direction);
+        this.shotManager = shotManager;
+        this.direction = direction;
+        this.x = x;
+        this.y = y;
+        this.speed = Constants.SHOT_SPEED.getValue();
+    }
+
+    move() {
+        switch (this.direction) {
+            case DirectionEnum.Up:
+                if (!this.shotManager.checkCollision(this.x, this.x + 4, this.y - this.speed, this.y + 4 - this.speed))
+                    this.y -= this.speed;
+                else this.shotManager.destroyShot();
+                break;
+
+            case DirectionEnum.Left:
+                if (!this.shotManager.checkCollision(this.x - this.speed, this.x + 4 - this.speed, this.y, this.y + 4))
+                    this.x -= this.speed;
+                else this.shotManager.destroyShot();
+                break;
+
+            case DirectionEnum.Right:
+                if (!this.shotManager.checkCollision(this.x + this.speed, this.x + 4 + this.speed, this.y, this.y + 4))
+                    this.x += this.speed;
+                else this.shotManager.destroyShot();
+                break;
+
+            case DirectionEnum.Down:
+                if (!this.shotManager.checkCollision(this.x, this.x + 4, this.y + this.speed, this.y + 4 + this.speed))
+                    this.y += this.speed;
+                else this.shotManager.destroyShot();
+                break;
+        }
+    }
+
+}
+
+export class ShotManager {
+    constructor(collisionManager, tank) {
+        this.collisionManager = collisionManager;
+        this.tank = tank;
+        this.shot = null;
+    }
+
+    tryShot(direction, x, y) {
+        if (!this.shot) {
+            this.shot = new Shot(this, direction, x, y);
+        }
+    }
+
+    checkCollision(minX, maxX, minY, maxY) {
+        return this.collisionManager.checkCollisionForTank(minX, maxX, minY, maxY);
+    }
+
+    destroyShot() {
+        this.shot = null;
+    }
+
+    draw(ctx) {
+        if (this.shot)
+            this.shot.move();
+
+        if (this.shot)     
+            ctx.drawImage(this.shot.image, this.shot.x, this.shot.y);
+    }
+}
+
+class ShotVisualElement {
+    static createShot(direction) {
+        let canvas = document.createElement("canvas");
+        canvas.width = 4;
+        canvas.height = 4;
+        let ctx = canvas.getContext("2d");
+        ctx.fillStyle = "BLACK";
+        ctx.fillRect(0, 0, 4, 4);
+
+        ctx.fillStyle = "GREY";
+        switch (direction) {
+            case DirectionEnum.Up:
+                ctx.fillRect(0, 1, 4, 3);
+                ctx.fillRect(1, 0, 2, 1);
+                break;
+            case DirectionEnum.Left:
+                ctx.fillRect(1, 0, 3, 4);
+                ctx.fillRect(0, 1, 1, 2);
+                break;
+            case DirectionEnum.Down:
+                ctx.fillRect(0, 0, 4, 3);
+                ctx.fillRect(1, 3, 2, 1);
+                break;
+            case DirectionEnum.Right:
+                ctx.fillRect(0, 0, 3, 4);
+                ctx.fillRect(3, 1, 1, 2);
+                break;
+        }
+
+        let img = new Image();
+        img.src = canvas.toDataURL("image/png");
+        return img;
+    }
+}

src/constants.js

@@ -2,6 +2,7 @@ export class Constants {
     static TILE_SIZE = new Constants(32);
     static TANK_SIZE = new Constants(24);
     static TANK_COLL_OFFSET = new Constants(0.125);
+    static SHOT_SPEED = new Constants(3.0);
 
     constructor(value){
         this._value = value;