[HUGE UPDATE] Parser, Constants, Enums, Block drawing (A lot)

src/Blocks/block.js

@@ -1,25 +0,0 @@
-class Block {
-    constructor(xBox, yBox, wBox, hBox, tile) {
-        this._box = new Box(xBox, yBox, wBox, hBox);
-        this._tile = tile;
-    }
-
-    draw(ctx, x, y){
-        ctx.drawImage(tile, x, y);
-    }
-
-    resolveAttack(){
-        return;
-    }
-
-
-}
-
-class Box {
-    constructor(xBox, yBox, wBox, hBox) {
-        this._xBox = xBox;
-        this._yBox = yBox;
-        this._wBox = wBox;
-        this._hBox = hBox;
-    }  
-}

src/Blocks/blockBuilder.js

@@ -0,0 +1,62 @@
+import { Box } from "./types/block"
+import { Brick } from "./types/brick"
+import { River } from "./types/river"
+import { Eagle } from "./types/eagle"
+import { Iron } from "./types/iron"
+import { Forest } from "./types/forest"
+import { Empty } from "./types/empty"
+
+export class BlockBuilder {
+
+    constructor(tilesize) {
+        this._tilesize = tilesize
+        this._boxes = [];
+    }
+
+    addUpperLeftBox() {
+        this._boxes.push(new Box(0, 0, this._tilesize / 2, this._tilesize / 2));
+        return this;
+    }
+
+    addUpperRightBox() {
+        this._boxes.push(new Box(this._tilesize / 2, 0, this._tilesize / 2, this._tilesize / 2));
+        return this;
+    }
+
+    addLowerLeftBox() {
+        this._boxes.push(new Box(0, this._tilesize / 2, this._tilesize / 2, this._tilesize / 2));
+        return this;
+    }
+
+    addLowerRightBox() {
+        this._boxes.push(new Box(this._tilesize / 2, this._tilesize / 2, this._tilesize / 2, this._tilesize / 2,));
+        return this;
+    }
+
+    buildBrick(brickTile) {
+        return new Brick(this._boxes, brickTile);
+    }
+
+    buildEagle(eagleTile, destroyedTile) {
+        return new Eagle(this._boxes, eagleTile, destroyedTile);
+    }
+
+    buildIron(ironTile) {
+        return new Iron(this._boxes, ironTile);
+    }
+
+    buildRiver(riverTile) {
+        return new River(this._boxes, riverTile);
+    }
+
+    buildForest(forestTile) {
+        return new Forest(this._boxes, forestTile);
+    }
+
+    buildEmpty() {
+        return new Empty(this._boxes, null);
+    }
+
+
+
+}

src/Blocks/blockTypeEnum.js

@@ -0,0 +1,9 @@
+export class BlockTypeEnum {
+    static Iron = new BlockTypeEnum();
+    static Brick = new BlockTypeEnum();
+    static River = new BlockTypeEnum();
+    static Forest = new BlockTypeEnum();
+
+    static Eagle = new BlockTypeEnum();
+    static DestroyedEagle = new BlockTypeEnum();
+}

src/Blocks/brick.js

@@ -1,7 +0,0 @@
-class Brick extends Block {
-    constructor(width, height, xBox, yBox, wBox, hBox, tile) {
-        super(width, height, xBox, yBox, wBox, hBox, tile);
-    }
-
-    
-}

src/Blocks/eagle.js

@@ -1,7 +0,0 @@
-class Eagle extends Block {
-    constructor(width, height, xBox, yBox, wBox, hBox, tile) {
-        super(width, height, xBox, yBox, wBox, hBox, tile);
-    }
-
-    
-}

src/Blocks/iron.js

@@ -1,7 +0,0 @@
-class Iron extends Block {
-    constructor(width, height, xBox, yBox, wBox, hBox, tile) {
-        super(width, height, xBox, yBox, wBox, hBox, tile);
-    }
-
-    
-}

src/Blocks/river.js

@@ -1,7 +0,0 @@
-class River extends Block {
-    constructor(width, height, xBox, yBox, wBox, hBox, tile) {
-        super(width, height, xBox, yBox, wBox, hBox, tile);
-    }
-
-    
-}

src/Blocks/types/block.js

@@ -0,0 +1,30 @@
+export class Block {
+    constructor(boxes, tile) {
+        this._boxes = boxes;
+        this._tile = tile;
+    }
+
+    draw(ctx, x, y){
+        for (let i = 0; i < this._boxes.length; i++){
+            this._boxes[i].draw(ctx, x, y, this._tile);
+        }
+    }
+
+    resolveAttack(){
+        return;
+    }
+
+}
+
+export class Box {
+    constructor(xBox, yBox, wBox, hBox) {
+        this._xBox = xBox;
+        this._yBox = yBox;
+        this._wBox = wBox;
+        this._hBox = hBox;
+    } 
+    
+    draw(ctx, x, y, tile){
+        ctx.drawImage(tile, this._xBox, this._yBox, this._wBox, this._hBox, x + this._xBox, y + this._yBox, this._wBox, this._hBox);
+    }
+}

src/Blocks/types/brick.js

@@ -0,0 +1,9 @@
+import {Block} from "./block"
+
+export class Brick extends Block {
+    constructor(boxes, tile) {
+        super(boxes, tile);
+    }
+
+    
+}

src/Blocks/types/eagle.js

@@ -0,0 +1,11 @@
+import {Block} from "./block"
+
+export class Eagle extends Block {
+    constructor(boxes, tile, destroyedTile) {
+        super(boxes, tile);
+        this._destroyedTile = destroyedTile;
+        this._isDestroyed = false;
+    }
+
+    
+}

src/Blocks/types/empty.js

@@ -0,0 +1,11 @@
+import { Block } from "./block"
+
+export class Empty extends Block {
+    constructor(boxes, tile){
+        super(boxes, tile);
+    }
+
+    draw(ctx, x, y){
+        return;
+    }
+}

src/Blocks/types/forest.js

@@ -0,0 +1,7 @@
+import { Block } from "./block"
+
+export class Forest extends Block {
+    constructor(boxes, tile){
+        super(boxes, tile);
+    }
+}

src/Blocks/types/iron.js

@@ -0,0 +1,9 @@
+import {Block} from "./block"
+
+export class Iron extends Block {
+    constructor(boxes, tile) {
+        super(boxes, tile);
+    }
+
+    
+}

src/Blocks/types/river.js

@@ -0,0 +1,9 @@
+import {Block} from "./block"
+
+export class River extends Block {
+    constructor(boxes, tile) {
+        super(boxes, tile);
+    }
+
+    
+}

src/Graphics/Map/map.js

@@ -0,0 +1,17 @@
+export class Map {
+    constructor(width, height) {
+        this._width = width;
+        this._height = height;
+        this._map = [];
+        this._enemies = [];
+    }
+
+
+    pushElement(element) {
+        this._map.push(element);
+    }
+
+    getElement(x, y){
+        return this._map[x + y*this._width];
+    }
+}

src/Graphics/Map/mapParser.js

@@ -0,0 +1,79 @@
+import { BlockBuilder } from "./../../Blocks/blockBuilder"
+import { Map } from "./map";
+import { Constants } from "./../../constants"
+import { BlockTypeEnum } from "./../../Blocks/blockTypeEnum"
+
+
+export class MapParser {
+    constructor() {
+    }
+
+    async getMap(levelNumber, tileset) {
+        let mapObject = await (await fetch(`./stages/stage-${levelNumber}.json`)).json();
+
+        var map = new Map(mapObject.size.width, mapObject.size.height);
+
+        for (let i = 0; i < mapObject.map.length; i++) {
+            let row = mapObject.map[i].match(/.{1,3}/g);
+            for (let j = 0; j < row.length; j++) {
+                let builder = new BlockBuilder(Constants.TILE_SIZE.getValue());
+                switch (row[j].split("")[1].toLowerCase()) {
+                    case "f":
+                        builder.addLowerLeftBox();
+                        builder.addLowerRightBox();
+                        builder.addUpperLeftBox();
+                        builder.addUpperRightBox();
+                        break;
+                    case "c":
+                        builder.addLowerLeftBox();
+                        builder.addLowerRightBox();
+                        break;
+                    case "3":
+                        builder.addUpperLeftBox();
+                        builder.addUpperRightBox();
+                        break;
+                    case "a":
+                        builder.addUpperRightBox();
+                        builder.addLowerRightBox();
+                        break;
+                    case "5":
+                        builder.addUpperLeftBox();
+                        builder.addLowerLeftBox();
+                        break;
+                    case "8":
+                        builder.addLowerRightBox();
+                        break;
+                    case "4":
+                        builder.addLowerLeftBox();
+                        break;
+                }
+
+                switch (row[j].split("")[0]) {
+                    case "F":
+                        map.pushElement(builder.buildForest(tileset.getImageOf(BlockTypeEnum.Forest)));
+                        break;
+                    case "R":
+                        map.pushElement(builder.buildRiver(tileset.getImageOf(BlockTypeEnum.River)));
+                        break;
+                    case "T":
+                        map.pushElement(builder.buildIron(tileset.getImageOf(BlockTypeEnum.Iron)));
+                        break;
+                    case "B":
+                        map.pushElement(builder.buildBrick(tileset.getImageOf(BlockTypeEnum.Brick)));
+                        break;
+                    case "E":
+                        map.pushElement(builder.buildEagle(tileset.getImageOf(BlockTypeEnum.Eagle),
+                            tileset.getImageOf(BlockTypeEnum.DestroyedEagle)))
+                        break;
+                    default:
+                        map.pushElement(builder.buildEmpty());
+                }
+            }
+        }
+        //TODO bots from map
+        return map;
+
+    }
+
+
+}

src/Graphics/Tileset/tile.js

@@ -1,10 +1,10 @@
 export class Tile {
-    constructor(x, y, width, height, id) {
+    constructor(x, y, width, height, name) {
         this.x = x;
         this.y = y;
         this.width = width;
         this.height = height;
-        this.id = id;
+        this.name = name;
 
         this.img = null;
     }

src/Graphics/Tileset/tileset.js

@@ -48,9 +48,9 @@ export class Tileset {
         return img;
     }
 
-    getImageOf(id) {
+    getImageOf(name) {
         for (let i = 0; i < this.tiles.length; i++) {
-            if (this.tiles[i].id == id) {
+            if (this.tiles[i].name == name) {
                 return this.tiles[i].img;
             }
         }

src/Graphics/gameField.js

@@ -1,12 +1,11 @@
 import { Tileset } from "./Tileset/tileset"
-import { Map } from "./map";
+import { Map } from "./Map/map";
 import { PlayerTank } from "../Tanks/playerTank";
+import { Constants } from "./../constants"
+import { BlockTypeEnum } from "./../Blocks/blockTypeEnum"
+import { MapParser } from "./Map/mapParser";
 
 export class GameField {
-    TILE_SIZE = 32;
-    GAME_WIDTH = 13;
-    GAME_HEIGHT = 13;
-
     constructor(width = 512, height = 512, ctx, canvas) {
         this.height = height;
         this.width = width;
@@ -14,6 +13,7 @@ export class GameField {
         this.canvas = canvas
         this.tank = new PlayerTank(0, 0, 0);
         this.tileset = null;
+        this.map = null;
     }
 
     //add all tiles here!
@@ -21,18 +21,20 @@ export class GameField {
         this.tileset = new Tileset("nesBattle.png");
 
         //Bricks
-        this.tileset.addTile(512, 0, 32, 31, 1);
+        this.tileset.addTile(512, 0, 32, 32, BlockTypeEnum.Brick);
-        this.tileset.addTile(545, 0, 30, 31, 2);
-        this.tileset.addTile(577, 0, 30, 31, 3);
-        this.tileset.addTile(607, 0, 30, 31, 4);
-        this.tileset.addTile(640, 0, 32, 31, 5);
 
         //Metal
-        this.tileset.addTile(512, 32, 32, 31, 6);
+        this.tileset.addTile(512, 32, 32, 32, BlockTypeEnum.Iron);
-        this.tileset.addTile(544, 32, 32, 31, 7);
+
-        this.tileset.addTile(576, 32, 32, 31, 8);
+        //Eagle
-        this.tileset.addTile(608, 32, 32, 31, 9);
+        this.tileset.addTile(608, 64, 32, 32, BlockTypeEnum.Eagle);
-        this.tileset.addTile(640, 32, 32, 31, 10);
+        this.tileset.addTile(640, 64, 32, 32, BlockTypeEnum.DestroyedEagle);
+
+        //River
+        this.tileset.addTile(512, 64, 32, 32, BlockTypeEnum.River);
+
+        //Forest
+        this.tileset.addTile(544, 64, 32, 32, BlockTypeEnum.Forest);
 
         //Tank
         this.tileset.addTile(0, 0, 32, 32, 101);
@@ -46,26 +48,24 @@ export class GameField {
     async drawField() {
         if (!this.tileset) {
             await this.setupTileset();
+        }
+
+        if (!this.map){
+            this.map = await new MapParser().getMap(4, this.tileset);
             this.canvas.height = this.height;
             this.canvas.width = this.width;
         }
+    
 
-        let map = new Map().tiles;
+        for (let x = 0; x < Constants.GAME_WIDTH.getValue(); x += 1) {
-
+            for (let y = 0; y < Constants.GAME_HEIGHT.getValue(); y += 1) {
-        for (let x = 0; x < this.GAME_WIDTH; x += 1) {
-            for (let y = 0; y <= this.GAME_HEIGHT; y += 1) {
-                let id = map[x + y * this.GAME_WIDTH];
-
                 this.ctx.fillStyle = "black";
-                this.ctx.fillRect(x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
+                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());
-                if (id != 0) {
-                    this.ctx.drawImage(this.tileset.getImageOf(id), x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
-                }
             }
         }
 
-        this.tank.draw(this.tileset, this.ctx, this.TILE_SIZE);
+        this.tank.draw(this.tileset, this.ctx, Constants.TILE_SIZE.getValue());
 
 
         requestAnimationFrame(() => this.drawField());

src/Graphics/map.js

@@ -1,38 +0,0 @@
-export class Map {
-    //0 - empty
-
-    //1 - brick
-    //2 - brick right
-    //3 - brick down
-    //4 - brick left
-    //5 - brick up
-
-    //6 - steel
-    //7 - steel right
-    //8 - steel down
-    //9 - steel left
-    //10 - steel up
-
-
-    tiles = [
-        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-        0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
-        0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
-        0, 1, 0, 1, 0, 1, 6, 1, 0, 1, 0, 1, 0,
-        0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
-        0, 5, 0, 5, 0, 5, 0, 5, 0, 5, 0, 5, 0,
-        3, 0, 3, 3, 0, 0, 0, 0, 0, 3, 3, 0, 3,
-        10, 0, 5, 5, 0, 3, 0, 3, 0, 5, 5, 0, 10,
-        0, 3, 0, 3, 0, 1, 1, 1, 0, 3, 0, 3, 0,
-        0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
-        0, 1, 0, 1, 0, 5, 0, 5, 0, 1, 0, 1, 0,
-        0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0,
-        0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0,
-        0, 0, 0, 0, 0, 2, 0, 4, 0, 0, 0, 0, 0
-    ];
-
-
-    constructor() {
-
-    }
-}

src/constants.js

@@ -0,0 +1,13 @@
+export class Constants {
+    static TILE_SIZE = new Constants(32);
+    static GAME_WIDTH = new Constants(13);
+    static GAME_HEIGHT = new Constants(13);
+
+    constructor(value){
+        this._value = value;
+    }
+
+    getValue() {
+        return this._value;
+    }
+}