summaryrefslogtreecommitdiffstats
path: root/static/pong/pong.js
diff options
context:
space:
mode:
authorRose Hogenson <rosehogenson@posteo.net>2024-10-23 18:11:33 -0700
committerRose Hogenson <rosehogenson@posteo.net>2024-10-23 18:11:33 -0700
commit533853eaa3ffdb3d278ce7730a0012dfbc6b3fd1 (patch)
tree24cf2f559e14035286c42a2c091cded2f2456cc1 /static/pong/pong.js
parentc206dc3f77135ea0fc3a66597567d7d66335141e (diff)
downloadroseh.moe-533853eaa3ffdb3d278ce7730a0012dfbc6b3fd1.tar.zst
Use tabs.
Diffstat (limited to 'static/pong/pong.js')
-rw-r--r--static/pong/pong.js452
1 files changed, 226 insertions, 226 deletions
diff --git a/static/pong/pong.js b/static/pong/pong.js
index b91cb06..b8bdc2d 100644
--- a/static/pong/pong.js
+++ b/static/pong/pong.js
@@ -6,281 +6,281 @@ const canvas = document.getElementById("pong");
const ctx = canvas.getContext("2d");
class Vector2 {
- constructor(x, y) {
- this.x = x;
- this.y = y;
- }
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ }
- add(v) {
- return new Vector2(this.x + v.x, this.y + v.y);
- }
+ add(v) {
+ return new Vector2(this.x + v.x, this.y + v.y);
+ }
}
class Rect {
- constructor(x, y, w, h) {
- this.x = x;
- this.y = y;
- this.w = w;
- this.h = h;
- }
+ constructor(x, y, w, h) {
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ }
- bottom() {
- return this.y + this.h;
- }
+ bottom() {
+ return this.y + this.h;
+ }
- right() {
- return this.x + this.w;
- }
+ right() {
+ return this.x + this.w;
+ }
- intersects(r) {
- return r.x <= this.right() && r.right() >= this.x && r.y <= this.bottom() && r.bottom() >= this.y;
- }
+ intersects(r) {
+ return r.x <= this.right() && r.right() >= this.x && r.y <= this.bottom() && r.bottom() >= this.y;
+ }
- fill() {
- ctx.clearRect(this.x, this.y, this.w, this.h);
- }
+ fill() {
+ ctx.clearRect(this.x, this.y, this.w, this.h);
+ }
}
const digitSegments = [0x77, 0x24, 0x5d, 0x6d, 0x2e, 0x6b, 0x7b, 0x25, 0x7f, 0x6f];
function drawNumber(n, x, y) {
- const width = 60;
- const height = 100;
- const thickness = 10;
- const padding = 20;
+ const width = 60;
+ const height = 100;
+ const thickness = 10;
+ const padding = 20;
- const digits = n.toString();
- for (let i = 0; i < digits.length; i++) {
- const segments = digitSegments[digits[i] - '0'];
- for (let j = 0; j < 7; j++) {
- if ((segments & 1 << j) === 0) {
- continue;
- }
- switch (j) {
- case 0:
- new Rect(x, y, width, thickness).fill();
- break;
- case 1:
- new Rect(x, y, thickness, height / 2).fill();
- break;
- case 2:
- new Rect(x + width - thickness, y, thickness, height / 2).fill();
- break;
- case 3:
- new Rect(x, y + height / 2 - thickness / 2, width, thickness).fill();
- break;
- case 4:
- new Rect(x, y + height / 2, thickness, height / 2).fill();
- break;
- case 5:
- new Rect(x + width - thickness, y + height / 2, thickness, height / 2).fill();
- break;
- case 6:
- new Rect(x, y + height - thickness, width, thickness).fill();
- break;
- }
- }
- x += width + padding;
- }
+ const digits = n.toString();
+ for (let i = 0; i < digits.length; i++) {
+ const segments = digitSegments[digits[i] - '0'];
+ for (let j = 0; j < 7; j++) {
+ if ((segments & 1 << j) === 0) {
+ continue;
+ }
+ switch (j) {
+ case 0:
+ new Rect(x, y, width, thickness).fill();
+ break;
+ case 1:
+ new Rect(x, y, thickness, height / 2).fill();
+ break;
+ case 2:
+ new Rect(x + width - thickness, y, thickness, height / 2).fill();
+ break;
+ case 3:
+ new Rect(x, y + height / 2 - thickness / 2, width, thickness).fill();
+ break;
+ case 4:
+ new Rect(x, y + height / 2, thickness, height / 2).fill();
+ break;
+ case 5:
+ new Rect(x + width - thickness, y + height / 2, thickness, height / 2).fill();
+ break;
+ case 6:
+ new Rect(x, y + height - thickness, width, thickness).fill();
+ break;
+ }
+ }
+ x += width + padding;
+ }
}
class Ball {
- constructor() {
- this.reset('left');
- }
+ constructor() {
+ this.reset('left');
+ }
- bounds() {
- const ballSize = 30;
+ bounds() {
+ const ballSize = 30;
- return new Rect(
- this.pos.x - ballSize / 2,
- this.pos.y - ballSize / 2,
- ballSize,
- ballSize,
- );
- }
+ return new Rect(
+ this.pos.x - ballSize / 2,
+ this.pos.y - ballSize / 2,
+ ballSize,
+ ballSize,
+ );
+ }
- predictIntersection(targetX) {
- if (this.velocity.x <= 0) {
- return null;
- }
- const dist = targetX - this.pos.x;
- const prediction = this.pos.y + this.velocity.y * dist / this.velocity.x;
- if (prediction < 0) {
- const bounces = Math.floor(-prediction / canvas.height);
- if (bounces % 2 === 0) {
- return -prediction - canvas.height * bounces;
- }
- return prediction + canvas.height * (bounces + 1);
- }
- if (prediction > canvas.height) {
- const bounces = Math.floor(prediction / canvas.height);
- if (bounces % 2 === 0) {
- return prediction - canvas.height * bounces;
- }
- return -prediction + canvas.height * (bounces + 1);
- }
- return prediction;
- }
+ predictIntersection(targetX) {
+ if (this.velocity.x <= 0) {
+ return null;
+ }
+ const dist = targetX - this.pos.x;
+ const prediction = this.pos.y + this.velocity.y * dist / this.velocity.x;
+ if (prediction < 0) {
+ const bounces = Math.floor(-prediction / canvas.height);
+ if (bounces % 2 === 0) {
+ return -prediction - canvas.height * bounces;
+ }
+ return prediction + canvas.height * (bounces + 1);
+ }
+ if (prediction > canvas.height) {
+ const bounces = Math.floor(prediction / canvas.height);
+ if (bounces % 2 === 0) {
+ return prediction - canvas.height * bounces;
+ }
+ return -prediction + canvas.height * (bounces + 1);
+ }
+ return prediction;
+ }
- reset(side) {
- this.pos = new Vector2(canvas.width / 2, canvas.height / 2);
- this.velocity = new Vector2(ballSpeed, 0);
- if (side === 'left') {
- this.velocity.x = -this.velocity.x;
- }
- }
+ reset(side) {
+ this.pos = new Vector2(canvas.width / 2, canvas.height / 2);
+ this.velocity = new Vector2(ballSpeed, 0);
+ if (side === 'left') {
+ this.velocity.x = -this.velocity.x;
+ }
+ }
}
class Paddle {
- constructor(side) {
- this.pos = canvas.height / 2;
- this.side = side;
- }
+ constructor(side) {
+ this.pos = canvas.height / 2;
+ this.side = side;
+ }
- bounds() {
- const paddleHeight = 200;
- const thickness = 10;
- const padding = 100;
+ bounds() {
+ const paddleHeight = 200;
+ const thickness = 10;
+ const padding = 100;
- let r = new Rect(
- padding - thickness / 2,
- this.pos - paddleHeight / 2,
- thickness,
- paddleHeight,
- );
- if (this.side === 'right') {
- r.x = canvas.width - padding - thickness / 2;
- }
- return r;
- }
+ let r = new Rect(
+ padding - thickness / 2,
+ this.pos - paddleHeight / 2,
+ thickness,
+ paddleHeight,
+ );
+ if (this.side === 'right') {
+ r.x = canvas.width - padding - thickness / 2;
+ }
+ return r;
+ }
}
function updateCanvasSize() {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
}
const pingAudio = new Audio('/static/pong/ping.mp3');
function ping() {
- pingAudio.pause();
- pingAudio.currentTime = 0;
- pingAudio.play();
+ pingAudio.pause();
+ pingAudio.currentTime = 0;
+ pingAudio.play();
}
function main() {
- updateCanvasSize();
+ updateCanvasSize();
- let playerScore = 0;
- let aiScore = 0;
+ let playerScore = 0;
+ let aiScore = 0;
- const ball = new Ball();
+ const ball = new Ball();
- const paddle1 = new Paddle('left');
- const paddle2 = new Paddle('right');
+ const paddle1 = new Paddle('left');
+ const paddle2 = new Paddle('right');
- const keys = {};
- window.addEventListener('keydown', (e) => keys[e.key] = true);
- window.addEventListener('keyup', (e) => delete keys[e.key]);
- let mousePressed = false;
- let mouseY = 0;
- window.addEventListener('mousedown', () => mousePressed = true);
- window.addEventListener('mouseup', () => mousePressed = false);
- window.addEventListener('mousemove', (e) => mouseY = e.y);
- let touchPressed = false;
- let touchY = 0;
- window.addEventListener('touchstart', (e) => {
- touchPressed = true;
- if (e.changedTouches.length > 0) {
- touchY = e.changedTouches[0].clientY;
- }
- });
- window.addEventListener('touchmove', (e) => {
- touchPressed = true;
- if (e.changedTouches.length > 0) {
- touchY = e.changedTouches[0].clientY;
- }
- });
- window.addEventListener('touchend', () => touchPressed = false);
- window.addEventListener('touchcancel', () => touchPressed = false);
+ const keys = {};
+ window.addEventListener('keydown', (e) => keys[e.key] = true);
+ window.addEventListener('keyup', (e) => delete keys[e.key]);
+ let mousePressed = false;
+ let mouseY = 0;
+ window.addEventListener('mousedown', () => mousePressed = true);
+ window.addEventListener('mouseup', () => mousePressed = false);
+ window.addEventListener('mousemove', (e) => mouseY = e.y);
+ let touchPressed = false;
+ let touchY = 0;
+ window.addEventListener('touchstart', (e) => {
+ touchPressed = true;
+ if (e.changedTouches.length > 0) {
+ touchY = e.changedTouches[0].clientY;
+ }
+ });
+ window.addEventListener('touchmove', (e) => {
+ touchPressed = true;
+ if (e.changedTouches.length > 0) {
+ touchY = e.changedTouches[0].clientY;
+ }
+ });
+ window.addEventListener('touchend', () => touchPressed = false);
+ window.addEventListener('touchcancel', () => touchPressed = false);
- let lastFrameTime = performance.now();
- let accumulator = 0;
+ let lastFrameTime = performance.now();
+ let accumulator = 0;
- function gameLoop() {
- updateCanvasSize();
+ function gameLoop() {
+ updateCanvasSize();
- const now = performance.now();
- const frameTime = now - lastFrameTime;
- lastFrameTime = now;
- accumulator += frameTime;
+ const now = performance.now();
+ const frameTime = now - lastFrameTime;
+ lastFrameTime = now;
+ accumulator += frameTime;
- const simulationSpeed = 1000 / ticksPerSecond;
- for (; accumulator >= simulationSpeed; accumulator -= simulationSpeed) {
- if ((keys["w"] || keys["ArrowUp"] || mousePressed && paddle1.pos >= mouseY + paddleSpeed || touchPressed && paddle1.pos >= touchY + paddleSpeed) && paddle1.bounds().y >= 0) {
- paddle1.pos -= paddleSpeed;
- } else if ((keys["s"] || keys["ArrowDown"] || mousePressed && paddle1.pos <= mouseY - paddleSpeed || touchPressed && paddle1.pos <= touchY - paddleSpeed) && paddle1.bounds().bottom() <= canvas.height) {
- paddle1.pos += paddleSpeed;
- }
+ const simulationSpeed = 1000 / ticksPerSecond;
+ for (; accumulator >= simulationSpeed; accumulator -= simulationSpeed) {
+ if ((keys["w"] || keys["ArrowUp"] || mousePressed && paddle1.pos >= mouseY + paddleSpeed || touchPressed && paddle1.pos >= touchY + paddleSpeed) && paddle1.bounds().y >= 0) {
+ paddle1.pos -= paddleSpeed;
+ } else if ((keys["s"] || keys["ArrowDown"] || mousePressed && paddle1.pos <= mouseY - paddleSpeed || touchPressed && paddle1.pos <= touchY - paddleSpeed) && paddle1.bounds().bottom() <= canvas.height) {
+ paddle1.pos += paddleSpeed;
+ }
- const prediction = ball.predictIntersection(paddle2.bounds().x);
- if (prediction !== null) {
- if (paddle2.pos <= prediction - paddleSpeed && paddle2.bounds().bottom() <= canvas.height) {
- paddle2.pos += paddleSpeed;
- } else if (paddle2.pos >= prediction + paddleSpeed && paddle2.bounds().y >= 0) {
- paddle2.pos -= paddleSpeed;
- }
- }
+ const prediction = ball.predictIntersection(paddle2.bounds().x);
+ if (prediction !== null) {
+ if (paddle2.pos <= prediction - paddleSpeed && paddle2.bounds().bottom() <= canvas.height) {
+ paddle2.pos += paddleSpeed;
+ } else if (paddle2.pos >= prediction + paddleSpeed && paddle2.bounds().y >= 0) {
+ paddle2.pos -= paddleSpeed;
+ }
+ }
- ball.pos = ball.pos.add(ball.velocity);
- if (ball.bounds().intersects(paddle1.bounds()) && ball.velocity.x <= 0) {
- ping();
- let d = (ball.pos.y - paddle1.pos) / (paddle1.bounds().h / 2 + ball.bounds().h);
- if (d < 0) {
- d = -d;
- }
- let angle = d * 75 * 2 * Math.PI / 360;
- if (ball.pos.y < paddle1.pos) {
- angle = -angle;
- }
- const speed = ballSpeed * (1 + 4 * d);
- ball.velocity = new Vector2(speed * Math.cos(angle), speed * Math.sin(angle));
- } else if (ball.bounds().intersects(paddle2.bounds()) && ball.velocity.x >= 0) {
- ping();
- let d = (ball.pos.y - paddle2.pos) / (paddle2.bounds().h / 2 + ball.bounds().h);
- if (d < 0) {
- d = -d;
- }
- let angle = d * 75 * 2 * Math.PI / 360;
- if (ball.pos.y < paddle2.pos) {
- angle = -angle;
- }
- angle += Math.PI;
- const speed = ballSpeed * (1 + 4 * d);
- ball.velocity = new Vector2(speed * Math.cos(angle), speed * Math.sin(angle));
- } else if (ball.bounds().right() <= 0) {
- aiScore++;
- ball.reset('right');
- } else if (ball.bounds().x >= canvas.width) {
- playerScore++;
- ball.reset('left');
- } else if (ball.bounds().y <= 0 && ball.velocity.y < 0 || ball.bounds().bottom() >= canvas.height && ball.velocity.y > 0) {
- ping();
- ball.velocity.y = -ball.velocity.y;
- }
- }
+ ball.pos = ball.pos.add(ball.velocity);
+ if (ball.bounds().intersects(paddle1.bounds()) && ball.velocity.x <= 0) {
+ ping();
+ let d = (ball.pos.y - paddle1.pos) / (paddle1.bounds().h / 2 + ball.bounds().h);
+ if (d < 0) {
+ d = -d;
+ }
+ let angle = d * 75 * 2 * Math.PI / 360;
+ if (ball.pos.y < paddle1.pos) {
+ angle = -angle;
+ }
+ const speed = ballSpeed * (1 + 4 * d);
+ ball.velocity = new Vector2(speed * Math.cos(angle), speed * Math.sin(angle));
+ } else if (ball.bounds().intersects(paddle2.bounds()) && ball.velocity.x >= 0) {
+ ping();
+ let d = (ball.pos.y - paddle2.pos) / (paddle2.bounds().h / 2 + ball.bounds().h);
+ if (d < 0) {
+ d = -d;
+ }
+ let angle = d * 75 * 2 * Math.PI / 360;
+ if (ball.pos.y < paddle2.pos) {
+ angle = -angle;
+ }
+ angle += Math.PI;
+ const speed = ballSpeed * (1 + 4 * d);
+ ball.velocity = new Vector2(speed * Math.cos(angle), speed * Math.sin(angle));
+ } else if (ball.bounds().right() <= 0) {
+ aiScore++;
+ ball.reset('right');
+ } else if (ball.bounds().x >= canvas.width) {
+ playerScore++;
+ ball.reset('left');
+ } else if (ball.bounds().y <= 0 && ball.velocity.y < 0 || ball.bounds().bottom() >= canvas.height && ball.velocity.y > 0) {
+ ping();
+ ball.velocity.y = -ball.velocity.y;
+ }
+ }
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- paddle1.bounds().fill();
- paddle2.bounds().fill();
- ball.bounds().fill();
- drawNumber(playerScore, 150, 30)
- drawNumber(aiScore, canvas.width / 2 + 150, canvas.height - 130);
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ paddle1.bounds().fill();
+ paddle2.bounds().fill();
+ ball.bounds().fill();
+ drawNumber(playerScore, 150, 30)
+ drawNumber(aiScore, canvas.width / 2 + 150, canvas.height - 130);
- requestAnimationFrame(gameLoop);
- }
- gameLoop();
+ requestAnimationFrame(gameLoop);
+ }
+ gameLoop();
}
main();