diff --git a/src/Blocks/block.js b/src/Blocks/block.js deleted file mode 100644 index fcba516..0000000 --- a/src/Blocks/block.js +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/Blocks/blockBuilder.js b/src/Blocks/blockBuilder.js new file mode 100644 index 0000000..fe1e132 --- /dev/null +++ b/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); + } + + + +} \ No newline at end of file diff --git a/src/Blocks/blockTypeEnum.js b/src/Blocks/blockTypeEnum.js new file mode 100644 index 0000000..f4b07df --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/src/Blocks/brick.js b/src/Blocks/brick.js deleted file mode 100644 index 110b690..0000000 --- a/src/Blocks/brick.js +++ /dev/null @@ -1,7 +0,0 @@ -class Brick extends Block { - constructor(width, height, xBox, yBox, wBox, hBox, tile) { - super(width, height, xBox, yBox, wBox, hBox, tile); - } - - -} \ No newline at end of file diff --git a/src/Blocks/eagle.js b/src/Blocks/eagle.js deleted file mode 100644 index 6c3b10d..0000000 --- a/src/Blocks/eagle.js +++ /dev/null @@ -1,7 +0,0 @@ -class Eagle extends Block { - constructor(width, height, xBox, yBox, wBox, hBox, tile) { - super(width, height, xBox, yBox, wBox, hBox, tile); - } - - -} \ No newline at end of file diff --git a/src/Blocks/iron.js b/src/Blocks/iron.js deleted file mode 100644 index 7380c0c..0000000 --- a/src/Blocks/iron.js +++ /dev/null @@ -1,7 +0,0 @@ -class Iron extends Block { - constructor(width, height, xBox, yBox, wBox, hBox, tile) { - super(width, height, xBox, yBox, wBox, hBox, tile); - } - - -} \ No newline at end of file diff --git a/src/Blocks/river.js b/src/Blocks/river.js deleted file mode 100644 index 92467ea..0000000 --- a/src/Blocks/river.js +++ /dev/null @@ -1,7 +0,0 @@ -class River extends Block { - constructor(width, height, xBox, yBox, wBox, hBox, tile) { - super(width, height, xBox, yBox, wBox, hBox, tile); - } - - -} \ No newline at end of file diff --git a/src/Blocks/types/block.js b/src/Blocks/types/block.js new file mode 100644 index 0000000..385a63b --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/Blocks/types/brick.js b/src/Blocks/types/brick.js new file mode 100644 index 0000000..598f33d --- /dev/null +++ b/src/Blocks/types/brick.js @@ -0,0 +1,9 @@ +import {Block} from "./block" + +export class Brick extends Block { + constructor(boxes, tile) { + super(boxes, tile); + } + + +} \ No newline at end of file diff --git a/src/Blocks/types/eagle.js b/src/Blocks/types/eagle.js new file mode 100644 index 0000000..42b7a21 --- /dev/null +++ b/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; + } + + +} \ No newline at end of file diff --git a/src/Blocks/types/empty.js b/src/Blocks/types/empty.js new file mode 100644 index 0000000..5ffc97e --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/Blocks/types/forest.js b/src/Blocks/types/forest.js new file mode 100644 index 0000000..a289e10 --- /dev/null +++ b/src/Blocks/types/forest.js @@ -0,0 +1,7 @@ +import { Block } from "./block" + +export class Forest extends Block { + constructor(boxes, tile){ + super(boxes, tile); + } +} \ No newline at end of file diff --git a/src/Blocks/types/iron.js b/src/Blocks/types/iron.js new file mode 100644 index 0000000..2c1b72c --- /dev/null +++ b/src/Blocks/types/iron.js @@ -0,0 +1,9 @@ +import {Block} from "./block" + +export class Iron extends Block { + constructor(boxes, tile) { + super(boxes, tile); + } + + +} \ No newline at end of file diff --git a/src/Blocks/types/river.js b/src/Blocks/types/river.js new file mode 100644 index 0000000..9d4c727 --- /dev/null +++ b/src/Blocks/types/river.js @@ -0,0 +1,9 @@ +import {Block} from "./block" + +export class River extends Block { + constructor(boxes, tile) { + super(boxes, tile); + } + + +} \ No newline at end of file diff --git a/src/Graphics/Map/map.js b/src/Graphics/Map/map.js new file mode 100644 index 0000000..dc1f0c2 --- /dev/null +++ b/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]; + } +} \ No newline at end of file diff --git a/src/Graphics/Map/mapParser.js b/src/Graphics/Map/mapParser.js new file mode 100644 index 0000000..2ad0617 --- /dev/null +++ b/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; + + } + + +} \ No newline at end of file diff --git a/src/Graphics/Tileset/tile.js b/src/Graphics/Tileset/tile.js index ef2be0e..043848a 100644 --- a/src/Graphics/Tileset/tile.js +++ b/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; } diff --git a/src/Graphics/Tileset/tileset.js b/src/Graphics/Tileset/tileset.js index dbbf4d5..f8829f0 100644 --- a/src/Graphics/Tileset/tileset.js +++ b/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; } } diff --git a/src/Graphics/gameField.js b/src/Graphics/gameField.js index db43e96..4a7ba9f 100644 --- a/src/Graphics/gameField.js +++ b/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(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); + this.tileset.addTile(512, 0, 32, 32, BlockTypeEnum.Brick); //Metal - this.tileset.addTile(512, 32, 32, 31, 6); - this.tileset.addTile(544, 32, 32, 31, 7); - this.tileset.addTile(576, 32, 32, 31, 8); - this.tileset.addTile(608, 32, 32, 31, 9); - this.tileset.addTile(640, 32, 32, 31, 10); + this.tileset.addTile(512, 32, 32, 32, BlockTypeEnum.Iron); + + //Eagle + this.tileset.addTile(608, 64, 32, 32, BlockTypeEnum.Eagle); + 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 < this.GAME_WIDTH; x += 1) { - for (let y = 0; y <= this.GAME_HEIGHT; y += 1) { - let id = map[x + y * this.GAME_WIDTH]; - + for (let x = 0; x < Constants.GAME_WIDTH.getValue(); x += 1) { + for (let y = 0; y < Constants.GAME_HEIGHT.getValue(); y += 1) { this.ctx.fillStyle = "black"; - this.ctx.fillRect(x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE); - - 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.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, this.TILE_SIZE); + this.tank.draw(this.tileset, this.ctx, Constants.TILE_SIZE.getValue()); requestAnimationFrame(() => this.drawField()); diff --git a/src/Graphics/map.js b/src/Graphics/map.js deleted file mode 100644 index 6ec59bd..0000000 --- a/src/Graphics/map.js +++ /dev/null @@ -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() { - - } -} \ No newline at end of file diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..a7ffdff --- /dev/null +++ b/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; + } +} \ No newline at end of file