local pong done, start multiplayer implementation
This commit is contained in:
LuckyLaszlo
@@ -1,37 +1,38 @@
|
||||
|
||||
import {GameArea} from "./class/GameArea.js";
|
||||
import {Vector, VectorInteger} from "./class/Vector.js";
|
||||
import {Rectangle, MovingRectangle, Player, Ball, Line} from "./class/Rectangle.js";
|
||||
import {TextElem, TextNumericValue} from "./class/Text.js";
|
||||
import * as d from "./draw.js";
|
||||
import {gameLoop} from "./gameLoop.js"
|
||||
|
||||
/* Keys
|
||||
Player 1: W/S
|
||||
Player 2: Up/Down
|
||||
Grid On-Off: G
|
||||
*/
|
||||
|
||||
import {Vector, VectorInteger, Rectangle, MovingRectangle, Player, Ball, TextElem, TextNumericValue, Line} from "./class.js";
|
||||
// @ts-check
|
||||
export let pong: GameArea;
|
||||
|
||||
let gridDisplay = false;
|
||||
let ballInPlay = true;
|
||||
export let wall_top: Rectangle;
|
||||
export let wall_bottom: Rectangle;
|
||||
export let player1: Player;
|
||||
export let player2: Player;
|
||||
export let ball: Ball;
|
||||
export let score1: TextNumericValue;
|
||||
export let score2: TextNumericValue;
|
||||
export let midLine: Line;
|
||||
|
||||
let pong: gameArea;
|
||||
|
||||
let wall_top: Rectangle;
|
||||
let wall_bottom: Rectangle;
|
||||
let player1: Player;
|
||||
let player2: Player;
|
||||
let ball: Ball;
|
||||
let score1: TextNumericValue;
|
||||
let score2: TextNumericValue;
|
||||
let midLine: Line;
|
||||
|
||||
let w_grid_mid: Rectangle;
|
||||
let w_grid_u1: Rectangle;
|
||||
let w_grid_d1: Rectangle;
|
||||
let h_grid_mid: Rectangle;
|
||||
let h_grid_u1: Rectangle;
|
||||
let h_grid_d1: Rectangle;
|
||||
export let w_grid_mid: Rectangle;
|
||||
export let w_grid_u1: Rectangle;
|
||||
export let w_grid_d1: Rectangle;
|
||||
export let h_grid_mid: Rectangle;
|
||||
export let h_grid_u1: Rectangle;
|
||||
export let h_grid_d1: Rectangle;
|
||||
|
||||
function startGame()
|
||||
{
|
||||
pong = new gameArea();
|
||||
pong = new GameArea();
|
||||
|
||||
// Const
|
||||
const w = pong.canvas.width;
|
||||
@@ -90,187 +91,16 @@ function startGame()
|
||||
|
||||
// Start
|
||||
score1.update(); // first Text draw init the custom font (graphic leftover ortherwise) (a better solution ?)
|
||||
drawInit();
|
||||
pong.start();
|
||||
d.drawInit();
|
||||
window.addEventListener('keydown', function (e) {
|
||||
pong.addKey(e.key);
|
||||
});
|
||||
window.addEventListener('keyup', function (e) {
|
||||
pong.deleteKey(e.key);
|
||||
});
|
||||
pong.interval = window.setInterval(gameLoop, 20);
|
||||
}
|
||||
|
||||
class gameArea {
|
||||
keys: string[];
|
||||
interval: number = 0;
|
||||
canvas: HTMLCanvasElement;
|
||||
ctx: CanvasRenderingContext2D;
|
||||
constructor() {
|
||||
this.keys = [];
|
||||
// this.canvas = {};
|
||||
this.canvas = document.createElement("canvas");
|
||||
// this.ctx = {};
|
||||
this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
/* ratio 5/3 (1.66) */
|
||||
const ratio = 1.66666;
|
||||
this.canvas.width = 1500;
|
||||
this.canvas.height = this.canvas.width / ratio;
|
||||
let container = document.getElementById("canvas-container");
|
||||
if (container)
|
||||
container.insertBefore(this.canvas, container.childNodes[0]);
|
||||
}
|
||||
start() {
|
||||
this.interval = window.setInterval(gameLoop, 20);
|
||||
window.addEventListener('keydown', function (e) { pong.addKey(e.key); });
|
||||
window.addEventListener('keyup', function (e) { pong.deleteKey(e.key); });
|
||||
}
|
||||
addKey(key: string) {
|
||||
key = key.toLowerCase();
|
||||
var i = pong.keys.indexOf(key);
|
||||
if (i == -1)
|
||||
pong.keys.push(key);
|
||||
}
|
||||
deleteKey(key: string) {
|
||||
key = key.toLowerCase();
|
||||
var i = pong.keys.indexOf(key);
|
||||
if (i != -1)
|
||||
pong.keys.splice(i, 1);
|
||||
}
|
||||
clear() {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
stop() {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
|
||||
function gameLoop()
|
||||
{
|
||||
/*
|
||||
// I try to clear only what need to be update.
|
||||
// Will revert to clear() all if not satisfactory.
|
||||
pong.clear();
|
||||
*/
|
||||
handleInput();
|
||||
|
||||
if (ballInPlay)
|
||||
{
|
||||
ball.moveAndBounce([wall_top, wall_bottom, player1, player2]);
|
||||
if (ball.pos.x > pong.canvas.width) {
|
||||
ballInPlay = false;
|
||||
score1.clear();
|
||||
++score1.value;
|
||||
setTimeout(newRound, 1500);
|
||||
}
|
||||
else if (ball.pos.x < 0 - ball.width) {
|
||||
ballInPlay = false;
|
||||
score2.clear();
|
||||
++score2.value;
|
||||
setTimeout(newRound, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
|
||||
function newRound()
|
||||
{
|
||||
// https://fr.wikipedia.org/wiki/Tennis_de_table#Nombre_de_manches
|
||||
if (score1.value >= 11
|
||||
|| score2.value >= 11)
|
||||
{
|
||||
if (Math.abs(score1.value - score2.value) >= 2)
|
||||
{
|
||||
if (score1.value > score2.value) {
|
||||
alert("Player 1 WIN");
|
||||
}
|
||||
else {
|
||||
alert("Player 2 WIN");
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
ball.pos.x = pong.canvas.width/2;
|
||||
ball.pos.y = (pong.canvas.height * 0.1) + Math.floor(random() * (pong.canvas.height * 0.8));
|
||||
ball.speed = ball.baseSpeed;
|
||||
ballInPlay = true;
|
||||
}
|
||||
|
||||
function random(min: number = 0, max: number = 1) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function draw()
|
||||
{
|
||||
if (gridDisplay) {
|
||||
drawGrid();
|
||||
}
|
||||
midLine.update();
|
||||
score1.update();
|
||||
score2.update();
|
||||
}
|
||||
|
||||
function drawStatic()
|
||||
{
|
||||
wall_top.update();
|
||||
wall_bottom.update();
|
||||
midLine.update();
|
||||
}
|
||||
|
||||
function drawInit()
|
||||
{
|
||||
pong.clear();
|
||||
drawStatic();
|
||||
player1.update();
|
||||
player2.update();
|
||||
}
|
||||
|
||||
function drawGrid()
|
||||
{
|
||||
w_grid_mid.update();
|
||||
w_grid_u1.update();
|
||||
w_grid_d1.update();
|
||||
|
||||
h_grid_mid.update();
|
||||
h_grid_u1.update();
|
||||
h_grid_d1.update();
|
||||
}
|
||||
|
||||
function handleInput()
|
||||
{
|
||||
var keys = pong.keys;
|
||||
if (keys.length == 0)
|
||||
return;
|
||||
|
||||
if (keys.indexOf("g") != -1)
|
||||
{
|
||||
if (gridDisplay)
|
||||
{
|
||||
pong.clear();
|
||||
drawStatic();
|
||||
}
|
||||
gridDisplay = !gridDisplay;
|
||||
pong.deleteKey("g");
|
||||
}
|
||||
playerMove(keys);
|
||||
}
|
||||
|
||||
function playerMove(keys: string[])
|
||||
{
|
||||
player1.dir.y = 0;
|
||||
if (keys.indexOf("w") != -1) {
|
||||
player1.dir.y += -1;
|
||||
}
|
||||
if (keys.indexOf("s") != -1) {
|
||||
player1.dir.y += 1;
|
||||
}
|
||||
player1.moveAndCollide([wall_top, wall_bottom]);
|
||||
|
||||
player2.dir.y = 0;
|
||||
if (keys.indexOf("ArrowUp".toLowerCase()) != -1) {
|
||||
player2.dir.y += -1;
|
||||
}
|
||||
if (keys.indexOf("ArrowDown".toLowerCase()) != -1) {
|
||||
player2.dir.y += 1;
|
||||
}
|
||||
player2.moveAndCollide([wall_top, wall_bottom]);
|
||||
}
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
Reference in New Issue
Block a user