Start on Collision

src/GameLogic/collisionManager.js

@@ -0,0 +1,48 @@
+import { Constants } from "../constants";
+import { CollisionTypeEnum } from "./collisionType";
+
+export class CollisionManager {
+    _map;
+
+    constructor() {
+    }
+
+    attachMap(map){
+        this._map = map;
+    }
+
+    checkCollisionForTank(xMin, xMax, yMin, yMax) {
+        return (this._checkTankCollision(xMin, xMax, yMin, yMax) != null) ||
+            (this._checkBoundaries(xMin, xMax, yMin, yMax) != null) ||
+            (this._checkBlockCollision(xMin, xMax, yMin, yMax) != null);
+    }
+
+
+    checkCollisionForShots(xMin, xMax, yMin, yMax) {
+    }
+
+
+
+    _checkTankCollision(xMin, xMax, yMin, yMax) {
+        //TODO with AI tanks
+        return null;
+    }
+
+    _checkBoundaries(xMin, xMax, yMin, yMax) {
+        const tilesize = Constants.TILE_SIZE.getValue();
+
+        if (xMin < 0 || yMin < 0 || xMax >= this._map.width * tilesize || yMax >= this._map.height * tilesize)
+            return CollisionTypeEnum.Edge;
+        return null;
+    }
+
+    _checkShotCollision(xMin, xMax, yMin, yMax) {
+        return null;
+    }
+
+    _checkBlockCollision(xMin, xMax, yMin, yMax) {
+        return null;
+    }
+
+
+}

src/GameLogic/collisionType.js

@@ -0,0 +1,6 @@
+export class CollisionTypeEnum {
+    static Block = new CollisionTypeEnum();
+    static Tank = new CollisionTypeEnum();
+    static Shot = new CollisionTypeEnum();
+    static Edge = new CollisionTypeEnum();
+}

src/GameLogic/gameField.js

@@ -1,17 +1,18 @@
-import { Tileset } from "./Tileset/tileset"
+import { Tileset } from "../Graphics/Tileset/tileset"
-import { Map } from "./Map/map";
 import { PlayerTank } from "../Tanks/playerTank";
-import { Constants } from "./../constants"
+import { Constants } from "../constants"
-import { BlockTypeEnum } from "./../Blocks/blockTypeEnum"
+import { BlockTypeEnum } from "../Blocks/blockTypeEnum"
-import { MapParser } from "./Map/mapParser";
+import { MapParser } from "../Graphics/Map/mapParser";
+import { CollisionManager } from "./collisionManager";
 
 export class GameField {
     constructor(width = 512, height = 512, ctx, canvas) {
         this.height = height;
         this.width = width;
         this.ctx = ctx;
-        this.canvas = canvas
+        this.canvas = canvas;
-        this.tank = new PlayerTank(0, 0, 0);
+        this.collisionManager = new CollisionManager();
+        this.tank = new PlayerTank(0, 0, this.collisionManager);
         this.tileset = null;
         this.map = null;
     }
@@ -37,10 +38,10 @@ export class GameField {
         this.tileset.addTile(544, 64, 32, 32, BlockTypeEnum.Forest);
 
         //Tank
-        this.tileset.addTile(0, 0, 32, 32, 101);
+        this.tileset.addTile(0, 0, 30, 30, 101);
-        this.tileset.addTile(64, 0, 32, 32, 102);
+        this.tileset.addTile(64, 0, 32, 30, 102);
-        this.tileset.addTile(128, 0, 32, 32, 103);
+        this.tileset.addTile(128, 0, 32, 30, 103);
-        this.tileset.addTile(192, 0, 32, 32, 104);
+        this.tileset.addTile(192, 0, 32, 30, 104);
 
         await this.tileset.loadAll();
     }
@@ -50,22 +51,23 @@ export class GameField {
             await this.setupTileset();
         }
 
-        if (!this.map){
+        if (!this.map) {
-            this.map = await new MapParser().getMap(4, this.tileset);
+            this.map = await new MapParser().getMap(3, this.tileset);
             this.canvas.height = this.height;
             this.canvas.width = this.width;
+            this.collisionManager.attachMap(this.map);
         }
 
 
-        for (let x = 0; x < Constants.GAME_WIDTH.getValue(); x += 1) {
+        for (let x = 0; x < this.map.width; x += 1) {
-            for (let y = 0; y < Constants.GAME_HEIGHT.getValue(); y += 1) {
+            for (let y = 0; y < this.map.height; y += 1) {
                 this.ctx.fillStyle = "black";
                 this.ctx.fillRect(x * Constants.TILE_SIZE.getValue(), y * Constants.TILE_SIZE.getValue(), Constants.TILE_SIZE.getValue(), Constants.TILE_SIZE.getValue());
                 this.map.getElement(x, y).draw(this.ctx, x * Constants.TILE_SIZE.getValue(), y * Constants.TILE_SIZE.getValue());
             }
         }
 
-        this.tank.draw(this.tileset, this.ctx, Constants.TILE_SIZE.getValue());
+        this.tank.draw(this.tileset, this.ctx);
 
 
         requestAnimationFrame(() => this.drawField());

src/Graphics/Map/map.js

@@ -1,7 +1,7 @@
 export class Map {
     constructor(width, height) {
-        this._width = width;
+        this.width = width;
-        this._height = height;
+        this.height = height;
         this._map = [];
         this._enemies = [];
     }
@@ -12,6 +12,6 @@ export class Map {
     }
 
     getElement(x, y){
-        return this._map[x + y*this._width];
+        return this._map[x + y*this.width];
     }
 }

src/Tanks/playerTank.js

@@ -1,39 +1,46 @@
+import { Constants } from "../constants";
 import { DirectionEnum } from "./directionEnum";
 
 export class PlayerTank {
 
-    constructor(x, y) {
+    constructor(x, y, collisionManager) {
         this.x = x;
         this.y = y;
-        this.speed = 5.0;
+        this.collisionManager = collisionManager;
+        this.speed = 4.0;
         this.direction = DirectionEnum.Up;
     }
 
     move(direction) {
+        const tilesize = Constants.TILE_SIZE.getValue();
+        this.direction = direction;
+
         switch (direction) {
             case DirectionEnum.Up:
-                this.y -= this.speed;
+                if (!this.collisionManager.checkCollisionForTank(this.x, this.x + tilesize, this.y - this.speed, this.y + tilesize - this.speed))
+                    this.y -= this.speed;
                 break;
 
             case DirectionEnum.Left:
-                this.x -= this.speed;
+                if (!this.collisionManager.checkCollisionForTank(this.x - this.speed, this.x + tilesize - this.speed, this.y, this.y + tilesize))
+                    this.x -= this.speed;
                 break;
 
             case DirectionEnum.Right:
-                this.x += this.speed;
+                if (!this.collisionManager.checkCollisionForTank(this.x + this.speed, this.x + tilesize + this.speed, this.y, this.y + tilesize))
+                    this.x += this.speed;
                 break;
 
             case DirectionEnum.Down:
-                this.y += this.speed;
+                if (!this.collisionManager.checkCollisionForTank(this.x, this.x + tilesize, this.y + this.speed, this.y + tilesize + this.speed))
+                    this.y += this.speed;
                 break;
         }
-        this.direction = direction;
-
-        // console.log(this.x + " " + this.y);
     }
 
-    draw(tileset, ctx, tilesize) {
+    draw(tileset, ctx) {
-        ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y, tilesize, tilesize);
+        ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y,
+         Constants.TANK_SIZE.getValue(), Constants.TANK_SIZE.getValue());
     }
 
 }

src/constants.js

@@ -1,7 +1,6 @@
 export class Constants {
     static TILE_SIZE = new Constants(32);
-    static GAME_WIDTH = new Constants(13);
+    static TANK_SIZE = new Constants(28);
-    static GAME_HEIGHT = new Constants(13);
 
     constructor(value){
         this._value = value;