Browse Source

* Removed useless file

* Fixed canvas glitch
master
vvandenb 2 years ago
parent
commit
b88d4cbbe9
  1. 33
      src/components/Pong/Pong.svelte
  2. 52
      src/components/Pong/pong.ts

33
src/components/Pong/Pong.svelte

@ -6,28 +6,22 @@
const FPS = 144;
const SERVER_URL = 'ws://localhost:3001';
const socket: WebSocket = new WebSocket(SERVER_URL);
socket.onopen = () => {
console.log('Connected to game server!');
socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
};
let canvas: HTMLCanvasElement;
let context: CanvasRenderingContext2D;
let socket: WebSocket;
//Get canvas and its context
window.onload = () => {
canvas = document.getElementById('pong_canvas') as HTMLCanvasElement;
const canvas: HTMLCanvasElement = document.getElementById('pong_canvas') as HTMLCanvasElement;
if (canvas) {
context = canvas.getContext('2d') as CanvasRenderingContext2D;
const context: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
if (context) {
setupGame();
setupSocket(canvas, context);
}
}
};
function setupGame() {
function setupSocket(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) {
socket = new WebSocket(SERVER_URL);
const game = new Game(canvas, context);
socket.onmessage = function (e) {
const event_json = JSON.parse(e.data);
const event = event_json.event;
@ -44,21 +38,18 @@
}, 1000 / FPS);
console.log('Game loaded!');
} else {
console.log('Received unknown event from server:');
console.log(event_json);
console.log('Unknown event from server: ' + event);
}
};
socket.onopen = () => {
console.log('Connected to game server!');
socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
};
}
</script>
<div>
<button
on:click={() => {
socket.send(formatWebsocketData(GAME_EVENTS.START_GAME));
}}
>
Start game
</button>
<button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.START_GAME))}>Start game</button>
<br />
<br />
<canvas id="pong_canvas" />

52
src/components/Pong/pong.ts

@ -1,52 +0,0 @@
import { GAME_EVENTS } from './constants';
import { Game } from './Game';
import { formatWebsocketData, Point } from './utils';
const FPS = 144;
const socket: WebSocket = new WebSocket('ws://localhost:3001');
socket.onopen = () => {
console.log('Connected to game server!');
socket.send(formatWebsocketData(GAME_EVENTS.GET_GAME_INFO));
};
let canvas: HTMLCanvasElement;
let context: CanvasRenderingContext2D;
//Get canvas and its context
window.onload = () => {
document.getElementById('start_game_button').addEventListener('click', () => {
socket.send(formatWebsocketData(GAME_EVENTS.START_GAME));
});
canvas = document.getElementById('pong_canvas') as HTMLCanvasElement;
if (canvas) {
context = canvas.getContext('2d') as CanvasRenderingContext2D;
if (context) {
setupGame();
}
}
};
function setupGame() {
const game = new Game(canvas, context);
socket.onmessage = function (e) {
const event_json = JSON.parse(e.data);
const event = event_json.event;
const data = event_json.data;
if (event == GAME_EVENTS.START_GAME) {
game.start(socket);
} else if (event == GAME_EVENTS.GAME_TICK) {
game.update(data);
} else if (event == GAME_EVENTS.GET_GAME_INFO) {
game.setInfo(data);
setInterval(() => {
game.draw();
}, 1000 / FPS);
console.log('Game loaded!');
} else {
console.log('Received unknown event from server:');
console.log(event_json);
}
};
}
Loading…
Cancel
Save