From 1867d980bdf367072caabf1f2e4740647730b28c Mon Sep 17 00:00:00 2001 From: soorokim Date: Wed, 31 Jan 2024 23:27:40 +0900 Subject: [PATCH 1/2] four balls and score base background gradient --- index.html | 90 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 82 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 19ef37f..1c26cb2 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@ #score { font-family: monospace; margin-top: 30px; - font-size: 16px; + font-size: 14px; padding-left: 20px; color: #172b36; } @@ -67,7 +67,7 @@ - +
@@ -101,6 +101,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; @@ -111,20 +117,37 @@ 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 + ? j < numSquaresY / 2 + ? DAY_COLOR + : NIGHT_COLOR + : j < numSquaresY / 2 + ? NOON_COLOR + : MIDNIGHT_COLOR; } } let x1 = canvas.width / 4; - let y1 = canvas.height / 2; + let y1 = canvas.height / 4; let dx1 = 12.5; let dy1 = -12.5; - let x2 = (canvas.width / 4) * 3; - let y2 = canvas.height / 2; + let x2 = (canvas.width / 4) * 1; + let y2 = (canvas.height / 4) * 3; let dx2 = -12.5; let dy2 = 12.5; + let x3 = (canvas.width / 4) * 3; + let y3 = (canvas.height / 4) * 1; + let dx3 = 12.5; + let dy3 = -12.5; + + let x4 = (canvas.width / 4) * 3; + let y4 = (canvas.height / 4) * 3; + let dx4 = -12.5; + let dy4 = 12.5; + let iteration = 0; function drawBall(x, y, color) { @@ -181,17 +204,46 @@ 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}`; + const totalScore = numSquaresX * numSquaresY; + const dayPercent = (dayScore / totalScore) * 100; + const nightPercent = (nightScore / totalScore) * 100; + const noonPercent = (noonScore / totalScore) * 100; + const midNightPercent = (midNightScore / totalScore) * 100; + scoreElement.textContent = `day ${dayScore}(${Math.floor( + dayPercent + )}%) | night ${nightScore}(${Math.floor( + nightPercent + )}%) | noon ${noonScore}(${Math.floor( + noonPercent + )}%) | midNight ${midNightScore}(${Math.floor(midNightPercent)}%)`; + updateBodyGradient(dayPercent, nightPercent); + } + function updateBodyGradient(dayPercent, nightPercent) { + document.body.style.setProperty( + "background", + `linear-gradient(90deg, + ${DAY_COLOR}, + ${NOON_COLOR} ${dayPercent}%, + ${MIDNIGHT_COLOR} ${100 - nightPercent}%, + ${NIGHT_COLOR} 100%)` + ); } function checkBoundaryCollision(x, y, dx, dy) { @@ -222,6 +274,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; @@ -230,13 +292,25 @@ 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("iteration", iteration); + if (iteration % 1_000 === 0) console.log("interation", iteration); updateScoreElement(); From c76931fad9045284c8435ce1a74109765c64c40e Mon Sep 17 00:00:00 2001 From: soorokim Date: Thu, 1 Feb 2024 00:21:25 +0900 Subject: [PATCH 2/2] Start with random ball direction --- index.html | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1c26cb2..0b9e82e 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,7 @@ const MIDNIGHT_BALL_COLOR = colorPalette.Forsythia; const SQUARE_SIZE = 25; + const BALL_SPEED = 25; const numSquaresX = canvas.width / SQUARE_SIZE; const numSquaresY = canvas.height / SQUARE_SIZE; @@ -128,25 +129,30 @@ } } + // get random direction + const getRandomDX = () => { + const dx = Math.random() * BALL_SPEED; + return { + dx, + dy: BALL_SPEED - dx, + }; + }; + let x1 = canvas.width / 4; let y1 = canvas.height / 4; - let dx1 = 12.5; - let dy1 = -12.5; + let { dx: dx1, dy: dy1 } = getRandomDX(); - let x2 = (canvas.width / 4) * 1; + let x2 = canvas.width / 4; let y2 = (canvas.height / 4) * 3; - let dx2 = -12.5; - let dy2 = 12.5; + let { dx: dx2, dy: dy2 } = getRandomDX(); let x3 = (canvas.width / 4) * 3; - let y3 = (canvas.height / 4) * 1; - let dx3 = 12.5; - let dy3 = -12.5; + let y3 = canvas.height / 4; + let { dx: dx3, dy: dy3 } = getRandomDX(); let x4 = (canvas.width / 4) * 3; let y4 = (canvas.height / 4) * 3; - let dx4 = -12.5; - let dy4 = 12.5; + let { dx: dx4, dy: dy4 } = getRandomDX(); let iteration = 0; @@ -310,7 +316,7 @@ y4 += dy4; iteration++; - if (iteration % 1_000 === 0) console.log("interation", iteration); + if (iteration % 1_000 === 0) console.log("iteration", iteration); updateScoreElement();