diff options
| author | Tom Smeding <tom@tomsmeding.com> | 2024-02-18 19:39:15 +0100 | 
|---|---|---|
| committer | Tom Smeding <tom@tomsmeding.com> | 2024-02-18 19:39:15 +0100 | 
| commit | 0634bac7339a7a6c1539353a3f391072cd8993e9 (patch) | |
| tree | cf98171c95b1f534d1bb8081518803dcc5aa7c5c | |
| parent | 3ff019e850e628ed87ba80351c5a00fb6663cd1e (diff) | |
| -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() { | 
