diff options
| -rw-r--r-- | game.js | 62 |
1 files changed, 59 insertions, 3 deletions
@@ -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() { |