Skip to content

Commit

Permalink
feat: impl use of player engine
Browse files Browse the repository at this point in the history
  • Loading branch information
@thirdmadman
thirdmadman committed Mar 12, 2024
1 parent b59f9ec commit 18d5b57
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 57 deletions.
135 changes: 78 additions & 57 deletions src/app/App.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { InputController } from './engine/InputController';
import { DataStorage } from './engine/DataStorage';
import { Engine } from './engine/Engine';
import { IPixelsLayer } from './interfaces/IPixelsLayer';
Expand Down Expand Up @@ -31,6 +32,8 @@ export class App {

private dataStorage = new DataStorage();

private inputController = new InputController();

constructor() {
this.canvas.classList.add('canvas-renderer');

Expand Down Expand Up @@ -171,46 +174,7 @@ export class App {
false,
);

document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
if (this.framePositionX < this.worldSideSize - this.frameWidth) {
this.framePositionX += 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
}
if (event.key === 'ArrowLeft') {
if (this.framePositionX > 0) {
this.framePositionX -= 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
}

if (event.key === 'ArrowUp') {
if (this.framePositionY < this.worldSideSize - this.frameHeight) {
this.framePositionY += 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
}
if (event.key === 'ArrowDown') {
if (this.framePositionY > 0) {
this.framePositionY -= 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
}
if (event.key === 'Escape') {
this.isPause = !this.isPause;
this.engine.setPause(this.isPause);
}
if (event.key === 's') {
const engineState = this.engine.getEngineState();
this.dataStorage.saveToLocalStorage(engineState);
}
if (event.key === 'l') {
const engineState = this.dataStorage.loadFromLocalStorage();
this.engine.setEngineState(engineState);
}
});

this.inputController.registerKeyListeners();
this.renderer = new Renderer(this.canvas);
}

Expand All @@ -230,7 +194,6 @@ export class App {

const width = Math.floor(this.renderer.getScreenSizeX() / this.renderer.getPixelSize());
const height = Math.floor(this.renderer.getScreenSizeY() / this.renderer.getPixelSize());
console.error(width, height);
this.engine.setRendererSize(width, height);
this.frameWidth = width;
this.frameHeight = height;
Expand All @@ -255,21 +218,6 @@ export class App {
this.framePositionY,
);

const newLayer: IPixelsLayer = {
x: 0,
y: 0,
width: 2,
height: 3,
pixels: new Uint32Array(2 * 3),
};

newLayer.pixels[0] = 0xffff0000;
newLayer.pixels[1] = 0xffff0000;
newLayer.pixels[2] = 0xff00ff00;
newLayer.pixels[3] = 0xff00ff00;
newLayer.pixels[4] = 0xff0000ff;
newLayer.pixels[5] = 0xff0000ff;

const engineLayer: IPixelsLayer = {
x: 0,
y: 0,
Expand All @@ -278,10 +226,83 @@ export class App {
pixels: enginePixels,
};

const clickedKeys = this.inputController.getClickedKeys();
const pressedKeys = this.inputController.getPressedKeys();

if (Object.keys(pressedKeys).length > 0) {
const pressKeyToAction = {
ArrowRight: () => {
if (this.framePositionX < this.worldSideSize - this.frameWidth) {
this.framePositionX += 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
},
ArrowLeft: () => {
if (this.framePositionX > 0) {
this.framePositionX -= 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
},
ArrowUp: () => {
if (this.framePositionY < this.worldSideSize - this.frameHeight) {
this.framePositionY += 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
},
ArrowDown: () => {
if (this.framePositionY > 0) {
this.framePositionY -= 1;
this.engine.setFramePosition(this.framePositionX, this.framePositionY);
}
},
a: () => this.engine.pushPlayerMoveEvent('left'),
s: () => this.engine.pushPlayerMoveEvent('down'),
w: () => {
this.engine.pushPlayerMoveEvent('up');
this.engine.pushPlayerMoveEvent('up');
},
d: () => this.engine.pushPlayerMoveEvent('right'),
};

Object.keys(pressedKeys).forEach((el) => {
const action = pressKeyToAction[el as keyof typeof pressKeyToAction];
if (!action || action === undefined || action === null) {
return;
}
action();
});
}

if (clickedKeys.length > 0) {
const clickKeyToAction = {
Escape: () => {
this.isPause = !this.isPause;
this.engine.setPause(this.isPause);
},
p: () => {
const engineState = this.engine.getEngineState();
this.dataStorage.saveToLocalStorage(engineState);
},
l: () => {
const engineState = this.dataStorage.loadFromLocalStorage();
this.engine.setEngineState(engineState);
},
};

clickedKeys.forEach((el) => {
const action = clickKeyToAction[el as keyof typeof clickKeyToAction];
if (!action || action === undefined || action === null) {
return;
}
action();
});
}

const uiLayers = this.engine.getUi().getLayers();
const playersEngineLayers = this.engine.getPlayersEngine().getLayers();

const pixelsToRender = this.renderer.blendPixelLayers(
[engineLayer, ...uiLayers, newLayer],
[engineLayer, ...playersEngineLayers, ...uiLayers],
this.renderer.getScreenSizeX() / this.renderer.getPixelSize(),
this.renderer.getScreenSizeY() / this.renderer.getPixelSize(),
);
Expand Down
137 changes: 137 additions & 0 deletions src/app/engine/Engine.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { PlayersEngine } from './PlayersEngine';
/* eslint-disable class-methods-use-this */
import { PhysicEngine } from './PhysicEngine';
import { IPoint } from '../interfaces/IPoint';
Expand Down Expand Up @@ -38,6 +39,8 @@ export class Engine {

private ui = new UI({});

private playersEngine = new PlayersEngine();

private eventsStack: Array<() => void> = [];

private gameWorldState: WorldState = Array.from(Array(4), () => new Array<Unit | null>(4));
Expand Down Expand Up @@ -132,6 +135,7 @@ export class Engine {
this.framePositionY = y;

this.ui.setFramePosition({ x, y });
this.playersEngine.setFramePosition({ x, y });
}

setMousedPosition(point: IPoint) {
Expand All @@ -151,6 +155,138 @@ export class Engine {
return this.ui;
}

getPlayersEngine() {
return this.playersEngine;
}

pushPlayerMoveEvent(direction: string) {
const directionToDeltaPosition = {
up: { x: 0, y: 1 },
down: { x: 0, y: -1 },
left: { x: -1, y: 0 },
right: { x: 1, y: 0 },
};

const deltaPosition = directionToDeltaPosition[direction as keyof typeof directionToDeltaPosition];

if (!deltaPosition) {
return;
}

const player = this.playersEngine.getPlayer(0);

const playerExistingDesiredPositionX = player.globalPosition.x + player.desiredDeltaPosition.x;
const playerExistingDesiredPositionY = player.globalPosition.y + player.desiredDeltaPosition.y;

const newDesiredPositionX = playerExistingDesiredPositionX + deltaPosition.x;
const newDesiredPositionY = playerExistingDesiredPositionY + deltaPosition.y;

let isMovementPossible = false;

const playerHeight = player.hitBoxHeight;
const playerWidth = player.hitBoxWidth;

const maxStepHeight = 2;

if (!this.gameWorldState[newDesiredPositionX]) {
return;
}

if (deltaPosition.y < 0) {
for (let i = newDesiredPositionX; i < newDesiredPositionX + playerWidth; i++) {
if (!this.gameWorldState[i]) {
return;
}

const unit = this.gameWorldState[i][newDesiredPositionY];

if (unit === undefined) {
return;
}

if (unit && (unit.getUnitType().unitIsStatic || (!unit.getUnitType().unitIsGas
&& !unit.getUnitType().unitIsFlame && !unit.getUnitType().unitIsLiquid))) {
return;
}
}

isMovementPossible = true;
} else if (deltaPosition.y > 0) {
for (let i = newDesiredPositionX; i < newDesiredPositionX + playerWidth; i++) {
if (!this.gameWorldState[i]) {
return;
}

const unit = this.gameWorldState[i][newDesiredPositionY + playerHeight - 1];

if (unit === undefined) {
return;
}

if (unit && (unit.getUnitType().unitIsStatic || (!unit.getUnitType().unitIsGas
&& !unit.getUnitType().unitIsFlame && !unit.getUnitType().unitIsLiquid))) {
return;
}
}

isMovementPossible = true;
} else if (deltaPosition.x > 0) {
for (let offsetStepY = 0; offsetStepY <= maxStepHeight; offsetStepY++) {
deltaPosition.y = offsetStepY;

for (let i = newDesiredPositionY + offsetStepY; i < newDesiredPositionY + playerHeight + offsetStepY; i++) {
const unit = this.gameWorldState[newDesiredPositionX + playerWidth - 1][i];

if (unit === undefined) {
return;
}

if (unit && (unit.getUnitType().unitIsStatic || (!unit.getUnitType().unitIsGas
&& !unit.getUnitType().unitIsFlame && !unit.getUnitType().unitIsLiquid))) {
break;
}

if (i + 1 >= newDesiredPositionY + playerHeight + offsetStepY) {
isMovementPossible = true;
}
}

if (isMovementPossible) {
break;
}
}
} else if (deltaPosition.x < 0) {
for (let offsetStepY = 0; offsetStepY <= maxStepHeight; offsetStepY++) {
deltaPosition.y = offsetStepY;

for (let i = newDesiredPositionY + offsetStepY; i < newDesiredPositionY + playerHeight + offsetStepY; i++) {
const unit = this.gameWorldState[newDesiredPositionX][i];

if (unit === undefined) {
return;
}

if (unit && (unit.getUnitType().unitIsStatic || (!unit.getUnitType().unitIsGas
&& !unit.getUnitType().unitIsFlame && !unit.getUnitType().unitIsLiquid))) {
break;
}

if (i + 1 >= newDesiredPositionY + playerHeight + offsetStepY) {
isMovementPossible = true;
}
}

if (isMovementPossible) {
break;
}
}
}

if (isMovementPossible) {
this.playersEngine.addPlayerDeltaPosition(0, deltaPosition);
}
}

extractFrame(frameWidth: number, frameHeight: number, framePositionX: number, framePositionY: number) {
this.eventsStack.push(...this.ui.collectActions());

Expand Down Expand Up @@ -370,6 +506,7 @@ export class Engine {
unitState: IUnitState | null,
) => this.createUnit(unitType, unitVector, unitState),
);
this.pushPlayerMoveEvent('down');
}
return this.extractFrame(frameWidth, frameHeight, framePositionX, framePositionY);
}
Expand Down

0 comments on commit 18d5b57

Please sign in to comment.