2f:null 30:["$","title",null,{"children":"Jezzball Part 5/Final (Game State and Scoring) | Sam Learner | Observable"}] 35:T520,md`# Jezzball Part 5/Final (Game State and Scoring) This is the fifth and final step in recreating a classic Windows game, [Jezzball](https://en.wikipedia.org/wiki/JezzBall), on canvas. Here, I've added game state, where the simulation has an understanding of score/lives/area cleared/rounds and is capable of resetting the game on a player loss or advancing to the next round on a round victory. I've also added a few game features, such as limiting the players' ability to spawn new bars, while another is still active. Scoring rules were based on [this FAQ](https://www.ign.com/faqs/2001/jezzball-walkthroughfaq-223013). See this full collection [here](https://observablehq.com/collection/@sdl60660/jezzball). **Credits**: The original ball collision code here is taken and adapted from [Harry Stevens](/@harrystevens)' ["Bouncing Balls" block](https://bl.ocks.org/HarryStevens/dbceb1a3590a6435c131dab724c0ead1), with a little refactoring and some interactivity added. The elastic collision logic is derived from [this document](http://cobweb.cs.uga.edu/~maria/classes/4070-Spring-2017/Adam%20Brookes%20Elastic%20collision%20Code.pdf) and [this code](https://gist.github.com/winduptoy/a1aa09c3499e09edbd33) and now lives in its own notebook [here](https://observablehq.com/@sdl60660/elastic-collisions) `36:T72b,clickHandler = { // Click handler d3.select("#main-canvas").on("click", (e) => { mutable clickPosition = d3.pointer(e); const [x, y] = d3.pointer(e); // If we're in a game over state, or between rounds, we're going to handle clicks differently if (simulation.roundState !== "running") { // Check if click is on button if (x >= simulation.button.left && x <= simulation.button.right && y >= simulation.button.top && y <= simulation.button.bottom) { if (simulation.button.type === "game") { resetGame(); } else { nextRound(); } } return; } // Check if this grid position is already scored (occupied by bar or scored space) let gridPositionFilled = false; const gridX = roundToGrid(x) / gridSize; const gridY = roundToGrid(y) / gridSize; const cellId = gridX*gridHeight + gridY; // If so, return without spawning new bars if (simulation.grid[cellId].scored) { return; } // No longer allowing new bars to spawn while there are still active bars (true to the original game) if (simulation.bars.find(bar => bar.active === true)) { return; }; // Otherwise, spawn two new bar segments to the left/right or up/down, depending on selected orientation if (barDirection === "Horizontal") { addBar({ x, y, direction: "left" }); addBar({ x, y, direction: "right" }); } else { addBar({ x, y, direction: "up" }); addBar({ x, y, direction: "down" }); } }) // Right-click handler d3.select("#main-canvas").on("contextmenu", (e) => { e.preventDefault(); const direction = barDirection === "Horizontal" ? "Vertical" : "Horizontal"; set(viewof barDirection, direction); }); }37:T990,class Simulation { constructor({ width, height, ctx, balls, bars, grid }) { this.width = width || 800; this.height = height || 800; this.center = [this.width / 2, this.height / 2]; this.ctx = ctx || null; this.maxRadius = d3.max(balls, (a) => a.radius); this.quadtree = null; this.balls = balls || []; this.bars = bars || []; this.grid = grid; this.grid.forEach((cell) => { cell.scored = false; }); this.fillQueue = []; this.button = null; // Game state this.roundState = "running"; this.lives = 2; this.totalScore = 0; this.roundScore = 0; this.level = 1; this.areaCleared = 0; // Collision methods this.fastDetectBallCollision = fastDetectBallCollision; this.detectBallWallCollision = detectBallWallCollision; this.detectBarWallCollision = detectBarWallCollision; this.detectBallBarCollision = detectBallBarCollision; this.detectBarToBarCollision = detectBarToBarCollision; this.evaluateGrid = evaluateGrid; // End state methods this.endGame = endGame; this.endRound = endRound; // this.resetGame = resetGame; // this.nextRound = nextRound; } clearCanvas() { this.ctx.fillStyle = "#ffffff"; this.ctx.clearRect(0, 0, width, height); } tick(endState = false) { if (endState) { mutable areaCleared = this.areaCleared; if (this.lives <= 0) { this.endGame(); } else { this.endRound(); } return; } this.clearCanvas(); this.grid.forEach((cell) => { cell.drawCell(); }); this.quadtree = d3 .quadtree() .x((d) => d.x) .y((d) => d.y) .extent([-1, -1], [this.width + 1, this.height + 1]) .addAll(this.balls); this.balls.forEach((ball) => { this.detectBallBarCollision(ball); this.detectBallWallCollision(ball); this.fastDetectBallCollision(ball); ball.tick(); ball.drawCircle(); }); this.bars = this.bars.filter((bar) => bar.remove === false); this.bars.forEach((bar) => { if (bar.active) { this.detectBarWallCollision(bar); this.detectBarToBarCollision(bar); bar.tick(); } bar.drawRect(); }); if (this.bars.filter((bar) => bar.active === true).length === 0) { this.fillQueue.forEach((bar) => { this.evaluateGrid(bar); }); this.fillQueue = []; } } }38:T47c,fastDetectBallCollision = function (ball) { const r = ball.radius + this.maxRadius; const nx1 = ball.x - r; const nx2 = ball.x + r; const ny1 = ball.y - r; const ny2 = ball.y + r; this.quadtree.visit((visited, x1, y1, x2, y2) => { if (visited.data && visited.data.id !== ball.id) { // Collision if ( geometric.lineLength([ball.pos, visited.data.pos]) < ball.radius + visited.data.radius ) { const keep = geometric.lineLength([ geometric.pointTranslate(ball.pos, ball.angle, ball.speed), geometric.pointTranslate( visited.data.pos, visited.data.angle, visited.data.speed ) ]); const swap = geometric.lineLength([ geometric.pointTranslate( ball.pos, visited.data.angle, visited.data.speed ), geometric.pointTranslate(visited.data.pos, ball.angle, ball.speed) ]); if (swap > keep) { elasticCollision(ball, visited.data, true); } } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); }39:T61f,detectBallBarCollision = function (ball) { const ballLeft = ball.x - ball.radius; const ballRight = ball.x + ball.radius; const ballTop = ball.y + ball.radius; const ballBottom = ball.y - ball.radius; this.bars.forEach(bar => { const verticalCollision = ((ballRight >= bar.right && ballLeft <= bar.right) || (ballLeft <= bar.left && ballRight >= bar.left)) && (Math.round(ball.y) <= bar.bottom && Math.round(ball.y) >= bar.top); const horizontalCollision = ((ballTop >= bar.top && ballBottom <= bar.top) || (ballBottom <= bar.bottom && ballTop >= bar.bottom)) && (Math.round(ball.x) <= bar.right && Math.round(ball.x) >= bar.left); if (verticalCollision || horizontalCollision) { if (bar.active) { bar.remove = true; this.lives -= 1; mutable currentLives -= 1; } else { const reflected = geometric.angleReflect(ball.angle, verticalCollision ? 90 : 0); const t0 = geometric.pointTranslate(ball.pos, ball.angle, ball.speed); const t1 = geometric.pointTranslate(ball.pos, reflected, ball.speed); const barTargetCoordinates = verticalCollision ? [((bar.left + bar.right) / 2), ball.y] : [ball.x, ((bar.top + bar.bottom) / 2)]; const l0 = geometric.lineLength([barTargetCoordinates, t0]); const l1 = geometric.lineLength([barTargetCoordinates, t1]); if (l1 > l0) { ball.angle = reflected; } } } }) }3a:T69d,detectBarToBarCollision = function (bar) { const possibleBars = this.bars.filter((candidateBar) => { if ( candidateBar.originX === bar.originX && candidateBar.originY === bar.originY ) { return false; } if (bar.direction === "left") { return candidateBar.originX < bar.originX; } else if (bar.direction === "right") { return candidateBar.originX > bar.originX; } else if (bar.direction === "up") { return candidateBar.originY < bar.originY; } else { return candidateBar.originY > bar.originY; } }); possibleBars.forEach((collisionBar) => { if ( (bar.direction === "left" && bar.left <= collisionBar.right && bar.top <= collisionBar.bottom && bar.bottom >= collisionBar.top) || (bar.direction === "right" && bar.right >= collisionBar.left - 1 && bar.top <= collisionBar.bottom && bar.bottom >= collisionBar.top) || (bar.direction === "up" && bar.top <= collisionBar.bottom && bar.left <= collisionBar.right && bar.right >= collisionBar.left) || (bar.direction === "down" && bar.bottom >= collisionBar.top - 1 && bar.left <= collisionBar.right && bar.right >= collisionBar.left) ) { bar.active = false; bar.color = lightGray; this.grid .filter( (cell) => cell.y < bar.bottom && cell.y >= bar.top && cell.x >= bar.left && cell.x < bar.right ) .forEach((cell) => { cell.scored = true; }); // this.evaluateGrid(bar); this.fillQueue.push(bar); } }); }3b:T488,evaluateGrid = function(bar) { const startingCells = bar.orientation === "vertical" ? this.grid.filter(cell => { return ( ((cell.x === bar.left - gridSize) || (cell.x === bar.right + 1)) && cell.y >= bar.top && cell.y < bar.bottom && cell.visited === false ) }) : this.grid.filter(cell => { return ( ((cell.y === bar.top - gridSize) || (cell.y === bar.bottom + 1)) && cell.x >= bar.left && cell.x < bar.right && cell.visited === false ) }) const ballCells = this.balls.map(ball => { const x = roundToGrid(ball.x) / gridSize; const y = roundToGrid(ball.y) / gridSize; const cellId = x*gridHeight + y; return cellId; }) let visited = []; startingCells.forEach(startCell => { if (!visited.includes(startCell.id)) { const section = floodFill([startCell], this.grid); if (!section.find(id => ballCells.includes(id))) { section.forEach(id => { this.grid[id].scored = true }); } visited = [...visited, ...section]; } }); calculateScore(this.grid, this); }3c:T7ab,class Bar { constructor({ id, originX, originY, direction, ctx, height, width, active }) { this.id = id; this.direction = direction; this.color = direction === "up" || direction === "left" ? "red" : "blue"; this.orientation = (direction === "up" || direction === "down") ? "vertical" : "horizontal"; this.multiplier = (this.direction === "up" || this.direction === "left") ? -1 : 1; this.originX = direction === "left" ? roundToGrid(originX) - 1 : roundToGrid(originX); this.originY = direction === "up" ? roundToGrid(originY) - 1 : roundToGrid(originY); this.height = height || this.orientation == "vertical" ? 0 : (gridSize - 1); this.width = width || this.orientation === "horizontal" ? 0 : (gridSize - 1); this.ctx = ctx || null; this.growthSpeed = barGrowthSpeed; this.active = active === undefined ? true : active; this.remove = false; this.left = Math.min((this.originX + this.width), this.originX); this.right = Math.max((this.originX + this.width), this.originX); this.top = Math.min((this.originY + this.height), this.originY); this.bottom = Math.max((this.originY + this.height), this.originY); } drawRect() { this.ctx.beginPath(); this.ctx.rect(this.originX, this.originY, this.width, this.height); this.ctx.fillStyle = this.color; this.ctx.strokeStyle = this.color; this.ctx.fill(); this.ctx.stroke(); } tick() { if (this.orientation === "vertical") { this.height += sizeModifier*this.multiplier*this.growthSpeed; } else { this.width += sizeModifier*this.multiplier*this.growthSpeed; } this.left = Math.min((this.originX + this.width), this.originX); this.right = Math.max((this.originX + this.width), this.originX); this.top = Math.min((this.originY + this.height), this.originY); this.bottom = Math.max((this.originY + this.height), this.originY); } }3d:[] 33:{"id":"c41da36f6b610258","slug":"jezzball-part-5-game-state-scoring","title":"Jezzball Part 5/Final (Game State and Scoring)","thumbnail":"8cac0a3bbd412e0f582e72e85abe566eafe72fc08aa370f7ec7063f8a0e22d02","access_level":"public","create_time":"$D2021-04-30T15:54:28.067Z","update_time":"$D2023-01-30T05:27:10.429Z","view_time":null,"first_public_time":"$D2021-04-30T19:58:20.002Z","has_unpublished_edits":null,"fork":{"id":"b73e4037d5e9244e","slug":"jezzball-part-4-grid-blocking","title":"Jezzball Part 4 (Grid/Blocking)","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"stars":1,"starred":false,"owner":{"type":"team","id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":"starter_2024"},"version":3797,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null}],"members":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"333571dddb17c12c","slug":"jezzball","title":"Jezzball","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"title":"Jezzball Part 5/Final (Game State and Scoring)","cells":[{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2980,"value":"md`\n## Directions\n\n* The goal of each round is to build walls that close off at least 75% of the space from the bouncing balls, using wall dividers. \n* Click anywhere on the canvas to create a wall divider.\n* Use the \"Bar Direction\" radio buttons, or right-click, to toggle between vertical/horizontal walls.\n* If a ball hits a wall before it finishes growing, you'll lose a life.\n* Any enclosed space without balls will count towards \"area cleared\". When you've cleared at least 75% of the area in a round, you can advance to the next round.\n* Each subsequent round will get harder by adding an additional ball.\n* If you run out of lives on any round, the game is over.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"html`\n

JezzBall

\n\n

Area Cleared: ${areaCleared}%

Score: ${d3.format(\",\")(simulation.totalScore + simulation.roundScore)}

\n\n

Round: ${simulation.level}

Lives: ${currentLives}

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"viewof barDirection = Radio([\"Horizontal\", \"Vertical\"], {label: \"Bar Direction\", value: \"Horizontal\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"canvas = {\n const context = DOM.context2d(width, height);\n context.fillStyle = \"#ffffff\";\n context.clearRect(0, 0, width, height);\n\n context.canvas.id = \"main-canvas\";\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"ctx = canvas.getContext(\"2d\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3535,"value":"md`\nThese mutables aren't used directly by the simulation object to track game state, but are used to trigger scoreboard updates, which the simulation properties won't.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2451,"value":"mutable areaCleared = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3527,"value":"mutable currentLives = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2574,"value":"numStartingBalls = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2526,"value":"startSimulation = {\n// ballSpeed;\n// barGrowthSpeed;\n \n// resetGame();\n \n init()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"init = () => {\n const tick = () => {\n let endState = false;\n if (\n simulation.lives > 0 &&\n (!simulation.areaCleared || simulation.areaCleared < 75)\n ) {\n requestAnimationFrame(tick);\n } else {\n simulation.tick();\n endState = true;\n }\n simulation.tick(endState);\n };\n\n tick();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1814,"value":"scoredCells = simulation.grid.filter((a) => a.scored)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"mutable clickPosition = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"addBall = ({ x, y }) => {\n const ball = new Ball({ id: simulation.balls.length, x, y, ctx });\n simulation.balls = [...simulation.balls, ball];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"addBar = ({ x, y, direction }) => {\n const id = `${x}-${y}-${direction}`;\n const bar = new Bar({ id, originX: x, originY: y, direction, ctx })\n simulation.bars = [...simulation.bars, bar];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"simulation = new Simulation({ width, height, ctx, balls: ballSet(numStartingBalls), grid: gridSet })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"gridSet = {\n \n const gridCells = [];\n let id = 0;\n\n for (let x = 0; x < width; x += gridSize) {\n for (let y = 0; y < height; y += gridSize) {\n \n const neighbors = [];\n \n // up (if not at top)\n if (id % gridHeight !== 0) {\n neighbors.push(id-1);\n }\n // down (if not at bottom)\n if ((id + 1) % gridHeight !== 0) {\n neighbors.push(id+1);\n }\n // left (if not at left edge)\n if (id - gridHeight >= 0) {\n neighbors.push(id - gridHeight);\n }\n // right (if not at right edge)\n if (id + gridHeight < gridHeight*gridWidth) {\n neighbors.push(id + gridHeight);\n } \n \n gridCells.push(\n new GridCell({\n id,\n x,\n y,\n width: (gridSize - 1),\n height: (gridSize - 1), ctx,\n neighbors \n })\n );\n id += 1;\n }\n }\n\n return gridCells;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"ballSet = (numberBalls) => {\n const balls = [];\n for (let index = 0; index < numberBalls; ++index) {\n const ball = new Ball({\n id: index,\n x: d3.randomUniform(0, width)(),\n y: d3.randomUniform(0, height)(),\n radius: Math.round(0.8*gridSize / 2),\n color: d3.schemeCategory10[Math.round(d3.randomUniform(0, 9)())],\n speed: ballSpeed*sizeModifier,\n ctx\n });\n balls.push(ball);\n }\n\n return balls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2674,"value":"nextRound = function() {\n simulation.totalScore += simulation.roundScore;\n simulation.roundScore = 0;\n simulation.level += 1;\n simulation.lives = simulation.level + 1;\n simulation.areaCleared = 0;\n \n mutable areaCleared = 0;\n mutable currentLives = simulation.level + 1;\n \n simulation.balls = ballSet((simulation.level + 1));\n simulation.bars = [];\n simulation.grid.forEach(cell => { cell.scored = false });\n \n simulation.fillQueue = [];\n simulation.button = null;\n simulation.roundState = \"running\";\n \n init();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2672,"value":"resetGame = function() {\n simulation.roundScore = 0;\n simulation.totalScore = 0;\n simulation.lives = 2;\n simulation.level = 1;\n simulation.areaCleared = 0;\n\n mutable areaCleared = 0;\n mutable currentLives = 2;\n\n simulation.balls = ballSet(2);\n simulation.bars = [];\n simulation.grid.forEach(cell => { cell.scored = false });\n\n simulation.fillQueue = [];\n simulation.button = null;\n simulation.roundState = \"running\";\n\n init();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2606,"value":"endGame = function() {\n this.roundState = \"game over\";\n \n this.ctx.font = `bold ${sizeModifier < 0.8 ? 35 : 50}px Courier`;\n this.ctx.strokeStyle = \"white\";\n this.ctx.fillStyle = \"#787878\";\n this.ctx.textAlign = \"center\";\n \n this.ctx.fillText(\"Game Over\", this.center[0], this.center[1] - 60);\n this.ctx.strokeText(\"Game Over\", this.center[0], this.center[1] - 60);\n\n this.ctx.fillStyle = \"#787878\";\n this.ctx.strokeStyle = \"white\";\n\n this.ctx.fillRect(this.center[0] - 70, this.center[1] - 40, 140, 35);\n this.ctx.strokeRect(this.center[0] - 70, this.center[1] - 40, 140, 35);\n\n this.ctx.font = \"20px Courier\";\n this.ctx.fillStyle = \"white\";\n this.ctx.fillText(\"New Game\", this.center[0], this.center[1] - 17);\n\n this.button = ({ type: \"game\", left: this.center[0] - 70, right: this.center[0] + 70, top: this.center[1] - 40, bottom: this.center[1] - 5});\n \n return;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2604,"value":"endRound = function() {\n this.roundState = \"between rounds\";\n \n this.ctx.font = `bold ${sizeModifier < 0.8 ? 32 : 50}px Courier`;\n this.ctx.strokeStyle = \"white\";\n this.ctx.fillStyle = \"#787878\";\n this.ctx.textAlign = \"center\";\n \n this.ctx.fillText(\"Round Complete!\", this.center[0], this.center[1] - 60);\n this.ctx.strokeText(\"Round Complete!\", this.center[0], this.center[1] - 60);\n\n this.ctx.fillStyle = \"#787878\";\n this.ctx.strokeStyle = \"white\";\n\n this.ctx.fillRect(this.center[0] - 70, this.center[1] - 40, 140, 35);\n this.ctx.strokeRect(this.center[0] - 70, this.center[1] - 40, 140, 35);\n\n this.ctx.font = \"20px Courier\";\n this.ctx.fillStyle = \"white\";\n this.ctx.fillText(\"Next Round\", this.center[0], this.center[1] - 17);\n\n this.button = ({ type: \"round\", left: this.center[0] - 70, right: this.center[0] + 70, top: this.center[1] - 40, bottom: this.center[1] - 5});\n \n return;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2255,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2245,"value":"detectBallWallCollision = function(ball) {\n // Detect sides\n const wallVertical = ball.x <= ball.radius || ball.x >= this.width - ball.radius;\n const wallHorizontal = ball.y <= ball.radius || ball.y >= this.height - ball.radius;\n \n if (wallVertical || wallHorizontal) {\n \n const t0 = geometric.pointTranslate(ball.pos, ball.angle, ball.speed);\n const l0 = geometric.lineLength([this.center, t0]);\n \n const reflected = geometric.angleReflect(ball.angle, wallVertical ? 90 : 0);\n const t1 = geometric.pointTranslate(ball.pos, reflected, ball.speed);\n const l1 = geometric.lineLength([this.center, t1]);\n \n if (l1 < l0) {\n ball.angle = reflected;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2240,"value":"detectBarWallCollision = function (bar) {\n // Determine wall collision\n const wallDistance =\n bar.direction === \"up\"\n ? bar.originY + bar.height\n : bar.direction === \"down\"\n ? height - (bar.originY + bar.height)\n : bar.direction === \"left\"\n ? bar.originX + bar.width\n : this.width - (bar.originX + bar.width);\n\n if (wallDistance <= 0) {\n bar.active = false;\n bar.color = lightGray;\n bar.drawRect();\n bar.multiplier = 0;\n\n this.grid\n .filter(\n (cell) =>\n cell.y < bar.bottom &&\n cell.y >= bar.top &&\n cell.x >= bar.left &&\n cell.x < bar.right\n )\n .forEach((cell) => {\n cell.scored = true;\n });\n\n this.fillQueue.push(bar);\n // this.evaluateGrid(bar);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2228,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2217,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2433,"value":"calculateScore = (grid, simulation) => {\n mutable areaCleared = simulation.areaCleared = Math.round(100*grid.filter(cell => cell.scored === true).length / grid.length);\n simulation.roundScore = Math.round(47*(100*grid.filter(cell => cell.scored === true).length / grid.length));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"floodFill = (queue, grid) => {\n const section = [queue[0].id];\n \n while (queue.length) {\n const cell = queue.shift();\n\n cell.neighbors.forEach(neighbor => {\n const neighborCell = grid[neighbor];\n \n if (neighborCell.scored === false && neighborCell.visited === false) {\n neighborCell.visited = true;\n section.push(neighbor);\n queue.push(neighborCell);\n }\n });\n }\n\n return section;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"class Ball {\n constructor({ id, x, y, radius, angle, speed, color, ctx }) {\n this.id = id;\n this.x = x || d3.randomUniform(0, width)();\n this.y = y || d3.randomUniform(0, height)();\n this.pos = [x, y];\n this.radius = radius || Math.round((0.8 * gridSize) / 2);\n this.mass = radius * radius;\n this.angle = angle || d3.randomUniform(0, 360)();\n this.speed = speed || d3.randomUniform(1, ballSpeed)();\n this.color =\n color || d3.schemeCategory10[Math.round(d3.randomUniform(0, 9)())];\n this.ctx = ctx || null;\n }\n\n drawCircle() {\n this.ctx.beginPath();\n this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\n this.ctx.stroke();\n\n // Maybe change this to a more 3D-looking gradient at some point?\n this.ctx.fillStyle = this.color;\n this.ctx.fill();\n }\n\n tick() {\n [this.x, this.y] = this.pos = geometric.pointTranslate(\n this.pos,\n this.angle,\n this.speed\n );\n // this.x += 0.1*this.speed;\n // this.y += 0.1*this.speed;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"class GridCell {\n constructor({ id, x, y, width, height, ctx, neighbors }) {\n this.id = id;\n\n this.x = x;\n this.y = y;\n\n this.width = width || (gridSize - 1);\n this.height = height || (gridSize - 1);\n\n this.ctx = ctx;\n\n this.neighbors = neighbors || [];\n\n this.scored = false;\n this.visited = false;\n }\n\n drawCell() {\n this.visited = false;\n \n this.ctx.beginPath();\n this.ctx.rect(this.x, this.y, this.width, this.height);\n\n this.ctx.fillStyle = this.scored ? darkGray : backgroundColor;\n this.ctx.strokeStyle = this.scored ? darkGray : lightGray;\n\n this.ctx.fill();\n this.ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"roundToGrid = (value) => {\n return gridSize*Math.floor(value/gridSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1960,"value":"gridHeight = 24;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"gridWidth = 36;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"gridSize = Math.min(baseGridSize, Math.floor(window.innerWidth / 36));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3550,"value":"baseGridSize = 25; // ideal grid size, if screen size isn't a constraint (adjusted down if it is)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3627,"value":"sizeModifier = gridSize / baseGridSize // used to adjust ball/bar speed and font sizing/spacing if screen size is decreased","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"width = gridWidth*gridSize;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = gridHeight*gridSize;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"backgroundColor = \"white\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2189,"value":"darkGray = \"#A9A9A9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"lightGray = \"#D3D3D3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"fadedBlue = \"#8187DE\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"fadedRed = \"#B86566\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"viewof ballSpeed = Range([1, 10], {value: 6, step: 1, label: \"Ball Speed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2325,"value":"viewof barGrowthSpeed = Range([1, 10], {value: 5, step: 1, label: \"Bar Growth Speed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import { Range, Radio } from \"@sdl60660/observable-inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3690,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3480,"value":"import { Vector, elasticCollision } from \"@sdl60660/elastic-collisions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"geometric = require(\"geometric\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3719,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 34:"$33:body"