From 0d5c742cb44cf3ac5a872ed72cf4973c58f11cb1 Mon Sep 17 00:00:00 2001 From: Nikita Iryupin Date: Mon, 31 May 2021 11:12:31 +0200 Subject: [PATCH] [WIP] Start working on shots --- src/GameLogic/collisionManager.js | 12 +--- src/KeyAdapters/tankKeyAdapter.js | 3 + src/Tanks/playerTank.js | 32 ++++++++- src/Tanks/shotElement.js | 107 ++++++++++++++++++++++++++++++ src/constants.js | 1 + 5 files changed, 145 insertions(+), 10 deletions(-) create mode 100644 src/Tanks/shotElement.js diff --git a/src/GameLogic/collisionManager.js b/src/GameLogic/collisionManager.js index 022d0f9..fc68367 100644 --- a/src/GameLogic/collisionManager.js +++ b/src/GameLogic/collisionManager.js @@ -25,8 +25,6 @@ export class CollisionManager { checkCollisionForShots(xMin, xMax, yMin, yMax) { } - - _checkTankCollision(xMin, xMax, yMin, yMax) { //TODO with AI tanks return null; @@ -40,10 +38,6 @@ export class CollisionManager { return null; } - _checkShotCollision(xMin, xMax, yMin, yMax) { - return null; - } - _checkBlockCollision(xMin, xMax, yMin, yMax) { const blocksToCheck = this._getAllElementsOfMapOn(xMin, xMax, yMin, yMax); const tilesize = Constants.TILE_SIZE.getValue(); @@ -71,9 +65,9 @@ export class CollisionManager { for (let y = 0; y < this._map.height; y++) { if (this.intersect(xMin, xMax, yMin, yMax, x * tilesize, (x + 1) * tilesize, y * tilesize, (y + 1) * tilesize)) elements.push({ - "block": this._map.getElement(x, y), - "xPos": x, - "yPos": y + block: this._map.getElement(x, y), + xPos: x, + yPos: y }); } } diff --git a/src/KeyAdapters/tankKeyAdapter.js b/src/KeyAdapters/tankKeyAdapter.js index 7cb015a..14211d0 100644 --- a/src/KeyAdapters/tankKeyAdapter.js +++ b/src/KeyAdapters/tankKeyAdapter.js @@ -9,6 +9,7 @@ export class TankKeyAdapter extends GameKeyAdapterInterface { } handleEvent(event) { + console.log(event.key); switch (event.key) { case "ArrowLeft": this.tank.move(DirectionEnum.Left); @@ -22,6 +23,8 @@ export class TankKeyAdapter extends GameKeyAdapterInterface { case "ArrowDown": this.tank.move(DirectionEnum.Down); break; + case "Control": + this.tank.shot(); } //console.log(event.key); diff --git a/src/Tanks/playerTank.js b/src/Tanks/playerTank.js index b692c69..a6feedd 100644 --- a/src/Tanks/playerTank.js +++ b/src/Tanks/playerTank.js @@ -1,5 +1,6 @@ import { Constants } from "../constants"; import { DirectionEnum } from "./directionEnum"; +import { ShotManager } from "./shotElement"; export class PlayerTank { @@ -9,6 +10,8 @@ export class PlayerTank { this.collisionManager = collisionManager; this.speed = 3.0; this.direction = DirectionEnum.Up; + + this.shotManager = new ShotManager(collisionManager, this); } move(direction) { @@ -45,9 +48,36 @@ export class PlayerTank { } } + shot() { + let x, y = 0 + const tanksize = Constants.TANK_SIZE.getValue(); + + switch (this.direction) { + case DirectionEnum.Up: + x = this.x + tanksize / 2; + y = this.y; + break; + case DirectionEnum.Left: + x = this.x; + y = this.y + tanksize / 2; + break; + case DirectionEnum.Down: + x = this.x + tanksize / 2; + y = this.y + tanksize; + break; + case DirectionEnum.Right: + x = this.x + tanksize; + y = this.y + tanksize / 2; + break; + } + + this.shotManager.tryShot(this.direction, x, y); + } + draw(tileset, ctx) { ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y, - Constants.TANK_SIZE.getValue(), Constants.TANK_SIZE.getValue()); + Constants.TANK_SIZE.getValue(), Constants.TANK_SIZE.getValue()); + this.shotManager.draw(ctx); } } \ No newline at end of file diff --git a/src/Tanks/shotElement.js b/src/Tanks/shotElement.js new file mode 100644 index 0000000..d5fca2d --- /dev/null +++ b/src/Tanks/shotElement.js @@ -0,0 +1,107 @@ +import { Constants } from "../constants"; +import { DirectionEnum } from "./directionEnum"; + +class Shot { + constructor(shotManager, direction, x, y) { + this.image = ShotVisualElement.createShot(direction); + this.shotManager = shotManager; + this.direction = direction; + this.x = x; + this.y = y; + this.speed = Constants.SHOT_SPEED.getValue(); + } + + move() { + switch (this.direction) { + case DirectionEnum.Up: + if (!this.shotManager.checkCollision(this.x, this.x + 4, this.y - this.speed, this.y + 4 - this.speed)) + this.y -= this.speed; + else this.shotManager.destroyShot(); + break; + + case DirectionEnum.Left: + if (!this.shotManager.checkCollision(this.x - this.speed, this.x + 4 - this.speed, this.y, this.y + 4)) + this.x -= this.speed; + else this.shotManager.destroyShot(); + break; + + case DirectionEnum.Right: + if (!this.shotManager.checkCollision(this.x + this.speed, this.x + 4 + this.speed, this.y, this.y + 4)) + this.x += this.speed; + else this.shotManager.destroyShot(); + break; + + case DirectionEnum.Down: + if (!this.shotManager.checkCollision(this.x, this.x + 4, this.y + this.speed, this.y + 4 + this.speed)) + this.y += this.speed; + else this.shotManager.destroyShot(); + break; + } + } + +} + +export class ShotManager { + constructor(collisionManager, tank) { + this.collisionManager = collisionManager; + this.tank = tank; + this.shot = null; + } + + tryShot(direction, x, y) { + if (!this.shot) { + this.shot = new Shot(this, direction, x, y); + } + } + + checkCollision(minX, maxX, minY, maxY) { + return this.collisionManager.checkCollisionForTank(minX, maxX, minY, maxY); + } + + destroyShot() { + this.shot = null; + } + + draw(ctx) { + if (this.shot) + this.shot.move(); + + if (this.shot) + ctx.drawImage(this.shot.image, this.shot.x, this.shot.y); + } +} + +class ShotVisualElement { + static createShot(direction) { + let canvas = document.createElement("canvas"); + canvas.width = 4; + canvas.height = 4; + let ctx = canvas.getContext("2d"); + ctx.fillStyle = "BLACK"; + ctx.fillRect(0, 0, 4, 4); + + ctx.fillStyle = "GREY"; + switch (direction) { + case DirectionEnum.Up: + ctx.fillRect(0, 1, 4, 3); + ctx.fillRect(1, 0, 2, 1); + break; + case DirectionEnum.Left: + ctx.fillRect(1, 0, 3, 4); + ctx.fillRect(0, 1, 1, 2); + break; + case DirectionEnum.Down: + ctx.fillRect(0, 0, 4, 3); + ctx.fillRect(1, 3, 2, 1); + break; + case DirectionEnum.Right: + ctx.fillRect(0, 0, 3, 4); + ctx.fillRect(3, 1, 1, 2); + break; + } + + let img = new Image(); + img.src = canvas.toDataURL("image/png"); + return img; + } +} \ No newline at end of file diff --git a/src/constants.js b/src/constants.js index db3e29d..4434f09 100644 --- a/src/constants.js +++ b/src/constants.js @@ -2,6 +2,7 @@ export class Constants { static TILE_SIZE = new Constants(32); static TANK_SIZE = new Constants(24); static TANK_COLL_OFFSET = new Constants(0.125); + static SHOT_SPEED = new Constants(3.0); constructor(value){ this._value = value;