reafactoring
This commit is contained in:
@@ -1 +1,7 @@
|
|||||||
|
|
||||||
|
import {w} from "../shared_js/constants.js"
|
||||||
export * from "../shared_js/constants.js"
|
export * from "../shared_js/constants.js"
|
||||||
|
|
||||||
|
export const midLineSize = Math.floor(w/150);
|
||||||
|
export const scoreSize = Math.floor(w/16);
|
||||||
|
export const gridSize = Math.floor(w/500);
|
||||||
|
|||||||
@@ -17,43 +17,32 @@ export let h_grid_d1: Rectangle;
|
|||||||
|
|
||||||
function initGameClientOnly(ctx: CanvasRenderingContext2D)
|
function initGameClientOnly(ctx: CanvasRenderingContext2D)
|
||||||
{
|
{
|
||||||
// Const (could maybe be in constants.ts ?)
|
|
||||||
const w = c.CanvasWidth;
|
|
||||||
const h = c.CanvasWidth / c.CanvasRatio;
|
|
||||||
const w_mid = Math.floor(w/2);
|
|
||||||
const h_mid = Math.floor(h/2);
|
|
||||||
const midLineSize = Math.floor(w/150);
|
|
||||||
const scoreSize = Math.floor(w/16);
|
|
||||||
const gridSize = Math.floor(w/500);
|
|
||||||
|
|
||||||
const wallSize = Math.floor(w/100);
|
|
||||||
|
|
||||||
let pos = new VectorInteger;
|
let pos = new VectorInteger;
|
||||||
// Scores
|
// Scores
|
||||||
pos.assign(w_mid-scoreSize*1.6, scoreSize*1.5);
|
pos.assign(c.w_mid-c.scoreSize*1.6, c.scoreSize*1.5);
|
||||||
score1 = new TextNumericValue(ctx, pos, "white", scoreSize);
|
score1 = new TextNumericValue(ctx, pos, "white", c.scoreSize);
|
||||||
pos.assign(w_mid+scoreSize*1.1, scoreSize*1.5);
|
pos.assign(c.w_mid+c.scoreSize*1.1, c.scoreSize*1.5);
|
||||||
score2 = new TextNumericValue(ctx, pos, "white", scoreSize);
|
score2 = new TextNumericValue(ctx, pos, "white", c.scoreSize);
|
||||||
score1.value = 0;
|
score1.value = 0;
|
||||||
score2.value = 0;
|
score2.value = 0;
|
||||||
|
|
||||||
// Dotted Midline
|
// Dotted Midline
|
||||||
pos.assign(w_mid-midLineSize/2, 0+wallSize);
|
pos.assign(c.w_mid-c.midLineSize/2, 0+c.wallSize);
|
||||||
midLine = new Line(ctx, pos, "white", midLineSize, h-wallSize*2, 15);
|
midLine = new Line(ctx, pos, "white", c.midLineSize, c.h-c.wallSize*2, 15);
|
||||||
|
|
||||||
// Grid
|
// Grid
|
||||||
pos.assign(0, h_mid);
|
pos.assign(0, c.h_mid);
|
||||||
w_grid_mid = new Rectangle(ctx, pos, "darkgreen", w, gridSize);
|
w_grid_mid = new Rectangle(ctx, pos, "darkgreen", c.w, c.gridSize);
|
||||||
pos.assign(0, h/4);
|
pos.assign(0, c.h/4);
|
||||||
w_grid_u1 = new Rectangle(ctx, pos, "darkgreen", w, gridSize);
|
w_grid_u1 = new Rectangle(ctx, pos, "darkgreen", c.w, c.gridSize);
|
||||||
pos.assign(0, h-h/4);
|
pos.assign(0, c.h-c.h/4);
|
||||||
w_grid_d1 = new Rectangle(ctx, pos, "darkgreen", w, gridSize);
|
w_grid_d1 = new Rectangle(ctx, pos, "darkgreen", c.w, c.gridSize);
|
||||||
pos.assign(w_mid, 0);
|
pos.assign(c.w_mid, 0);
|
||||||
h_grid_mid = new Rectangle(ctx, pos, "darkgreen", gridSize, h);
|
h_grid_mid = new Rectangle(ctx, pos, "darkgreen", c.gridSize, c.h);
|
||||||
pos.assign(w/4, 0);
|
pos.assign(c.w/4, 0);
|
||||||
h_grid_u1 = new Rectangle(ctx, pos, "darkgreen", gridSize, h);
|
h_grid_u1 = new Rectangle(ctx, pos, "darkgreen", c.gridSize, c.h);
|
||||||
pos.assign(w-w/4, 0);
|
pos.assign(c.w-c.w/4, 0);
|
||||||
h_grid_d1 = new Rectangle(ctx, pos, "darkgreen", gridSize, h);
|
h_grid_d1 = new Rectangle(ctx, pos, "darkgreen", c.gridSize, c.h);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {initGameClientOnly}
|
export {initGameClientOnly}
|
||||||
|
|||||||
@@ -155,3 +155,18 @@ class Line extends Rectangle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export {Rectangle, MovingRectangle, Player, Ball, Line}
|
export {Rectangle, MovingRectangle, Player, Ball, Line}
|
||||||
|
|
||||||
|
// How to handle const export in initGame ?
|
||||||
|
// example for class Rectangle
|
||||||
|
/* constructor(ctx?: CanvasRenderingContext2D, pos?: VectorInteger, color?: string, width?: number, height?: number) {
|
||||||
|
if (ctx && pos && color && width && height)
|
||||||
|
this.init(ctx, pos, color, width, height);
|
||||||
|
}
|
||||||
|
// constructor() {}
|
||||||
|
init(ctx: CanvasRenderingContext2D, pos: VectorInteger, color: string, width: number, height: number) {
|
||||||
|
this.ctx = ctx;
|
||||||
|
this.pos = Object.assign({}, pos);
|
||||||
|
this.color = color;
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
} */
|
||||||
|
|||||||
@@ -1,4 +1,15 @@
|
|||||||
|
|
||||||
export const CanvasWidth = 1500;
|
export const CanvasWidth = 1500;
|
||||||
|
export const CanvasRatio = 1.66666;
|
||||||
/* ratio 5/3 (1.66) */
|
/* ratio 5/3 (1.66) */
|
||||||
export const CanvasRatio = 1.66666;
|
|
||||||
|
export const w = CanvasWidth;
|
||||||
|
export const h = CanvasWidth / CanvasRatio;
|
||||||
|
export const w_mid = Math.floor(w/2);
|
||||||
|
export const h_mid = Math.floor(h/2);
|
||||||
|
export const pw = Math.floor(w/50);
|
||||||
|
export const ph = pw*5;
|
||||||
|
export const ballSize = pw;
|
||||||
|
export const wallSize = Math.floor(w/100);
|
||||||
|
export const playerSpeed = Math.floor(w/1.5); // pixel per second
|
||||||
|
export const ballSpeed = Math.floor(w/1.5); // pixel per second
|
||||||
|
|||||||
@@ -11,32 +11,20 @@ export let ball: Ball;
|
|||||||
|
|
||||||
function initGame(ctx: CanvasRenderingContext2D)
|
function initGame(ctx: CanvasRenderingContext2D)
|
||||||
{
|
{
|
||||||
// Const (could maybe be in constants.ts ?)
|
|
||||||
const w = c.CanvasWidth;
|
|
||||||
const h = c.CanvasWidth / c.CanvasRatio;
|
|
||||||
const w_mid = Math.floor(w/2);
|
|
||||||
const h_mid = Math.floor(h/2);
|
|
||||||
const pw = Math.floor(w/50);
|
|
||||||
const ph = pw*5;
|
|
||||||
const ballSize = pw;
|
|
||||||
const wallSize = Math.floor(w/100);
|
|
||||||
const playerSpeed = Math.floor(w/1.5); // pixel per second
|
|
||||||
const ballSpeed = Math.floor(w/1.5); // pixel per second
|
|
||||||
|
|
||||||
let pos = new VectorInteger;
|
let pos = new VectorInteger;
|
||||||
// Component
|
// Component
|
||||||
pos.assign(0, 0);
|
pos.assign(0, 0);
|
||||||
wall_top = new Rectangle(ctx, pos, "grey", w, wallSize);
|
wall_top = new Rectangle(ctx, pos, "grey", c.w, c.wallSize);
|
||||||
pos.assign(0, h-wallSize);
|
pos.assign(0, c.h-c.wallSize);
|
||||||
wall_bottom = new Rectangle(ctx, pos, "grey", w, wallSize);
|
wall_bottom = new Rectangle(ctx, pos, "grey", c.w, c.wallSize);
|
||||||
|
|
||||||
pos.assign(0+pw, h_mid-ph/2);
|
pos.assign(0+c.pw, c.h_mid-c.ph/2);
|
||||||
player1 = new Player(ctx, pos, "white", pw, ph, playerSpeed);
|
player1 = new Player(ctx, pos, "white", c.pw, c.ph, c.playerSpeed);
|
||||||
pos.assign(w-pw-pw, h_mid-ph/2);
|
pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2);
|
||||||
player2 = new Player(ctx, pos, "white", pw, ph, playerSpeed);
|
player2 = new Player(ctx, pos, "white", c.pw, c.ph, c.playerSpeed);
|
||||||
|
|
||||||
pos.assign(w_mid-ballSize/2, h_mid-ballSize/2);
|
pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2);
|
||||||
ball = new Ball(ctx, pos, "white", ballSize, ballSpeed);
|
ball = new Ball(ctx, pos, "white", c.ballSize, c.ballSpeed);
|
||||||
ball.dir.assign(-0.8, +0.2);
|
ball.dir.assign(-0.8, +0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user