@maximeij/css-brickout/dist/style.css

Classic Brickout Game Engine implemented in Typescript and rendered with CSS. No dependencies.

.game{background:var(--game-bg, hsl(0, 0%, 45%));height:100%;width:100%;position:relative;overflow:hidden;font-size:max(1.5rem,3vmin);font-family:monospace;font-weight:700;color:var(--text, hsl(0, 0%, 90%));display:grid;grid-template-columns:1fr max(5rem,20%);grid-template-rows:50% 50%}.game.column{display:grid;grid-template-columns:1fr;grid-template-rows:max(3rem,8%) 1fr max(3rem,10%)}.game.demo{pointer-events:none}.game:not(.paused) .level *{pointer-events:none}.game.paused .level{background:radial-gradient(#0d0d0d4d 10%,#0d0d0d99 65%,#0d0d0de5),var(--level-bg, transparent)}.hide-cursor:not(.paused) .level{cursor:none}.moving-object{will-change:transform;transition:all 17ms}.game>.level{background:var(--level-bg, transparent);height:100%;width:100%;position:relative;overflow:hidden;cursor:crosshair;touch-action:none;grid-column:1 / 2;grid-row:1 / 3}.column .level{grid-row:2}.ball{height:var(--diameter, 10px);width:var(--diameter, 10px);background:var(--ball-bg, hsl(0, 0%, 90%));border:var(--ball-border, hsl(0, 0%, 20%) solid 3px);border-radius:var(--border-radius, 50%);position:absolute;top:0;left:0}.paddle{background:var(--paddle-bg, hsl(0, 0%, 90%));border:var(--paddle-border, hsl(0, 0%, 20%) solid 3px);position:absolute;top:0;left:0;--border-radius: var(--paddle-radius, 0);border-radius:var(--border-radius)}.brick{background:var(--brick-bg, hsl(0, 0%, 90%));border:var(--brick-border, hsl(0, 0%, 20%) solid 3px);position:absolute;box-sizing:border-box;top:0;left:0}.brick.circle{border-radius:50%}.brick--destroyed{background:transparent;border-width:0;opacity:0;visibility:hidden;transition:border-width .25s ease-out,opacity .2s ease-in-out .1s,background .12s ease-in}#debug{height:fit-content;width:fit-content;background:transparent;padding:.5%;font-size:.6em;letter-spacing:.1em;line-height:1.5em;text-align:right;position:absolute;right:0%;top:50%;transform:translateY(-50%);white-space:pre;z-index:2}.column #debug{top:4%;left:.5%;text-align:left}#controls{background:var(--controls-bg, transparent)}.game:not(.demo) #controls *{pointer-events:all}#hud,#controls{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-end;gap:1vmin;letter-spacing:.5vmin;-webkit-text-stroke:0;padding:5%}.column #hud,.column #controls{flex-direction:row;align-items:center;justify-content:space-between;padding:2%}.column #controls{justify-content:flex-end}#hud{justify-content:flex-end;background:var(--hud-bg, transparent);color:var(--hud-text, hsl(0, 0%, 90%));z-index:1}#hud,#hud>*,#controls,#controls>*{transform:none!important}#pause{text-align:center;font-size:3.5rem;font-family:system-ui;font-weight:700;letter-spacing:.5rem;cursor:default;white-space:pre;width:fit-content;height:fit-content}#pause.final{animation:none}.clickable{cursor:pointer}.resume-link{position:absolute;animation:pulse 3s infinite ease-in-out}@keyframes pulse{0%{opacity:1}70%{opacity:.75}to{opacity:1}}.particle{position:absolute;display:block}