Skip to content

Commit

Permalink
Rewrite to use pixels instead squares in grid; Calculate all steps in…
Browse files Browse the repository at this point in the history 
… between frames (fixes constant speed); Rewrite collision logic to check vertical, horizontal and diagonal collisions (fixes #6, #18, #19, #21, #22)
  • Loading branch information
@schlagmichdoch
schlagmichdoch committed Feb 8, 2024
1 parent d0c70cb commit e5e3a53
Showing 1 changed file with 230 additions and 84 deletions.
314 changes: 230 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@

<body>
<div id="container">
<canvas id="pongCanvas" width="800" height="800"></canvas>
<canvas id="pongCanvas" width="832" height="832"></canvas>
<div id="score"></div>
<p id="made">
made by <a href="https://koenvangilst.nl">Koen van Gilst</a> | source on
Expand Down Expand Up @@ -101,91 +101,180 @@
const NIGHT_COLOR = colorPalette.NocturnalExpedition;
const NIGHT_BALL_COLOR = colorPalette.MysticMint;

const SQUARE_SIZE = 25;
const SQUARE_SIZE = 26; // integers only - must be factor of canvas size
const BALL_RADIUS = 13; // integers only

const SPEED = 12;

const numSquaresX = canvas.width / SQUARE_SIZE;
const numSquaresY = canvas.height / SQUARE_SIZE;

let squares = [];
let pixels = [];

for (let x = 0; x < canvas.width; x++) {
pixels[x] = [];
}

function calculateDistance(p1x, p1y, p2x, p2y) {
return Math.sqrt(Math.pow(p1x - p2x, 2) + Math.pow(p1y - p2y, 2))
}

function ballIsInSquare(sx, sy, ballColor) {
let xSquare = sx * SQUARE_SIZE;
let ySquare = sy * SQUARE_SIZE;

let xBall, yBall;
if (ballColor === DAY_COLOR) {
xBall = xDay;
yBall = yDay;
}
else {
xBall = xNight;
yBall = yNight;
}

// If this is the square --> this is the exclusion zone.
// and ball has radius 2
// ---bb----------------- ----------------------
// --bbbb---------------- ----------------------
// --bbbb---------------- --------######--------
// ---bb----------------- -------########-------
// ---------ssss--------- -------##ssss##-------
// ---------ssss--------- -------##ssss##-------
// ---------ssss--------- -------##ssss##-------
// ---------ssss--------- -------##ssss##-------
// ---------------------- -------########-------
// ---------------------- --------######--------
// ---------------------- ----------------------
// ---------------------- ----------------------

const squareTopLeftX = xSquare;
const squareTopLeftY = ySquare;
const squareTopRightX = xSquare + SQUARE_SIZE;
const squareTopRightY = ySquare;
const squareBottomLeftX = xSquare;
const squareBottomLeftY = ySquare + SQUARE_SIZE;
const squareBottomRightX = xSquare + SQUARE_SIZE;
const squareBottomRightY = ySquare + SQUARE_SIZE;

if (
xBall >= xSquare - BALL_RADIUS
&& xBall <= xSquare + SQUARE_SIZE + BALL_RADIUS
&& yBall >= ySquare - BALL_RADIUS
&& yBall <= ySquare + SQUARE_SIZE + BALL_RADIUS
) {
// ball is inside the exclusion zone
const distanceToTopLeft = calculateDistance(xBall, yBall, squareTopLeftX, squareTopLeftY);
const distanceToTopRight = calculateDistance(xBall, yBall, squareTopRightX, squareTopRightY);
const distanceToBottomLeft = calculateDistance(xBall, yBall, squareBottomLeftX, squareBottomLeftY);
const distanceToBottomRight = calculateDistance(xBall, yBall, squareBottomRightX, squareBottomRightY);

if (
(xBall < squareTopLeftX && yBall < squareTopLeftY && distanceToTopLeft >= BALL_RADIUS)
|| (xBall > squareTopRightX && yBall < squareTopRightY && distanceToTopRight >= BALL_RADIUS)
|| (xBall < squareBottomLeftX && yBall > squareBottomLeftY && distanceToBottomLeft >= BALL_RADIUS)
|| (xBall > squareBottomRightX && yBall > squareBottomRightY && distanceToBottomRight >= BALL_RADIUS)
) {
// ball is at corners of exclusion zone (which are not part of it)
return false;
}

for (let i = 0; i < numSquaresX; i++) {
squares[i] = [];
for (let j = 0; j < numSquaresY; j++) {
squares[i][j] = i < numSquaresX / 2 ? DAY_COLOR : NIGHT_COLOR;
// bass is inside exclusion zone and not at corners
return true;
}
else {
// ball is outside the exclusion zone
return false;
}
}

let x1 = canvas.width / 4;
let y1 = canvas.height / 2;
let dx1 = 12.5;
let dy1 = -12.5;
function flipColorOfSquareThatPixelIsIn(x, y) {
let currentColor = pixels[x][y];
let newColor = currentColor === DAY_COLOR ? NIGHT_COLOR : DAY_COLOR;
let otherBallColor = currentColor === DAY_COLOR ? DAY_COLOR : NIGHT_COLOR;

let {sx, sy} = getSquareThatPixelIsIn(x, y);

let x2 = (canvas.width / 4) * 3;
let y2 = canvas.height / 2;
let dx2 = -12.5;
let dy2 = 12.5;
// Do not flip color of square if the other ball and the square overlap
if (ballIsInSquare(sx, sy, otherBallColor)) {
return;
}

colorPixelsInSquare(sx, sy, newColor);
}

function getSquareThatPixelIsIn(pixelX, pixelY) {
let sx = Math.floor(pixelX / SQUARE_SIZE);
let sy = Math.floor(pixelY / SQUARE_SIZE);
return {sx, sy}
}

function colorPixelsInSquare(sx, sy, color) {
for (let x = sx * SQUARE_SIZE; x < (sx + 1) * SQUARE_SIZE; x++) {
for (let y = sy * SQUARE_SIZE; y < (sy + 1) * SQUARE_SIZE; y++) {
pixels[x][y] = color;
}
}
}

for (let x = 0; x < numSquaresX; x++) {
for (let y = 0; y < numSquaresY; y++) {
const color = x < numSquaresX / 2 ? DAY_COLOR : NIGHT_COLOR;
colorPixelsInSquare(x, y, color)
}
}

function getRandomSign() {
return Math.sign(Math.random() - 0.5);
}

function getRandomIntInRange(start, end) {
let randomFloatInRange = start + Math.random() * (end - start + 1);
return Math.floor(randomFloatInRange);
}

let xDay = canvas.width / 4 + getRandomIntInRange(-5 * SQUARE_SIZE, 5 * SQUARE_SIZE);
let yDay = getRandomIntInRange(0.5 * SQUARE_SIZE, canvas.height - 0.5 * SQUARE_SIZE);
let dxDay = getRandomSign();
let dyDay = getRandomSign();

let xNight = (canvas.width / 4) * 3;
let yNight = getRandomIntInRange(0.5 * SQUARE_SIZE, canvas.height - 0.5 * SQUARE_SIZE);
let dxNight = getRandomSign();
let dyNight = getRandomSign();

let iteration = 0;

function drawBall(x, y, color) {
ctx.beginPath();
ctx.arc(x, y, SQUARE_SIZE / 2, 0, Math.PI * 2, false);
ctx.arc(x, y, BALL_RADIUS, 0, Math.PI * 2, false);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}

function drawSquares() {
for (let i = 0; i < numSquaresX; i++) {
for (let j = 0; j < numSquaresY; j++) {
ctx.fillStyle = squares[i][j];
for (let i = 0; i < canvas.width; i += SQUARE_SIZE) {
for (let j = 0; j < canvas.height; j += SQUARE_SIZE) {
ctx.fillStyle = pixels[i][j];
ctx.fillRect(
i * SQUARE_SIZE,
j * SQUARE_SIZE,
i,
j,
SQUARE_SIZE,
SQUARE_SIZE
);
}
}
}

function updateSquareAndBounce(x, y, dx, dy, color) {
let updatedDx = dx;
let updatedDy = dy;

// Check multiple points around the ball's circumference
for (let angle = 0; angle < Math.PI * 2; angle += Math.PI / 4) {
let checkX = x + Math.cos(angle) * (SQUARE_SIZE / 2);
let checkY = y + Math.sin(angle) * (SQUARE_SIZE / 2);

let i = Math.floor(checkX / SQUARE_SIZE);
let j = Math.floor(checkY / SQUARE_SIZE);

if (i >= 0 && i < numSquaresX && j >= 0 && j < numSquaresY) {
if (squares[i][j] !== color) {
squares[i][j] = color;

// Determine bounce direction based on the angle
if (Math.abs(Math.cos(angle)) > Math.abs(Math.sin(angle))) {
updatedDx = -updatedDx;
} else {
updatedDy = -updatedDy;
}
}
}
}

return { dx: updatedDx, dy: updatedDy };
}

function updateScoreElement() {
let dayScore = 0;
let nightScore = 0;
for (let i = 0; i < numSquaresX; i++) {
for (let j = 0; j < numSquaresY; j++) {
if (squares[i][j] === DAY_COLOR) {
for (let i = 0; i < numSquaresX * SQUARE_SIZE; i += SQUARE_SIZE) {
for (let j = 0; j < numSquaresY * SQUARE_SIZE; j += SQUARE_SIZE) {
if (pixels[i][j] === DAY_COLOR) {
dayScore++;
} else if (squares[i][j] === NIGHT_COLOR) {
} else if (pixels[i][j] === NIGHT_COLOR) {
nightScore++;
}
}
Expand All @@ -194,46 +283,103 @@
scoreElement.textContent = `day ${dayScore} | night ${nightScore}`;
}

function checkBoundaryCollision(x, y, dx, dy) {
if (x + dx > canvas.width - SQUARE_SIZE / 2 || x + dx < SQUARE_SIZE / 2) {
dx = -dx;
function calculateNextStep(xOld, yOld, dxOld, dyOld, color) {
let dxNew = dxOld;
let dyNew = dyOld;

let horCanvasOut = false;
let verCanvasOut = false;


// possible vertical and horizontal collide points (CP)
const horCpX = xOld + dxOld * BALL_RADIUS;
const horCpY = yOld;
const verCpX = xOld;
const verCpY = yOld + dyOld * BALL_RADIUS;

// possible diagonal collide point
const diaCpX = xOld + Math.ceil((1 / Math.sqrt(2)) * BALL_RADIUS) * dxOld;
const diaCpY = yOld + Math.ceil((1 / Math.sqrt(2)) * BALL_RADIUS) * dyOld;

// possible vertical and horizontal collide points (CP)
const horCpNextX = horCpX + dxOld;
const horCpNextY = horCpY + dyOld;
const verCpNextX = verCpX + dxOld;
const verCpNextY = verCpY + dyOld;
const diaCpNextX = diaCpX + dxOld;
const diaCpNextY = diaCpY + dyOld;

// pixel horizontally out of canvas
if (horCpNextX < 0 || canvas.width <= horCpNextX) {
dxNew = -dxNew;
horCanvasOut = true;
}
if (
y + dy > canvas.height - SQUARE_SIZE / 2 ||
y + dy < SQUARE_SIZE / 2
) {
dy = -dy;

// pixel vertically out of canvas
if (verCpNextY < 0 || canvas.height <= verCpNextY) {
dyNew = -dyNew;
verCanvasOut = true;
}

return { dx: dx, dy: dy };
// horizontal collision
if (!horCanvasOut && pixels[horCpNextX][horCpNextY] === color) {
// change horizontal direction
dxNew = -dxNew;

// flip next square
flipColorOfSquareThatPixelIsIn(horCpNextX, horCpNextY);
}

// vertical collision
if (!verCanvasOut && pixels[verCpNextX][verCpNextY] === color) {
// change vertical direction
dyNew = -dyNew;

// flip next square
flipColorOfSquareThatPixelIsIn(verCpNextX, verCpNextY);
}

// diagonal collision (if ball radius is bigger 2)
if (!horCanvasOut && !verCanvasOut && pixels[diaCpNextX][diaCpNextY] === color) {
// change horizontal and vertical direction
dxNew = -dxNew;
dyNew = -dyNew;

// flip next square
flipColorOfSquareThatPixelIsIn(diaCpNextX, diaCpNextY);
}

let xNew = xOld + dxNew;
let yNew = yOld + dyNew;

return {xNew, yNew, dxNew, dyNew};
}

function calculateNextFrame() {
let step = 0
while (step < SPEED) {
let newDay = calculateNextStep(xDay, yDay, dxDay, dyDay, DAY_BALL_COLOR);
xDay = newDay.xNew;
yDay = newDay.yNew;
dxDay = newDay.dxNew;
dyDay = newDay.dyNew;
let newNight = calculateNextStep(xNight, yNight, dxNight, dyNight, NIGHT_BALL_COLOR);
xNight = newNight.xNew;
yNight = newNight.yNew;
dxNight = newNight.dxNew;
dyNight = newNight.dyNew;
step++;
}
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSquares();

drawBall(x1, y1, DAY_BALL_COLOR);
let bounce1 = updateSquareAndBounce(x1, y1, dx1, dy1, DAY_COLOR);
dx1 = bounce1.dx;
dy1 = bounce1.dy;

drawBall(x2, y2, NIGHT_BALL_COLOR);
let bounce2 = updateSquareAndBounce(x2, y2, dx2, dy2, NIGHT_COLOR);
dx2 = bounce2.dx;
dy2 = bounce2.dy;

let boundary1 = checkBoundaryCollision(x1, y1, dx1, dy1);
dx1 = boundary1.dx;
dy1 = boundary1.dy;

let boundary2 = checkBoundaryCollision(x2, y2, dx2, dy2);
dx2 = boundary2.dx;
dy2 = boundary2.dy;
drawBall(xDay, yDay, DAY_BALL_COLOR);
drawBall(xNight, yNight, NIGHT_BALL_COLOR);

x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
calculateNextFrame();

iteration++;
if (iteration % 1_000 === 0) console.log("iteration", iteration);
Expand Down

0 comments on commit e5e3a53

Please sign in to comment.