Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

introduce 3rd ball #9

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 47 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@
#score {
font-family: monospace;
margin-top: 30px;
font-size: 20px;
font-size: 16px;
padding-left: 20px;
color: #172b36;
}
@@ -92,6 +92,12 @@
const NIGHT_COLOR = colorPalette.NocturnalExpedition;
const NIGHT_BALL_COLOR = colorPalette.MysticMint;

const NOON_COLOR = colorPalette.Forsythia;
const NOON_BALL_COLOR = colorPalette.DeepSaffron;

const MIDNIGHT_COLOR = colorPalette.DeepSaffron;
const MIDNIGHT_BALL_COLOR = colorPalette.Forsythia;

const SQUARE_SIZE = 25;

const numSquaresX = canvas.width / SQUARE_SIZE;
@@ -102,7 +108,7 @@
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;
squares[i][j] = i < numSquaresX / 2 ? DAY_COLOR : NIGHT_COLOR; // NOON_COLOR and MIDNIGHT_COLOR are missing here
}
}

@@ -116,6 +122,16 @@
let dx2 = -12.5;
let dy2 = 12.5;

let x3 = (canvas.width / 3) * 2;
let y3 = canvas.height / 2;
let dx3 = -12.5;
let dy3 = 12.5;

let x4 = (canvas.width / 3) * 3;
let y4 = canvas.height / 3;
let dx4 = -12.5;
let dy4 = 12.5;

let iteration = 0;

function drawBall(x, y, color) {
@@ -180,17 +196,23 @@
function updateScoreElement() {
let dayScore = 0;
let nightScore = 0;
let noonScore = 0;
let midnightScore = 0;
for (let i = 0; i < numSquaresX; i++) {
for (let j = 0; j < numSquaresY; j++) {
if (squares[i][j] === DAY_COLOR) {
dayScore++;
} else if (squares[i][j] === NIGHT_COLOR) {
nightScore++;
} else if (squares[i][j] === NOON_COLOR) {
noonScore++;
} else if (squares[i][j] === MIDNIGHT_COLOR) {
midnightScore++;
}
}
}

scoreElement.textContent = `day ${dayScore} | night ${nightScore}`;
scoreElement.textContent = `day ${dayScore} | night ${nightScore} | noon ${noonScore} | midnight ${midnightScore}`;
}

function checkBoundaryCollision(x, y, dx, dy) {
@@ -221,6 +243,16 @@
dx2 = bounce2.dx;
dy2 = bounce2.dy;

drawBall(x3, y3, NOON_BALL_COLOR);
let bounce3 = updateSquareAndBounce(x3, y3, dx3, dy3, NOON_COLOR);
dx3 = bounce3.dx;
dy3 = bounce3.dy;

drawBall(x4, y4, MIDNIGHT_BALL_COLOR);
let bounce4 = updateSquareAndBounce(x4, y4, dx4, dy4, MIDNIGHT_COLOR);
dx4 = bounce4.dx;
dy4 = bounce4.dy;

let boundary1 = checkBoundaryCollision(x1, y1, dx1, dy1);
dx1 = boundary1.dx;
dy1 = boundary1.dy;
@@ -229,10 +261,22 @@
dx2 = boundary2.dx;
dy2 = boundary2.dy;

let boundary3 = checkBoundaryCollision(x3, y3, dx3, dy3);
dx3 = boundary3.dx;
dy3 = boundary3.dy;

let boundary4 = checkBoundaryCollision(x4, y4, dx4, dy4);
dx4 = boundary4.dx;
dy4 = boundary4.dy;

x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;

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