{"id":20220249,"url":"https://github.com/maximeij/css-brickout","last_synced_at":"2026-03-10T22:03:36.015Z","repository":{"id":154067232,"uuid":"631350606","full_name":"MaximeIJ/css-brickout","owner":"MaximeIJ","description":"🕹 Classic brick breaker game engine rendering with CSS. Themable and customizable!","archived":false,"fork":false,"pushed_at":"2025-06-15T18:32:45.000Z","size":1362,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-08T19:27:54.289Z","etag":null,"topics":["brick-breaker","css","css-art","css-game","css-games","css3","game","js","typescript","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://maximeij.dev/css-brickout/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaximeIJ.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-22T18:40:54.000Z","updated_at":"2025-06-15T18:32:48.000Z","dependencies_parsed_at":"2024-01-12T19:01:57.502Z","dependency_job_id":"cbbb85eb-0364-4028-99ff-4a78b97f7b87","html_url":"https://github.com/MaximeIJ/css-brickout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MaximeIJ/css-brickout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-brickout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-brickout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-brickout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-brickout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaximeIJ","download_url":"https://codeload.github.com/MaximeIJ/css-brickout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-brickout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30357614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["brick-breaker","css","css-art","css-game","css-games","css3","game","js","typescript","vanilla-javascript"],"created_at":"2024-11-14T06:45:45.884Z","updated_at":"2026-03-10T22:03:36.008Z","avatar_url":"https://github.com/MaximeIJ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-brickout [![npm (scoped)](https://img.shields.io/npm/v/@maximeij/css-brickout?color=green\u0026label=npm%20package\u0026logo=logo)](https://www.npmjs.com/package/@maximeij/css-brickout) [![image](https://github.com/MaximeIJ/css-brickout/assets/5600516/27a4f945-e91c-4f75-bdf3-80c689d8f453)](http://vanilla-js.com/)\n\n# In action\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e\u003ca href=\"https://lynxlab.games/brickout/\" target=\"blank\"\u003eMAX Brickout: a free Roguelike\u003c/a\u003e\u003c/h2\u003e\n  \u003cimg alt=\"engine demo gameplay screenshot 2\" src=\"https://github.com/user-attachments/assets/8443f394-58d1-4689-8e9a-6237d6926d01\" height=380 align=\"center\" /\u003e\n  \u003cimg alt=\"engine demo gameplay screenshot 2\" src=\"https://github.com/user-attachments/assets/e9fa185b-d306-4de4-9509-b65bac5cd14a\" height=380 align=\"center\" /\u003e\n  \u003ch2\u003e\u003ca href=\"https://maximeij.dev/css-brickout/\" target=\"blank\"\u003eBasic™ Engine Demo\u003c/a\u003e\u003c/h2\u003e\n  \u003cimg alt=\"engine demo gameplay screenshot 2\" src=\"https://github.com/MaximeIJ/css-brickout/assets/5600516/28d48f7b-53e3-4542-aa39-e38f54f21ebc\" height=300 align=\"center\" /\u003e\n  \u003cimg alt=\"engine demo gameplay screenshot 2\" src=\"https://github.com/MaximeIJ/css-brickout/assets/5600516/997e7a09-2852-4170-bdf1-8f2fcab09cd9\" height=300 align=\"center\" /\u003e\n\u003c/div\u003e\n\n# In words\n\n## A timeless favorite...\n\nCSS Brickout (aka _CSS Breakout_) exposes a responsive, customizable, themable, extensible implementation of the beloved classic to the web. This 0 dependency library can be used in any ecosystem and framework.\n\n### Quick start\n\nNo time to chat, here's the copy pastable stuff:\n\n```npm\nnpm i @maximeij/css-brickout\n```\n\n```typescript\nimport '@maximeij/css-brickout/css';\nimport {Game} from '@maximeij/css-brickout';\n```\n\nSee [demo.ts](src/demo.ts) for a quick example of how to invoke it. Either have a div with id `game` rendered, or pass a custom `parentId` to the input object to target anything else.\n\n## ...with a twist!\n\nUnlike other web based games, this little number renders all its graphics with good old CSS. No `canvas` were hurt (or used) during the production. While this was initially more of a personal challenge for the love of CSS-art and other related endeavors, it has proven to bring some advantages.\n\n### Easy themes 🎨\n\nWith CSS Brickout, no need to wonder how hard it'll be to customize the feel and look of your game: it's as simple as tried and true `--css-variables`.\nAnything not covered by that can be easily styled with static class names exposed by the lib:\n\n```css\n/* Example custom game container */\n#custom-game {\n  --ball-bg: hsl(98, 18, 89%);\n  --paddle-bg: hsl(0, 0, 50%);\n}\n\n#custom-game .ball {\n  border-style: double;\n}\n```\n\n### Easy extension 🔨\n\nThe game emits custom events as they occur, allowing you to set up handlers that will customize the gameplay endlessly!\nThese events are currently available and include the GameObject emitting it unless stated otherwise:\n\n#### Game events:\n\n- `'gamestarted'`, `'gamepaused'`, `'gameresumed'`\n- `'gamewon'`, `'gamelost'`\n\n#### Ball events:\n\n- `'ballcollision'` (includes both the Ball and the GameObject it collided with unless the collision was with the boundary)\n- `'balldestroyed'`\n\n#### Brick events:\n\n- `'brickdestroyed'`\n\n\u003e [!IMPORTANT]\n\u003e By default, the Game will set up listenners to decrease life and increase score on `balldestroyed` and `brickdestroyed` respectively.\n\u003e These can be omitted with `{options: { skipDefaultRules: true}}`\n\nExample use:\n\n```typescript\n// Basic\nelement.addEventListener('ballcollision', ({detail}) =\u003e console.log(detail.ball, 'bonk', detail.object));\n\n/**\n * Advanced (as seen on demo.ts)\n * Basic particle effect for ball destruction using moving particles\n */\nelement.addEventListener('balldestroyed', ({detail: ball}) =\u003e\n  ball.emitParticles(10, ['ball--destroyed-particle'], 300, true).forEach(particle =\u003e {\n    particle.style.left = `${50 - Math.round(100 * Math.random())}px`;\n    particle.style.top = `${0 - Math.round(50 * Math.random())}px`;\n    particle.style.opacity = '0';\n  }),\n);\n```\n\n```css\n/** Previous example class */\n.particle.ball--destroyed-particle {\n  border-radius: 50%;\n  background: var(--ball-bg);\n  transition: all 300ms ease-out;\n  top: 0px;\n  left: 0px;\n  opacity: 1;\n}\n```\n\n### Still though... CSS for 60 FPS?\n\nYep! There's really only thing moving at 60FPS (the balls), and positioning them and other objects in a way consistent with the underlying model is pretty straightforward:\n\n```typescript\nthis.element.style.transform = `translateX(calc(${absX}px - 50%)) translateY(calc(${absY}px - 50%))`;\n```\n\nThe movement of the ball is smooth but the game does consume more power than it would if using optimized graphics like `canvas` and `svg`. I plan to decouple the rendering logic so we can create a more efficient rendering method to compare just exactly how big is the difference with CSS is. In the meantime this is a fun experiment.\n\nIn fact, even with non-trivial collision detection (see [geometry.ts](src/util/geometry.ts)), we can run it upwards of thousands of times per frame. The performance bottleneck is often first the repainting every frame, which will slow down FPS as the number of elements and the complexity of their styles (transparencies, blurs) increases.\n\n\u003e [!NOTE]\n\u003e The 60 FPS limit is often a result of `requestAnimationFrame` which, when uncapped by the device, the game can run up to triple the FPS.\n\n## Recent changes\n\n- [Changelog](CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximeij%2Fcss-brickout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximeij%2Fcss-brickout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximeij%2Fcss-brickout/lists"}