107 lines
4.0 KiB
JavaScript
107 lines
4.0 KiB
JavaScript
import { Tileset } from "../Graphics/Tileset/tileset"
|
|
import { Tank } from "../Tanks/tank";
|
|
import { Constants } from "../constants"
|
|
import { BlockTypeEnum } from "../Blocks/blockTypeEnum"
|
|
import { MapParser } from "../Graphics/Map/mapParser";
|
|
import { CollisionManager } from "./collisionManager";
|
|
import { AITankManager } from "./../Tanks/aiTankManager";
|
|
import { DirectionEnum } from "../Tanks/directionEnum";
|
|
|
|
export class GameField {
|
|
constructor(width = 512, height = 512, ctx, canvas) {
|
|
this.height = height;
|
|
this.width = width;
|
|
this.ctx = ctx;
|
|
this.canvas = canvas;
|
|
this.tileset = null;
|
|
this.map = null;
|
|
|
|
|
|
this.collisionManager = new CollisionManager();
|
|
this.tank = new Tank(Constants.PLAYER_TANK_ID_IMAGE.getValue(), 0, 18*16, this.collisionManager);
|
|
this.aiTanks = new AITankManager(this.collisionManager);
|
|
this.collisionManager._aiManager = this.aiTanks;
|
|
this.collisionManager._mainTank = this.tank;
|
|
}
|
|
|
|
//add all tiles here!
|
|
async setupTileset() {
|
|
this.tileset = new Tileset("nesBattle.png");
|
|
|
|
//Bricks
|
|
this.tileset.addTile(512, 0, 32, 32, BlockTypeEnum.Brick);
|
|
|
|
//Metal
|
|
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, 2, 28, 30, Constants.PLAYER_TANK_ID_IMAGE.getValue() + DirectionEnum.Up.getValue());
|
|
this.tileset.addTile(64, 0, 28, 28, Constants.PLAYER_TANK_ID_IMAGE.getValue() + DirectionEnum.Left.getValue());
|
|
this.tileset.addTile(128, 0, 28, 28, Constants.PLAYER_TANK_ID_IMAGE.getValue() + DirectionEnum.Down.getValue());
|
|
this.tileset.addTile(192, 0, 28, 28, Constants.PLAYER_TANK_ID_IMAGE.getValue() + DirectionEnum.Right.getValue());
|
|
|
|
//Enemy tank
|
|
this.tileset.addTile(256, 2, 28, 30, 200 + DirectionEnum.Up.getValue());
|
|
this.tileset.addTile(320, 0, 28, 28, 200 + DirectionEnum.Left.getValue());
|
|
this.tileset.addTile(386, 0, 28, 28, 200 + DirectionEnum.Down.getValue());
|
|
this.tileset.addTile(452, 0, 28, 28, 200 + DirectionEnum.Right.getValue());
|
|
|
|
await this.tileset.loadAll();
|
|
}
|
|
|
|
async drawField() {
|
|
if (!this.tileset) {
|
|
await this.setupTileset();
|
|
}
|
|
|
|
if (!this.map) {
|
|
this.map = await new MapParser().getMap(1, this.tileset);
|
|
this.canvas.height = this.height;
|
|
this.canvas.width = this.width;
|
|
this.collisionManager.attachMap(this.map);
|
|
this.aiTanks.setCount(this.map._enemiesCount);
|
|
}
|
|
|
|
let lateDraw = [];
|
|
|
|
|
|
for (let x = 0; x < this.map.width; x += 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());
|
|
|
|
let element = this.map.getElement(x, y);
|
|
if (element.getType() == BlockTypeEnum.Forest){
|
|
lateDraw.push({element, x, y});
|
|
} else
|
|
{
|
|
element.draw(this.ctx, x * Constants.TILE_SIZE.getValue(), y * Constants.TILE_SIZE.getValue());
|
|
}
|
|
}
|
|
}
|
|
|
|
this.tank.draw(this.tileset, this.ctx);
|
|
|
|
this.aiTanks.drawAllTanks(this.tileset, this.ctx);
|
|
|
|
for (let el of lateDraw) {
|
|
el.element.draw(this.ctx, el.x * Constants.TILE_SIZE.getValue(), el.y * Constants.TILE_SIZE.getValue());
|
|
}
|
|
|
|
if (this.aiTanks.isAllTanksDied()) return;
|
|
|
|
requestAnimationFrame(() => this.drawField());
|
|
}
|
|
|
|
} |