Basic implementation of game server with move handling

Author: coder-pm

package-lock.json

@@ -2,10 +2,13 @@
   "name": "battle-city-react-server",
   "private": true,
   "dependencies": {
-    "socket.io": "^2.2.0"
+    "socket.io": "^2.2.0",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@types/node": "^11.13.7",
+    "@types/socket.io": "^2.1.2",
+    "@types/uuid": "^3.4.4",
     "nodemon": "^1.18.11",
     "ts-node": "^8.1.0",
     "typescript": "^3.4.4"

package.json

@@ -0,0 +1,14 @@
+export const GAME_SERVER_ADDRESS: string = '192.168.1.101';
+export const GAME_SERVER_PORT: number = 3100;
+export const GAME_FRAMERATE: number = Math.floor(1000 / 60);
+export const BOARD_WIDTH: number = 1080 + (2 * 24);
+export const BOARD_HEIGHT: number = 720 + (2 * 24);
+export const TANK_WIDTH: number = 42;
+export const TANK_HEIGHT: number = 42;
+export const TANK_MOVE_STEP: number = Math.floor(GAME_FRAMERATE / 5);
+export const MISSILE_WIDTH: number = 6;
+export const MISSILE_HEIGHT: number = 6;
+export const MISSILE_MOVE_STEP: number = Math.floor(GAME_FRAMERATE / 2);
+export const MISSILE_THROTTLE_TIME: number = 300;
+export const OBSTACLE_WIDTH: number = 24;
+export const OBSTACLE_HEIGHT: number = 24;

src/constants.ts

@@ -0,0 +1,109 @@
+import {Collision} from "../../enums/Collision";
+import Structure from "../../models/Structure";
+import Point from "../../models/Point";
+import {BOARD_HEIGHT} from "../../../constants";
+
+/**
+ * Class World - class representing world.
+ */
+export default class World {
+    /**
+     * Objects registry.
+     */
+    protected readonly REGISTRY: {
+        [index: string]: {
+            structure: Structure,
+            collisions: Array<Collision>
+        }
+    } = {};
+
+    /**
+     * Collision map.
+     */
+    protected readonly COLLISION_MAP = {
+        [Collision.BLOCK_ALL]: [Collision.BLOCK_MOVE, Collision.BLOCK_SHOT],
+        [Collision.BLOCK_MOVE]: [Collision.BLOCK_MOVE],
+        [Collision.BLOCK_SHOT]: [Collision.BLOCK_SHOT],
+        [Collision.BLOCK_NONE]: []
+    };
+
+    /**
+     * Register object in world.
+     *
+     * @param object - world object definition
+     * @param collision - object collision type
+     */
+    public registerObject(object: Structure, collision: Collision): void {
+        const collisions: Array<Collision> = [];
+        if (collision === Collision.BLOCK_ALL) {
+            collisions.push(Collision.BLOCK_MOVE, Collision.BLOCK_SHOT);
+        } else {
+            collisions.push(collision)
+        }
+        this.REGISTRY[object.id] = {structure: object, collisions: collisions};
+    }
+
+    /**
+     * Update object position.
+     *
+     * @param id - object id
+     * @param location - new location
+     */
+    public updateObject(id: string, location: Point): void {
+        this.REGISTRY[id].structure.location = location;
+    }
+
+    /**
+     * Remove object from world.
+     *
+     * @param id - object id
+     */
+    public removeObject(id: string): void {
+        delete this.REGISTRY[id];
+    }
+
+    /**
+     * Check if object is intersecting with anything else in the world using given collision type.
+     *
+     * @param actor - world object definition
+     * @param collision - collision type
+     */
+    public isIntersecting(actor: Structure, collision: Collision): Array<Structure> {
+        // object position (y axis inversed)
+        const tp = {
+            l: {x: actor.location.x, y: BOARD_HEIGHT - actor.location.y}, // top left
+            r: {
+                x: actor.location.x + actor.dimension.width,
+                y: BOARD_HEIGHT - actor.location.y - actor.dimension.height
+            } // bottom right
+        };
+        const hits = [];
+        for (const oid in this.REGISTRY) {
+            if (actor.id !== oid && this.REGISTRY.hasOwnProperty(oid)) {
+                const object = this.REGISTRY[oid];
+                if (this.COLLISION_MAP[collision].filter(x => object.collisions.includes(x)).length) {
+                    // obstacle position (y axis inversed)
+                    const loc = object.structure.location;
+                    const dim = object.structure.dimension;
+                    const op = {
+                        l: {x: loc.x, y: BOARD_HEIGHT - loc.y}, // top left
+                        r: {x: loc.x + dim.width, y: BOARD_HEIGHT - loc.y - dim.height} // bottom right
+                    };
+                    let intersecting = true;
+                    // aside collision check
+                    if (tp.l.x > op.r.x || op.l.x > tp.r.x) {
+                        intersecting = false;
+                    }
+                    // top/bottom collision check
+                    if (tp.l.y < op.r.y || op.l.y < tp.r.y) {
+                        intersecting = false;
+                    }
+                    if (intersecting) {
+                        hits.push(object.structure);
+                    }
+                }
+            }
+        }
+        return hits;
+    }
+}

src/game/classes/World/World.ts

@@ -0,0 +1 @@
+export {default} from './World';

src/game/classes/World/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Enum Collision - available collisions.
+ */
+export enum Collision {
+    BLOCK_ALL = 'block_all',
+    BLOCK_SHOT = 'block_shot',
+    BLOCK_MOVE = 'block_move',
+    BLOCK_NONE = 'block_none'
+}

src/game/enums/Collision.ts

@@ -0,0 +1,11 @@
+/**
+ * Enum NetworkPacket - network packet.
+ */
+export enum NetworkPacket {
+    CONNECTED = 'connect',
+    HANDSHAKING = 'handshaking',
+    BOARD_STATE_OBSTACLES = 'board.state.obstacles',
+    BOARD_STATE_TANKS = 'board.state.tanks',
+    BOARD_STATE_MISSILES = 'board.state.missiles',
+    TANK_EVENT_KEYBOARD = 'tank.event.keyboard'
+}

src/game/enums/NetworkPacket.ts

@@ -0,0 +1,10 @@
+/**
+ * Enum ObstacleType - obstacle types.
+ */
+export enum ObstacleType {
+    BRICK = 'brick',
+    METAL = 'metal',
+    WATER = 'water',
+    FOREST = 'forest',
+    TRANSPARENT = 'transparent'
+}

src/game/enums/ObstacleType.ts

@@ -0,0 +1,8 @@
+/**
+ * Enum TankActor - tank actor.
+ */
+export enum TankActor {
+    SELF = 'self',
+    PLAYER = 'player',
+    AI = 'ai'
+}

src/game/enums/TankActor.ts

@@ -0,0 +1,87 @@
+import {OBSTACLE_HEIGHT, OBSTACLE_WIDTH, TANK_HEIGHT, TANK_MOVE_STEP, TANK_WIDTH} from "../../constants";
+import {Collision} from "../enums/Collision";
+import {TankActor} from "../enums/TankActor";
+import World from "../classes/World";
+import TankModel from "../models/components/TankModel";
+import Move from "../models/Move";
+
+/**
+ * Tank move handler.
+ *
+ * @param tank - tank model
+ * @param world - world
+ * @param isStuck - stuck state
+ * @param activeKey - active key
+ */
+export const TANK_MOVE_HANDLER = (tank: TankModel, world: World, isStuck: boolean, activeKey: string): Move => {
+    let move = {
+        location: tank.location,
+        rotation: tank.rotation,
+        isStuck: isStuck
+    };
+    if (activeKey) {
+        let x = tank.location.x;
+        let y = tank.location.y;
+        let r = tank.rotation;
+        let initialDirection = r;
+        let correctionAxis = 'x';
+        switch (activeKey) {
+            case 'ArrowUp':
+                y -= TANK_MOVE_STEP;
+                r = 0;
+                break;
+            case 'ArrowRight':
+                x += TANK_MOVE_STEP;
+                r = 90;
+                correctionAxis = 'y';
+                break;
+            case 'ArrowDown':
+                y += TANK_MOVE_STEP;
+                r = 180;
+                break;
+            case 'ArrowLeft':
+                x -= TANK_MOVE_STEP;
+                r = 270;
+                correctionAxis = 'y';
+                break;
+            default:
+        }
+
+        // move correction (stick to grid)
+        if (initialDirection !== r) {
+            if (correctionAxis === 'x') {
+                x = 3 + (Math.round(x / OBSTACLE_WIDTH) * OBSTACLE_WIDTH);
+            } else {
+                y = 3 + (Math.round(y / OBSTACLE_HEIGHT) * OBSTACLE_HEIGHT);
+            }
+        }
+
+        // intersection check
+        if (world.isIntersecting({
+                id: tank.id,
+                location: {
+                    x: x,
+                    y: y
+                },
+                dimension: {
+                    width: TANK_WIDTH,
+                    height: TANK_HEIGHT
+                }
+            },
+            Collision.BLOCK_MOVE
+        ).length === 0) {
+            move.location = {x: x, y: y};
+            move.rotation = r;
+            move.isStuck = false;
+            world.updateObject(tank.id, tank.location);
+        } else {
+            move.isStuck = true;
+            // just rotate in case of intersection
+            // but prevent rotation of stucked AI as it looks like glitch
+            if (tank.actor !== TankActor.AI || !move.isStuck) {
+                move.rotation = r;
+            }
+        }
+    }
+    return move;
+};