From 1cda01992f379dd9a26efdf46f0f0271030b5f9b Mon Sep 17 00:00:00 2001 From: Nikita Iryupin Date: Wed, 21 Apr 2021 23:39:25 +0200 Subject: [PATCH] Some formatting and redoing enum to class --- src/Graphics/Tileset/tile.js | 4 +-- src/Graphics/Tileset/tileset.js | 18 ++++++------ src/Graphics/map.js | 2 +- src/KeyAdapters/gameKeyAdapterInterface.js | 2 +- src/KeyAdapters/tankKeyAdapter.js | 10 +++---- src/canvas.js | 4 +-- src/directionEnum.js | 17 ++++++++--- src/game.js | 2 +- src/gameField.js | 22 +++++++-------- src/playerTank.js | 33 ++++++++++------------ 10 files changed, 60 insertions(+), 54 deletions(-) diff --git a/src/Graphics/Tileset/tile.js b/src/Graphics/Tileset/tile.js index f37e2f9..ae64868 100644 --- a/src/Graphics/Tileset/tile.js +++ b/src/Graphics/Tileset/tile.js @@ -1,5 +1,5 @@ export class Tile { - constructor(x, y, width, height, id){ + constructor(x, y, width, height, id) { this.x = x; this.y = y; this.width = width; @@ -10,7 +10,7 @@ export class Tile { this.img = null; } - addImage(img){ + addImage(img) { this.img = img; } } \ No newline at end of file diff --git a/src/Graphics/Tileset/tileset.js b/src/Graphics/Tileset/tileset.js index 3ac670c..d1a7e77 100644 --- a/src/Graphics/Tileset/tileset.js +++ b/src/Graphics/Tileset/tileset.js @@ -1,19 +1,19 @@ -import {Tile} from "./tile" +import { Tile } from "./tile" export class Tileset { tiles = []; - constructor(imageName) { + constructor(imageName) { this.image = new Image(); this.image.src = `./${imageName}`; } - addTile(x, y, width, height, id){ + addTile(x, y, width, height, id) { this.tiles.push(new Tile(x, y, width, height, id)); } loadAll() { - return new Promise(resolve => { + return new Promise(resolve => { this.image.onload = (() => { for (let i = 0; i < this.tiles.length; i++) { let tile = this.tiles[i]; @@ -31,17 +31,17 @@ export class Tileset { var context = canvas.getContext('2d'); context.drawImage(this.image, x, y, width, height, 0, 0, width, height); - return canvas; + return canvas; } - getImageOf(id){ - for (let i = 0; i < this.tiles.length; i++){ - if (this.tiles[i].id == id){ + getImageOf(id) { + for (let i = 0; i < this.tiles.length; i++) { + if (this.tiles[i].id == id) { return this.tiles[i].img; } } return null; } - + } \ No newline at end of file diff --git a/src/Graphics/map.js b/src/Graphics/map.js index 4743efc..6ec59bd 100644 --- a/src/Graphics/map.js +++ b/src/Graphics/map.js @@ -6,7 +6,7 @@ export class Map { //3 - brick down //4 - brick left //5 - brick up - + //6 - steel //7 - steel right //8 - steel down diff --git a/src/KeyAdapters/gameKeyAdapterInterface.js b/src/KeyAdapters/gameKeyAdapterInterface.js index 03405e4..a265bfa 100644 --- a/src/KeyAdapters/gameKeyAdapterInterface.js +++ b/src/KeyAdapters/gameKeyAdapterInterface.js @@ -1,3 +1,3 @@ export class GameKeyAdapterInterface { - handleEvent(ev){} + handleEvent(ev) { } } \ No newline at end of file diff --git a/src/KeyAdapters/tankKeyAdapter.js b/src/KeyAdapters/tankKeyAdapter.js index bf62426..1c3fb53 100644 --- a/src/KeyAdapters/tankKeyAdapter.js +++ b/src/KeyAdapters/tankKeyAdapter.js @@ -1,5 +1,5 @@ import { GameKeyAdapterInterface } from "./gameKeyAdapterInterface"; -import Direction from "./../directionEnum"; +import {DirectionEnum} from "./../directionEnum"; export class TankKeyAdapter extends GameKeyAdapterInterface{ @@ -11,16 +11,16 @@ export class TankKeyAdapter extends GameKeyAdapterInterface{ handleEvent(event){ switch(event.key){ case "ArrowLeft": - this.tank.move(Direction().left); + this.tank.move(DirectionEnum.Left); break; case "ArrowRight": - this.tank.move(Direction().right); + this.tank.move(DirectionEnum.Right); break; case "ArrowUp": - this.tank.move(Direction().up); + this.tank.move(DirectionEnum.Up); break; case "ArrowDown": - this.tank.move(Direction().down); + this.tank.move(DirectionEnum.Down); break; } diff --git a/src/canvas.js b/src/canvas.js index bea6b34..1128219 100644 --- a/src/canvas.js +++ b/src/canvas.js @@ -1,6 +1,6 @@ -import {Game} from "./game"; +import { Game } from "./game"; -export function init(){ +export function init() { const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); if (ctx) { diff --git a/src/directionEnum.js b/src/directionEnum.js index 56923d8..eb13824 100644 --- a/src/directionEnum.js +++ b/src/directionEnum.js @@ -1,6 +1,15 @@ -const DirectionEnum = {"up":1, "left":2, "down": 3, "right": 4}; -Object.freeze(DirectionEnum); +export class DirectionEnum { + static Up = new DirectionEnum(1); + static Left = new DirectionEnum(2); + static Down = new DirectionEnum(3); + static Right = new DirectionEnum(4); + + constructor(value){ + this._value = value; + } + + getValue(){ + return this._value; + } -export default function Direction(){ - return DirectionEnum; } \ No newline at end of file diff --git a/src/game.js b/src/game.js index 412c818..875c7d8 100644 --- a/src/game.js +++ b/src/game.js @@ -2,7 +2,7 @@ import { GameField } from "./gameField"; import { TankKeyAdapter } from "./KeyAdapters/tankKeyAdapter"; export class Game { - constructor(width = 500, height = 500, ctx){ + constructor(width = 500, height = 500, ctx) { this.gameField = new GameField(width, height, ctx, canvas); this.gameKeyAdapter = new TankKeyAdapter(this.gameField.tank); } diff --git a/src/gameField.js b/src/gameField.js index b804b82..aa4352c 100644 --- a/src/gameField.js +++ b/src/gameField.js @@ -1,5 +1,5 @@ -import {Tileset} from "./Graphics/Tileset/tileset" -import {Map} from "./Graphics/map"; +import { Tileset } from "./Graphics/Tileset/tileset" +import { Map } from "./Graphics/map"; import { PlayerTank } from "./playerTank"; export class GameField { @@ -7,17 +7,17 @@ export class GameField { GAME_WIDTH = 13; GAME_HEIGHT = 13; - constructor(width = 512, height = 512, ctx, canvas){ + 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.tank = new PlayerTank(0, 0, 0); this.tileset = null; } //add all tiles here! - async setupTileset(){ + async setupTileset() { this.tileset = new Tileset("nesBattle.png"); //Bricks @@ -44,24 +44,24 @@ export class GameField { } async drawField() { - if (!this.tileset){ + if (!this.tileset) { await this.setupTileset(); 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 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]; + let id = map[x + y * this.GAME_WIDTH]; 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.drawImage(this.tileset.getImageOf(id), x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE); } else { 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 * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE); } } } diff --git a/src/playerTank.js b/src/playerTank.js index ada2bff..bc02fc1 100644 --- a/src/playerTank.js +++ b/src/playerTank.js @@ -1,42 +1,39 @@ -import Direction from "./directionEnum"; +import {DirectionEnum} from "./directionEnum"; export class PlayerTank { - - constructor(x, y){ + + constructor(x, y) { this.x = x; this.y = y; - this.speed = 2.0; - this.direction = Direction().up; + this.speed = 5.0; + this.direction = DirectionEnum.Up; } - move(direction){ - switch(direction){ - case Direction().up: + move(direction) { + switch (direction) { + case DirectionEnum.Up: this.y -= this.speed; - this.direction = Direction().up; break; - case Direction().left: + case DirectionEnum.Left: this.x -= this.speed; - this.direction = Direction().left; break; - case Direction().right: + case DirectionEnum.Right: this.x += this.speed; - this.direction = Direction().right; break; - case Direction().down: + case DirectionEnum.Down: this.y += this.speed; - this.direction = Direction().down; break; } + this.direction = direction; console.log(this.x + " " + this.y); } - draw(tileset, ctx, tilesize){ - ctx.drawImage(tileset.getImageOf(100 + this.direction), this.x, this.y, tilesize, tilesize); + draw(tileset, ctx, tilesize) { + ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y, tilesize, tilesize); } - + } \ No newline at end of file