aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--game.js62
1 files changed, 59 insertions, 3 deletions
diff --git a/game.js b/game.js
index 3bbfe30..99a6fb1 100644
--- a/game.js
+++ b/game.js
@@ -4,12 +4,15 @@ const boardRatio = 1.5;
const ballRadius = 0.01, padWidth = 0.01, padHeight = 0.15, padX = 0.01;
const padBaseSpeed = 0.8;
+const ENABLE_DEBUG_MODE = true;
+
let gameId;
let cvs, ctx, cvsW, cvsH, bdW, bdH, bdltX, bdltY;
let socket;
let playing = false, flip = false;
let ballX, ballY, ballVX, ballVY;
let padPos, padVel, pad2Pos, pad2Vel;
+let debugVectors = []; // only used if ENABLE_DEBUG_MODE
function redraw() {
ctx.fillStyle = "#000000";
@@ -43,6 +46,27 @@ function redrawFast() {
ctx.rect(bdltX + bdW * (1 - padX - padWidth), calcRightPadY(), bdW * padWidth, bdH * padHeight);
ctx.fill();
}
+
+ if (ENABLE_DEBUG_MODE) {
+ for (const obj of debugVectors) {
+ ctx.strokeStyle = obj.color;
+ ctx.lineWidth = 3;
+ ctx.beginPath();
+ ctx.moveTo(calcFlippedX(obj.from[0]), calcY(obj.from[1]));
+ ctx.lineTo(calcFlippedX(obj.from[0] + obj.dir[0]), calcY(obj.from[1] + obj.dir[1]));
+ ctx.stroke();
+
+ ctx.fillStyle = obj.color;
+ ctx.beginPath();
+ ctx.arc(calcFlippedX(obj.from[0] + obj.dir[0]), calcY(obj.from[1] + obj.dir[1]), 5, 0, 2 * Math.PI);
+ ctx.fill();
+
+ ctx.beginPath();
+ ctx.font = "20px sans-serif";
+ ctx.fillText(obj.text, calcFlippedX(obj.from[0]), calcY(obj.from[1]));
+ ctx.fill();
+ }
+ }
}
function undrawElements() {
@@ -261,7 +285,7 @@ function advancePhysics(deltaT) {
ballVY = -ballVY;
}
- function bounceLeft(x, y, vx, vy, pady, padvy) {
+ function bounceLeft(x, y, vx, vy, pady, padvy, xisflipped) {
if (x + vx * deltaT > padX + padWidth + ballRadius) return null;
const t = (padX + padWidth + ballRadius - x) / vx;
@@ -278,10 +302,33 @@ function advancePhysics(deltaT) {
const newx = x + vx * t + newvx * (deltaT - t);
const newy = y + vy * t + newvy * (deltaT - t);
+ if (ENABLE_DEBUG_MODE) {
+ const collisionPoint = [x + t * vx, y + t * vy];
+ if (xisflipped) collisionPoint[0] = 1 - collisionPoint[0];
+ debugVectors.push({
+ color: "green",
+ from: collisionPoint,
+ dir: [(xisflipped ? -1 : 1) * vx * 0.3, vy * 0.3],
+ text: "",
+ });
+ debugVectors.push({
+ color: "#f00",
+ from: collisionPoint,
+ dir: [(xisflipped ? -1 : 1) * -vx * 0.3, vy * 0.3],
+ text: "",
+ });
+ debugVectors.push({
+ color: "#44f",
+ from: collisionPoint,
+ dir: [(xisflipped ? -1 : 1) * newvx * 0.3, newvy * 0.3],
+ text: Math.round(frac * 100) / 100 + "",
+ });
+ }
+
return [newx, newy, newvx, newvy];
}
- let bounce = bounceLeft(ballX, ballY, ballVX, ballVY, padPos, padVel);
+ let bounce = bounceLeft(ballX, ballY, ballVX, ballVY, padPos, padVel, false);
if (bounce != null) {
newballX = bounce[0];
newballY = bounce[1];
@@ -290,7 +337,7 @@ function advancePhysics(deltaT) {
ret.bounce = true;
}
- bounce = bounceLeft(1 - ballX, ballY, -ballVX, ballVY, pad2Pos, pad2Vel);
+ bounce = bounceLeft(1 - ballX, ballY, -ballVX, ballVY, pad2Pos, pad2Vel, true);
if (bounce != null) {
newballX = 1 - bounce[0];
newballY = bounce[1];
@@ -365,6 +412,15 @@ function setupBindings() {
up = down = false;
padUpdate();
});
+
+ if (ENABLE_DEBUG_MODE) {
+ window.addEventListener("keypress", function(ev) {
+ if (ev.key == "p") {
+ if (loopPhysics) stopPhysicsLoop();
+ else startPhysicsLoop();
+ }
+ });
+ }
}
window.addEventListener("load", function() {