Some formatting and redoing enum to class

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;
     }
 }

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){
+    getImageOf(id) {
-        for (let i = 0; i < this.tiles.length; i++){
+        for (let i = 0; i < this.tiles.length; i++) {
-            if (this.tiles[i].id == id){
+            if (this.tiles[i].id == id) {
                 return this.tiles[i].img;
             }
         }
         return null;
     }
 
-    
+
 }

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

src/KeyAdapters/gameKeyAdapterInterface.js

@@ -1,3 +1,3 @@
 export class GameKeyAdapterInterface {
-    handleEvent(ev){}
+    handleEvent(ev) { }
 }

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;
         }
 

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) {

src/directionEnum.js

@@ -1,6 +1,15 @@
-const DirectionEnum = {"up":1, "left":2, "down": 3, "right": 4};
+export class DirectionEnum {
-Object.freeze(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;
 }

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);
     }

src/gameField.js

@@ -1,5 +1,5 @@
-import {Tileset} from "./Graphics/Tileset/tileset"
+import { Tileset } from "./Graphics/Tileset/tileset"
-import {Map} from "./Graphics/map";
+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);
                 }
             }
         }

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.speed = 5.0;
-        this.direction = Direction().up;
+        this.direction = DirectionEnum.Up;
     }
 
-    move(direction){
+    move(direction) {
-        switch(direction){
+        switch (direction) {
-            case Direction().up:
+            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){
+    draw(tileset, ctx, tilesize) {
-        ctx.drawImage(tileset.getImageOf(100 + this.direction), this.x, this.y, tilesize, tilesize);
+        ctx.drawImage(tileset.getImageOf(100 + this.direction.getValue()), this.x, this.y, tilesize, tilesize);
     }
-    
+
 }