From b4f1e7c083a4445d942494c013f47cf47f6aea69 Mon Sep 17 00:00:00 2001 From: Nikita Iryupin Date: Mon, 3 May 2021 14:32:13 +0200 Subject: [PATCH] Start on Collision --- src/GameLogic/collisionManager.js | 48 ++++++++++++++++++++++++ src/GameLogic/collisionType.js | 6 +++ src/{Graphics => GameLogic}/gameField.js | 36 +++++++++--------- src/Graphics/Map/map.js | 6 +-- src/Tanks/playerTank.js | 29 ++++++++------ src/constants.js | 3 +- 6 files changed, 95 insertions(+), 33 deletions(-) create mode 100644 src/GameLogic/collisionManager.js create mode 100644 src/GameLogic/collisionType.js rename src/{Graphics => GameLogic}/gameField.js (63%) diff --git a/src/GameLogic/collisionManager.js b/src/GameLogic/collisionManager.js new file mode 100644 index 0000000..61ef316 --- /dev/null +++ b/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; + } + + +} \ No newline at end of file diff --git a/src/GameLogic/collisionType.js b/src/GameLogic/collisionType.js new file mode 100644 index 0000000..5ded716 --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/src/Graphics/gameField.js b/src/GameLogic/gameField.js similarity index 63% rename from src/Graphics/gameField.js rename to src/GameLogic/gameField.js index 4a7ba9f..34fba66 100644 --- a/src/Graphics/gameField.js +++ b/src/GameLogic/gameField.js @@ -1,17 +1,18 @@ -import { Tileset } from "./Tileset/tileset" -import { Map } from "./Map/map"; +import { Tileset } from "../Graphics/Tileset/tileset" import { PlayerTank } from "../Tanks/playerTank"; -import { Constants } from "./../constants" -import { BlockTypeEnum } from "./../Blocks/blockTypeEnum" -import { MapParser } from "./Map/mapParser"; +import { Constants } from "../constants" +import { BlockTypeEnum } from "../Blocks/blockTypeEnum" +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.tank = new PlayerTank(0, 0, 0); + this.canvas = canvas; + 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(64, 0, 32, 32, 102); - this.tileset.addTile(128, 0, 32, 32, 103); - this.tileset.addTile(192, 0, 32, 32, 104); + this.tileset.addTile(0, 0, 30, 30, 101); + this.tileset.addTile(64, 0, 32, 30, 102); + this.tileset.addTile(128, 0, 32, 30, 103); + 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){ - this.map = await new MapParser().getMap(4, this.tileset); + if (!this.map) { + 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 y = 0; y < Constants.GAME_HEIGHT.getValue(); y += 1) { + + 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()); 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()); diff --git a/src/Graphics/Map/map.js b/src/Graphics/Map/map.js index dc1f0c2..90d42e8 100644 --- a/src/Graphics/Map/map.js +++ b/src/Graphics/Map/map.js @@ -1,7 +1,7 @@ export class Map { constructor(width, height) { - this._width = width; - this._height = height; + this.width = width; + 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]; } } \ No newline at end of file diff --git a/src/Tanks/playerTank.js b/src/Tanks/playerTank.js index 71f2a82..79fcb57 100644 --- a/src/Tanks/playerTank.js +++ b/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) { - ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y, tilesize, tilesize); + draw(tileset, ctx) { + ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y, + Constants.TANK_SIZE.getValue(), Constants.TANK_SIZE.getValue()); } } \ No newline at end of file diff --git a/src/constants.js b/src/constants.js index a7ffdff..5228c3f 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,7 +1,6 @@ export class Constants { static TILE_SIZE = new Constants(32); - static GAME_WIDTH = new Constants(13); - static GAME_HEIGHT = new Constants(13); + static TANK_SIZE = new Constants(28); constructor(value){ this._value = value;