FIXED AND WORKING... BACKUP IF IT GOES WRONG
This commit is contained in:
@@ -1,4 +1,28 @@
|
||||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Socket } from 'ngx-socket-io';
|
||||
|
||||
import { Position } from '../../../../Kawaii-Jumper-server/src/position';
|
||||
import {
|
||||
PlayerDTO,
|
||||
PlayerDTOList,
|
||||
PlayerList,
|
||||
StringNumber,
|
||||
StringVector,
|
||||
Vector,
|
||||
} from './types.dto';
|
||||
|
||||
import { MapTile } from '../../../../Kawaii-Jumper-server/src/mapTile';
|
||||
import { getXFromAngle } from './getXFromAngle';
|
||||
import { getAngleBetweenTwoPoints } from './getAngleBetweenTwoPoints';
|
||||
import { getYFromAngle } from './getYFromAngle';
|
||||
import { applyGravity } from './applyGravity';
|
||||
import { IsIntersecting } from './isIntersecting';
|
||||
import { drawMap } from './drawMap';
|
||||
|
||||
import { Globals } from './globals';
|
||||
import { Players } from './players';
|
||||
import { MySocket } from './mySocket';
|
||||
import { DeltaTime } from './deltaTime';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
@@ -6,50 +30,505 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
styleUrls: ['home.page.scss'],
|
||||
})
|
||||
export class HomePage implements OnInit {
|
||||
globals: Globals;
|
||||
players: Players;
|
||||
mySocket: MySocket;
|
||||
deltaTime: DeltaTime;
|
||||
|
||||
canvas: HTMLCanvasElement;
|
||||
context: CanvasRenderingContext2D;
|
||||
myLastPosition: Position = { x: 0, y: 0 };
|
||||
|
||||
pageHeight = window.innerHeight;
|
||||
pageWidth = window.innerWidth;
|
||||
jumpPower = Date.now();
|
||||
|
||||
constructor() {
|
||||
lastPointerPosition: Position = { x: 0, y: 0 };
|
||||
|
||||
keysDown: { [key: number]: boolean } = {};
|
||||
|
||||
mapBuilder = false;
|
||||
|
||||
builtMap: MapTile[] = [];
|
||||
|
||||
constructor(private socket: Socket) {
|
||||
this.globals = Globals.getInstance();
|
||||
this.players = Players.getInstance();
|
||||
this.deltaTime = DeltaTime.getInstance();
|
||||
this.globals.socket = socket;
|
||||
this.mySocket = MySocket.getInstance();
|
||||
this.globals.pageHeight = window.innerHeight;
|
||||
this.globals.pageWidth = window.innerWidth;
|
||||
|
||||
this.setupSocketListeners();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.canvas = document.getElementById('game') as HTMLCanvasElement;
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.scaleScreen();
|
||||
this.globals.setupCanvas();
|
||||
this.setListeners();
|
||||
this.gameLoop();
|
||||
}
|
||||
|
||||
gameLoop() {
|
||||
|
||||
this.drawPlayer();
|
||||
|
||||
requestAnimationFrame(() => {this.gameLoop();});
|
||||
setupSocketListeners() {
|
||||
this.mySocket.onId((id: string) => (this.globals.socketId = id));
|
||||
this.mySocket.onMap((map: MapTile[]) => (this.globals.map = map));
|
||||
this.mySocket.onPlayerConnected((players: PlayerDTOList) =>
|
||||
this.players.addMultiplaPlayers(players),
|
||||
);
|
||||
this.mySocket.onNewPlayerConnected((player: PlayerDTO) =>
|
||||
this.players.addPlayer(player),
|
||||
);
|
||||
this.mySocket.onPlayerDisconnected((id: string) =>
|
||||
this.players.removePlayer(id),
|
||||
);
|
||||
this.mySocket.onUpdatedPlayerColor((playersColor: StringNumber) =>
|
||||
this.players.updatePlayerColor(playersColor),
|
||||
);
|
||||
this.mySocket.onUpdatedPlayerPosition((playersPosition: StringVector) =>
|
||||
this.players.updatePlayerPosition(playersPosition),
|
||||
);
|
||||
this.mySocket.onUpdatedPlayerDirection((playersDirection: StringNumber) =>
|
||||
this.players.updatePlayerDirection(playersDirection),
|
||||
);
|
||||
}
|
||||
|
||||
drawPlayer() {
|
||||
this.context.fillStyle = 'white';
|
||||
this.context.fillRect(50, 50, 50, 50);
|
||||
getJumpPower(): number {
|
||||
let power = Date.now() - this.jumpPower;
|
||||
return Math.abs(getXFromAngle(power / 1000) * 1.4);
|
||||
}
|
||||
|
||||
|
||||
setCanvasSize(w: number, h: number) {
|
||||
this.canvas.style.height = h + 'px';
|
||||
this.canvas.style.width = w + 'px';
|
||||
this.canvas.height = h;
|
||||
this.canvas.width = w;
|
||||
getJumpDirection(x: number, y: number) {
|
||||
return getAngleBetweenTwoPoints(
|
||||
{
|
||||
x:
|
||||
this.players.getMyself().getPosition().x +
|
||||
this.globals.playerSize.x / 2,
|
||||
y:
|
||||
this.players.getMyself().getPosition().y +
|
||||
this.globals.playerSize.y / 2,
|
||||
},
|
||||
{
|
||||
x: x * this.globals.canvasScale,
|
||||
y: y * this.globals.canvasScale,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
scaleScreen() {
|
||||
const scaleX = this.pageWidth / 9;
|
||||
const scaleY = this.pageHeight / 16;
|
||||
if (scaleX > scaleY) { // width is longer, calculate based on height
|
||||
return this.setCanvasSize(this.pageHeight / 16 * 9, this.pageHeight);
|
||||
clickEndListener($event): Position {
|
||||
console.log('click');
|
||||
if (!this.players.getMyself()) return;
|
||||
console.log('I found myself');
|
||||
if (!this.players.getMyself().isGrounded()) return;
|
||||
console.log('I am grounded');
|
||||
|
||||
this.players.getMyself().swapColor();
|
||||
this.socket.emit('updatedColor', this.players.getMyself().getColor());
|
||||
this.players.getMyself().setGrounded(false);
|
||||
const angle = this.getJumpDirection($event.offsetX, $event.offsetY);
|
||||
this.players.getMyself().jump(angle, this.getJumpPower());
|
||||
|
||||
this.socket.emit(
|
||||
'updatedDirection',
|
||||
this.players.getMyself().getDirection(),
|
||||
);
|
||||
this.globals.sounds[0].play();
|
||||
return this.players.getMyself().getMovingVelocity();
|
||||
}
|
||||
|
||||
mapClickListenerEnd($event) {
|
||||
this.builtMap.push({
|
||||
color: 0,
|
||||
x: $event.offsetX * this.globals.canvasScale,
|
||||
y: $event.offsetY * this.globals.canvasScale,
|
||||
w: 130,
|
||||
h: 30,
|
||||
});
|
||||
console.log(this.builtMap);
|
||||
}
|
||||
|
||||
moveListener($event): void {
|
||||
if (!this.globals.socketId) return;
|
||||
this.lastPointerPosition = {
|
||||
x: $event.offsetX * this.globals.canvasScale,
|
||||
y: $event.offsetY * this.globals.canvasScale,
|
||||
};
|
||||
}
|
||||
|
||||
setListeners() {
|
||||
window.addEventListener('keydown', (e) => this.keyListener(e, true));
|
||||
window.addEventListener('keyup', (e) => this.keyListener(e, false));
|
||||
window.addEventListener('mouseup', (e) => this.mapBuilder ? this.mapClickListenerEnd(e) : this.clickEndListener(e));
|
||||
window.addEventListener('touchend', (e) => this.clickEndListener(e));
|
||||
window.addEventListener('mousemove', (e) => this.moveListener(e));
|
||||
}
|
||||
|
||||
keyListener($event, state) {
|
||||
this.keysDown[$event.keyCode] = state;
|
||||
}
|
||||
|
||||
detectCollisions() {
|
||||
const player = this.players.getMyself();
|
||||
for (let block of this.globals.map) {
|
||||
if (block.color !== this.players.getMyself().getColor()) continue;
|
||||
|
||||
const playerWidth = this.globals.playerSize.x;
|
||||
const playerHeight = this.globals.playerSize.y;
|
||||
const myPosition = player.getPosition();
|
||||
|
||||
const playerTopLeft: Position = myPosition;
|
||||
const playerTopRight: Position = {
|
||||
x: myPosition.x + playerWidth,
|
||||
y: myPosition.y,
|
||||
};
|
||||
const playerBottomLeft: Position = {
|
||||
x: myPosition.x,
|
||||
y: myPosition.y + playerHeight,
|
||||
};
|
||||
const playerBottomRight: Position = {
|
||||
x: myPosition.x + playerWidth,
|
||||
y: myPosition.y + playerHeight,
|
||||
};
|
||||
|
||||
const blockTopLeft: Position = { x: block.x, y: block.y };
|
||||
const blockTopRight: Position = { x: block.x + block.w, y: block.y };
|
||||
const blockBottomLeft: Position = { x: block.x, y: block.y + block.h };
|
||||
const blockBottomRight: Position = {
|
||||
x: block.x + block.w,
|
||||
y: block.y + block.h,
|
||||
};
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopRight,
|
||||
playerBottomRight,
|
||||
blockTopLeft,
|
||||
blockTopRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerBottomLeft,
|
||||
playerBottomRight,
|
||||
blockTopLeft,
|
||||
blockBottomLeft,
|
||||
)
|
||||
) {
|
||||
const dx = this.getDistanceX(playerBottomRight, blockTopLeft);
|
||||
const dy = this.getDistanceY(playerBottomRight, blockTopLeft);
|
||||
console.log('collision on top left corner of platform');
|
||||
|
||||
return dx < dy
|
||||
? this.players.getMyself().touchRight(blockTopLeft.x)
|
||||
: this.players.getMyself().touchBottom(blockTopLeft.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopRight,
|
||||
playerBottomRight,
|
||||
blockBottomLeft,
|
||||
blockBottomRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerTopRight,
|
||||
blockTopLeft,
|
||||
blockBottomLeft,
|
||||
)
|
||||
) {
|
||||
const dx = this.getDistanceX(playerTopRight, blockBottomLeft);
|
||||
const dy = this.getDistanceY(playerTopRight, blockBottomLeft);
|
||||
console.log('collision on bottom left corner of platform');
|
||||
|
||||
return dx < dy
|
||||
? this.players.getMyself().touchRight(blockBottomLeft.x)
|
||||
: this.players.getMyself().touchTop(blockBottomLeft.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerBottomLeft,
|
||||
blockTopLeft,
|
||||
blockTopRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerBottomLeft,
|
||||
playerBottomRight,
|
||||
blockTopRight,
|
||||
blockBottomRight,
|
||||
)
|
||||
) {
|
||||
const dx = this.getDistanceX(playerBottomLeft, blockTopRight);
|
||||
const dy = this.getDistanceY(playerBottomLeft, blockTopRight);
|
||||
console.log('collision on top right corner of platform');
|
||||
|
||||
return dx < dy
|
||||
? this.players.getMyself().touchLeft(blockTopRight.x)
|
||||
: this.players.getMyself().touchBottom(blockTopRight.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerBottomLeft,
|
||||
blockBottomLeft,
|
||||
blockBottomRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerTopRight,
|
||||
blockTopRight,
|
||||
blockBottomRight,
|
||||
)
|
||||
) {
|
||||
const dx = this.getDistanceX(playerTopLeft, blockBottomRight);
|
||||
const dy = this.getDistanceY(playerTopLeft, blockBottomRight);
|
||||
console.log('collision on bottom right corner of platform');
|
||||
|
||||
return dx < dy
|
||||
? this.players.getMyself().touchLeft(blockBottomRight.x)
|
||||
: this.players.getMyself().touchTop(blockBottomRight.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerTopRight,
|
||||
blockTopLeft,
|
||||
blockBottomLeft,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerBottomLeft,
|
||||
playerBottomRight,
|
||||
blockTopLeft,
|
||||
blockBottomLeft,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on left side of platform (platform bigger than player)',
|
||||
);
|
||||
return this.players.getMyself().touchRight(blockBottomLeft.x);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerTopRight,
|
||||
blockTopRight,
|
||||
blockBottomRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerBottomLeft,
|
||||
playerBottomRight,
|
||||
blockTopRight,
|
||||
blockBottomRight,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on right side of platform (platform bigger than player)',
|
||||
);
|
||||
return this.players.getMyself().touchLeft(blockBottomRight.x);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerBottomLeft,
|
||||
blockBottomLeft,
|
||||
blockBottomRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerTopRight,
|
||||
playerBottomRight,
|
||||
blockBottomLeft,
|
||||
blockBottomRight,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on bottom side of platform (platform bigger than player)',
|
||||
);
|
||||
return this.players.getMyself().touchTop(blockBottomLeft.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerBottomLeft,
|
||||
blockTopLeft,
|
||||
blockTopRight,
|
||||
) &&
|
||||
IsIntersecting(
|
||||
playerTopRight,
|
||||
playerBottomRight,
|
||||
blockTopLeft,
|
||||
blockTopRight,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on top side of platform (platform bigger than player)',
|
||||
);
|
||||
return this.players.getMyself().touchBottom(blockTopLeft.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerBottomLeft,
|
||||
blockTopLeft,
|
||||
blockTopRight,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on right side of platform (platform smaller than player)',
|
||||
);
|
||||
return this.players.getMyself().touchLeft(blockTopRight.x);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopRight,
|
||||
playerBottomRight,
|
||||
blockTopLeft,
|
||||
blockTopRight,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on left side of platform (platform smaller than player)',
|
||||
);
|
||||
return this.players.getMyself().touchRight(blockTopLeft.x);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerTopLeft,
|
||||
playerTopRight,
|
||||
blockTopLeft,
|
||||
blockBottomLeft,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on bottom side of platform (platform smaller than player)',
|
||||
);
|
||||
return this.players.getMyself().touchTop(blockBottomLeft.y);
|
||||
}
|
||||
|
||||
if (
|
||||
IsIntersecting(
|
||||
playerBottomLeft,
|
||||
playerBottomRight,
|
||||
blockTopLeft,
|
||||
blockBottomLeft,
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
'collision on top side of platform (platform smaller than player)',
|
||||
);
|
||||
return this.players.getMyself().touchBottom(blockTopLeft.y);
|
||||
}
|
||||
}
|
||||
|
||||
/* MAP BOUNDS */
|
||||
if (
|
||||
this.players.getMyself().getPosition().y >
|
||||
this.globals.height - this.globals.playerSize.y
|
||||
) {
|
||||
this.players.getMyself().touchBottom(this.globals.height);
|
||||
}
|
||||
|
||||
if (this.players.getMyself().getPosition().x < 0) {
|
||||
this.players.getMyself().touchLeft(0);
|
||||
}
|
||||
|
||||
if (
|
||||
this.players.getMyself().getPosition().x >
|
||||
this.globals.width - this.globals.playerSize.x
|
||||
) {
|
||||
this.players.getMyself().touchRight(this.globals.width);
|
||||
}
|
||||
this.setCanvasSize(this.pageWidth, this.pageWidth / 9 * 16) // height is longer, calculate based on width
|
||||
}
|
||||
|
||||
updatePlayerPosition() {
|
||||
if (!this.players.getMyself()) return;
|
||||
this.detectCollisions();
|
||||
if (
|
||||
this.players.getMyself().getPosition().x !== this.myLastPosition.x ||
|
||||
this.players.getMyself().getPosition().y !== this.myLastPosition.y
|
||||
) {
|
||||
this.socket.emit(
|
||||
'updatedPosition',
|
||||
this.players.getMyself().getPosition(),
|
||||
);
|
||||
this.myLastPosition = { ...this.players.getMyself().getPosition() };
|
||||
}
|
||||
}
|
||||
|
||||
getDistanceX(p1: Position, p2: Position): number {
|
||||
return Math.abs(p1.x - p2.x);
|
||||
}
|
||||
|
||||
getDistanceY(p1: Position, p2: Position): number {
|
||||
return Math.abs(p1.y - p2.y);
|
||||
}
|
||||
|
||||
drawPointer() {
|
||||
if (!this.globals.socketId) return;
|
||||
this.globals.context.strokeStyle = '#00ff0066';
|
||||
this.globals.context.lineWidth = 5;
|
||||
const angle = getAngleBetweenTwoPoints(
|
||||
{
|
||||
x:
|
||||
this.players.getMyself().getPosition().x +
|
||||
this.globals.playerSize.x / 2,
|
||||
y:
|
||||
this.players.getMyself().getPosition().y +
|
||||
this.globals.playerSize.y / 2,
|
||||
},
|
||||
this.lastPointerPosition,
|
||||
);
|
||||
this.globals.context.beginPath();
|
||||
this.globals.context.moveTo(
|
||||
this.players.getMyself().getPosition().x + this.globals.playerSize.x / 2,
|
||||
this.players.getMyself().getPosition().y + this.globals.playerSize.y / 2,
|
||||
);
|
||||
this.globals.context.lineTo(
|
||||
this.players.getMyself().getPosition().x +
|
||||
this.globals.playerSize.x / 2 +
|
||||
getXFromAngle(angle) * this.getJumpPower() * 50,
|
||||
this.players.getMyself().getPosition().y +
|
||||
this.globals.playerSize.y / 2 +
|
||||
getYFromAngle(angle) * this.getJumpPower() * 50,
|
||||
);
|
||||
this.globals.context.stroke();
|
||||
}
|
||||
|
||||
gameLoop() {
|
||||
this.globals.context.fillStyle = 'gray';
|
||||
this.globals.context.drawImage(
|
||||
this.globals.backgroudnImage,
|
||||
0,
|
||||
0,
|
||||
this.globals.width,
|
||||
this.globals.height,
|
||||
);
|
||||
|
||||
drawMap(
|
||||
this.globals.map,
|
||||
this.globals.context,
|
||||
this.globals.platformImages,
|
||||
);
|
||||
if (this.mapBuilder) {
|
||||
drawMap(
|
||||
this.builtMap,
|
||||
this.globals.context,
|
||||
this.globals.platformImages,
|
||||
);
|
||||
}
|
||||
|
||||
this.deltaTime.updateDeltaTime();
|
||||
|
||||
this.players.tick();
|
||||
this.players.draw();
|
||||
|
||||
this.updatePlayerPosition();
|
||||
this.drawPointer();
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
this.gameLoop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user