08Clear particles — erased cells bursting apart
Each erased cell becomes small square particles with per-frame velocity and gravity integration, so the line doesn't just vanish — it bursts. Pure computed particles, no library.
Best forReward feedback, game effects
requestAnimationFramefillRect
<main class="stage">
<div class="pt" id="pt">
<p class="pt__hint">Six particles per cell, velocity and gravity integrated</p>
<div class="pt__row">
<div class="pt__field" id="field" role="application" aria-label="Clear particles" tabindex="0">
<canvas class="pt__cv" id="cv"></canvas>
</div>
<div class="pt__side">
<b class="pt__n" id="pn" aria-live="polite">0</b>
<span class="pt__unit">particles</span>
<p class="pt__c">Cleared <b id="cn">0</b>lines</p>
<div class="pt__sky" id="sky" role="img" aria-label="Particle scatter trails"><canvas id="scv"></canvas></div>
</div>
</div>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// 클리어 파티클(08) — 움직임은 전부 캔버스 rAF (077 방식). CSS 애니메이션 0개.
// 무대는 종이(2번째).
$color: $subject-orange-deep;
@include stage($stage-paper);
.pt {
// 파스텔 팔레트 — 01 과 같은 h 187/47/282/135/355/222/27, 채도 .34
--c-i: #a6ced3; --d-i: #429da9;
--c-o: #d3c9a6; --d-o: #a99342;
--c-t: #c6a6d3; --d-t: #8a42a9;
--c-s: #a6d3b1; --d-s: #42a95b;
--c-z: #d3a6aa; --d-z: #a9424a;
--c-j: #a6b4d3; --d-j: #4261a9;
--c-l: #d3baa6; --d-l: #a97042;
--grid-line: #{rgba($subject-ink, .10)};
--flash: #{$stage-orange};
display: flex; flex-direction: column; gap: $sp-2;
width: 100%; max-width: 430px;
}
.pt__hint {
margin: 0; font-weight: 700; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35;
color: $subject-ink;
}
.pt__row { display: flex; gap: $sp-2; align-items: stretch; }
.pt__field {
position: relative; overflow: hidden;
flex: 0 0 auto;
width: clamp(170px, 48vw, 236px);
height: clamp(196px, 56vw, 224px);
border-radius: $r-card;
background: rgba($subject-ink, .04);
box-shadow: inset 0 0 0 1px rgba($subject-ink, .16);
cursor: pointer; touch-action: manipulation;
}
.pt__field:focus-visible { outline: 2px solid $color; outline-offset: 2px; }
.pt__cv { display: block; width: 100%; height: 100%; }
.pt__side {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: $sp-1;
padding-top: $sp-1;
}
.pt__n {
font-weight: 800; font-size: clamp(20px, 5vw, 28px); line-height: 1;
color: $subject-ink; font-variant-numeric: tabular-nums;
}
.pt__unit { font-weight: 600; font-size: clamp(9px, 2.4vw, 11px); line-height: 1.4; color: rgba($subject-ink, .82); }
.pt__c { margin: $sp-1 0 0; font-size: clamp(9px, 2.4vw, 11px); color: rgba($subject-ink, .72); font-variant-numeric: tabular-nums; }
.pt__c b { font-weight: 700; color: $subject-ink; }
.pt__sky {
position: relative; flex: 1; min-height: 0;
margin-top: $sp-1;
border-radius: $r-sm;
background: rgba($subject-ink, .04);
box-shadow: inset 0 0 0 1px rgba($subject-ink, .12);
overflow: hidden;
}
.pt__sky canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 340px) {
.pt { gap: $sp-1; }
.pt__field { width: 100px; height: 120px; }
.pt__n { font-size: 16px; }
.pt__sky { margin-top: 0; }
}
// reduce — 정적 한 장
@media (prefers-reduced-motion: reduce) {
.pt.is-still .pt__field { cursor: default !important; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffffff;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.pt {
--c-i: #a6ced3;
--d-i: #429da9;
--c-o: #d3c9a6;
--d-o: #a99342;
--c-t: #c6a6d3;
--d-t: #8a42a9;
--c-s: #a6d3b1;
--d-s: #42a95b;
--c-z: #d3a6aa;
--d-z: #a9424a;
--c-j: #a6b4d3;
--d-j: #4261a9;
--c-l: #d3baa6;
--d-l: #a97042;
--grid-line: rgba(23, 20, 26, 0.1);
--flash: #ff4d1f;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 430px;
}
.pt__hint {
margin: 0;
font-weight: 700;
font-size: clamp(10px, 2.8vw, 12px);
line-height: 1.35;
color: #17141a;
}
.pt__row {
display: flex;
gap: 8px;
align-items: stretch;
}
.pt__field {
position: relative;
overflow: hidden;
flex: 0 0 auto;
width: clamp(170px, 48vw, 236px);
height: clamp(196px, 56vw, 224px);
border-radius: 16px;
background: rgba(23, 20, 26, 0.04);
box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.16);
cursor: pointer;
touch-action: manipulation;
}
.pt__field:focus-visible {
outline: 2px solid #c93000;
outline-offset: 2px;
}
.pt__cv {
display: block;
width: 100%;
height: 100%;
}
.pt__side {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 4px;
}
.pt__n {
font-weight: 800;
font-size: clamp(20px, 5vw, 28px);
line-height: 1;
color: #17141a;
font-variant-numeric: tabular-nums;
}
.pt__unit {
font-weight: 600;
font-size: clamp(9px, 2.4vw, 11px);
line-height: 1.4;
color: rgba(23, 20, 26, 0.82);
}
.pt__c {
margin: 4px 0 0;
font-size: clamp(9px, 2.4vw, 11px);
color: rgba(23, 20, 26, 0.72);
font-variant-numeric: tabular-nums;
}
.pt__c b {
font-weight: 700;
color: #17141a;
}
.pt__sky {
position: relative;
flex: 1;
min-height: 0;
margin-top: 4px;
border-radius: 8px;
background: rgba(23, 20, 26, 0.04);
box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.12);
overflow: hidden;
}
.pt__sky canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 340px) {
.pt {
gap: 4px;
}
.pt__field {
width: 100px;
height: 120px;
}
.pt__n {
font-size: 16px;
}
.pt__sky {
margin-top: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pt.is-still .pt__field {
cursor: default !important;
}
}// Clear particles — 지워진 각 칸을 여섯 개의 작은 사각 입자로 바꾼다. 매 프레임
// v += g·dt (중력), p += v·dt (속도 적분) 로 움직인다 — 라이브러리 없는 순수 계산.
// 같은 격자 게임이지만 이번 항목의 주인공은 보드가 아니라 흩어지는 입자다.
(function () {
var root = document.getElementById('pt');
var field = document.getElementById('field');
var cv = document.getElementById('cv');
var sky = document.getElementById('sky');
var scv = document.getElementById('scv');
var pnEl = document.getElementById('pn');
var cnEl = document.getElementById('cn');
if (!root || !field || !cv || !sky || !scv || !pnEl || !cnEl) return;
var ctx = cv.getContext('2d');
var sctx = scv.getContext('2d');
var css = getComputedStyle(root);
function v(name) { return css.getPropertyValue(name).trim(); }
var FILL = { I: v('--c-i'), O: v('--c-o'), T: v('--c-t'), S: v('--c-s'), Z: v('--c-z'), J: v('--c-j'), L: v('--c-l') };
var EDGE = { I: v('--d-i'), O: v('--d-o'), T: v('--d-t'), S: v('--d-s'), Z: v('--d-z'), J: v('--d-j'), L: v('--d-l') };
var LINE = v('--grid-line');
var FLASH = v('--flash');
var COLS = 10, ROWS = 12;
var TYPES = ['I', 'O', 'T', 'S', 'Z', 'J', 'L'];
var SHAPES = {
I: [[0, 1], [1, 1], [2, 1], [3, 1]],
O: [[1, 1], [2, 1], [1, 2], [2, 2]],
T: [[1, 0], [0, 1], [1, 1], [2, 1]],
S: [[1, 0], [2, 0], [0, 1], [1, 1]],
Z: [[0, 0], [1, 0], [1, 1], [2, 1]],
J: [[0, 0], [0, 1], [1, 1], [2, 1]],
L: [[2, 0], [0, 1], [1, 1], [2, 1]]
};
var BOX = { I: 4, O: 4, T: 3, S: 3, Z: 3, J: 3, L: 3 };
var PER_CELL = 6; // 칸마다 입자 수
var GRAV = 30; // 중력 (cells/s²)
var LIFE = 1.1; // 입자 수명 (초)
function mulberry32(a) {
return function () {
a |= 0; a = (a + 0x6D2B79F5) | 0;
var t = Math.imul(a ^ (a >>> 15), 1 | a);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
var rnd = mulberry32(3308);
function rotCW(cells, n) {
var out = [];
for (var i = 0; i < cells.length; i++) out.push([cells[i][1], n - 1 - cells[i][0]]);
return out;
}
function hits(grid, cells, row, col) {
for (var i = 0; i < cells.length; i++) {
var x = col + cells[i][0], y = row + cells[i][1];
if (x < 0 || x >= COLS || y >= ROWS) return true;
if (y >= 0 && grid[y][x]) return true;
}
return false;
}
function emptyGrid() {
var g = [];
for (var y = 0; y < ROWS; y++) { g.push([]); for (var x = 0; x < COLS; x++) g[y].push(0); }
return g;
}
function cloneGrid(g) {
var o = [];
for (var y = 0; y < ROWS; y++) o.push(g[y].slice());
return o;
}
function shapeRot(t, r) {
var c = SHAPES[t].map(function (p) { return p.slice(); }), n = BOX[t];
for (var i = 0; i < r; i++) c = rotCW(c, n);
return c;
}
function landingRow(grid, cells, col) {
var row = -4;
while (!hits(grid, cells, row + 1, col)) row += 1;
return row;
}
function choose(grid, t) {
var best = null;
for (var r = 0; r < 4; r++) {
var cells = shapeRot(t, r);
for (var c = -2; c < COLS; c++) {
if (hits(grid, cells, 0, c)) continue;
var row = landingRow(grid, cells, c);
if (row < 0) continue;
var g2 = cloneGrid(grid);
for (var i = 0; i < cells.length; i++) g2[row + cells[i][1]][c + cells[i][0]] = t;
var full = 0, holes = 0;
for (var y = 0; y < ROWS; y++) {
var f = 0;
for (var x = 0; x < COLS; x++) if (g2[y][x]) f += 1;
if (f === COLS) full += 1;
}
for (var x2 = 0; x2 < COLS; x2++) {
var seen = false;
for (var y2 = 0; y2 < ROWS; y2++) { if (g2[y2][x2]) seen = true; else if (seen) holes += 1; }
}
var score = full * 1000 - holes * 800 - row;
if (!best || score > best.score) best = { r: r, c: c, score: score };
}
}
return best;
}
var grid = emptyGrid();
for (var gy0 = ROWS - 5; gy0 < ROWS; gy0++) {
var h0 = Math.floor(rnd() * COLS);
for (var gx0 = 0; gx0 < COLS; gx0++) grid[gy0][gx0] = gx0 === h0 ? 0 : TYPES[Math.floor(rnd() * 7)];
}
var bag = [];
function refill() {
bag = TYPES.slice();
for (var i = bag.length - 1; i > 0; i--) {
var j = Math.floor(rnd() * (i + 1)), tmp = bag[i]; bag[i] = bag[j]; bag[j] = tmp;
}
}
refill();
var particles = []; // {x, y, vx, vy, t, c, sz}
var trails = []; // 하늘 궤적 {x, y, a}
var clearedRows = 0, flashT = 0, flashRows = [];
function burst(row, t) {
// 한 cells → 여섯 입자. 위치는 cells 안 무작위, 속도는 위쪽 반구로
for (var k = 0; k < PER_CELL; k++) {
particles.push({
x: 0.15 + rnd() * 0.7, y: 0.15 + rnd() * 0.7, // cells 단위 상대 위치
col: 0, row: row,
vx: (rnd() - 0.5) * 9, vy: -3 - rnd() * 7,
t: LIFE * (0.6 + rnd() * 0.4),
c: k % 2 ? FILL[t] : EDGE[t],
sz: 0.10 + rnd() * 0.16
});
particles[particles.length - 1].col = 0;
}
}
var piece = null;
function spawn() {
if (!bag.length) refill();
var t = bag.pop();
var plan = choose(grid, t);
if (!plan) { grid = emptyGrid(); plan = choose(grid, t); }
piece = { t: t, r: 0, cells: SHAPES[t].slice(), x: 3, y: -0.4, plan: plan };
}
function lock() {
var rx = Math.round(piece.x), ry = Math.floor(piece.y), dead = false;
for (var i = 0; i < piece.cells.length; i++) {
var gx = rx + piece.cells[i][0], gy = ry + piece.cells[i][1];
if (gy < 0) { dead = true; break; }
grid[gy][gx] = piece.t;
}
if (dead) grid = emptyGrid();
else {
flashRows = [];
for (var y = 0; y < ROWS; y++) {
var n = 0;
for (var x = 0; x < COLS; x++) if (grid[y][x]) n += 1;
if (n === COLS) flashRows.push(y);
}
if (flashRows.length) {
// cells → 입자 폭발
for (var f = 0; f < flashRows.length; f++) {
for (var x2 = 0; x2 < COLS; x2++) {
var t2 = grid[flashRows[f]][x2];
for (var k = 0; k < PER_CELL; k++) {
particles.push({
x: x2 + 0.15 + rnd() * 0.7, y: flashRows[f] + 0.15 + rnd() * 0.7,
vx: (rnd() - 0.5) * 10, vy: -2 - rnd() * 8,
t: LIFE * (0.6 + rnd() * 0.4),
c: k % 2 ? FILL[t2] : EDGE[t2],
sz: 0.10 + rnd() * 0.16
});
}
}
}
clearedRows += flashRows.length;
cnEl.textContent = String(clearedRows);
flashT = 0.14;
}
}
piece = null;
}
function spliceRows() {
flashRows.sort(function (a, b) { return a - b; });
for (var i = 0; i < flashRows.length; i++) {
grid.splice(flashRows[i], 1);
grid.unshift(new Array(COLS).fill(0));
}
flashRows = [];
var filled = 0;
for (var y = 0; y < ROWS; y++) for (var x = 0; x < COLS; x++) if (grid[y][x]) filled += 1;
if (filled < COLS * 3) {
for (var gy = ROWS - 4; gy < ROWS; gy++) {
var h = Math.floor(rnd() * COLS);
for (var gx = 0; gx < COLS; gx++) grid[gy][gx] = gx === h ? 0 : TYPES[Math.floor(rnd() * 7)];
}
}
}
var W = 0, H = 0, SW = 0, SH = 0, dpr = 1, cell = 8, ox = 0, oy = 0;
function fit() {
W = field.clientWidth; H = field.clientHeight;
SW = sky.clientWidth; SH = sky.clientHeight;
dpr = Math.min(2, window.devicePixelRatio || 1);
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
scv.width = Math.round(SW * dpr); scv.height = Math.round(SH * dpr);
sctx.setTransform(dpr, 0, 0, dpr, 0, 0);
cell = Math.floor(Math.min(H / ROWS, W / COLS));
ox = Math.floor((W - cell * COLS) / 2); oy = Math.floor((H - cell * ROWS) / 2);
}
function paintCell(gx, gy, t, alpha) {
var r = Math.max(2, cell * 0.22);
ctx.globalAlpha = alpha == null ? 1 : alpha;
ctx.beginPath();
ctx.roundRect(ox + gx * cell + 1, oy + gy * cell + 1, cell - 2, cell - 2, r);
ctx.fillStyle = FILL[t]; ctx.fill();
ctx.lineWidth = Math.max(1, cell * 0.14);
ctx.strokeStyle = EDGE[t]; ctx.stroke();
ctx.globalAlpha = 1;
}
var last = 0, raf = 0;
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function draw() {
ctx.clearRect(0, 0, W, H);
ctx.strokeStyle = LINE; ctx.lineWidth = 1;
ctx.beginPath();
for (var x = 0; x <= COLS; x++) { ctx.moveTo(ox + x * cell + .5, oy); ctx.lineTo(ox + x * cell + .5, oy + ROWS * cell); }
for (var y = 0; y <= ROWS; y++) { ctx.moveTo(ox, oy + y * cell + .5); ctx.lineTo(ox + COLS * cell, oy + y * cell + .5); }
ctx.stroke();
for (var gy = 0; gy < ROWS; gy++) for (var gx = 0; gx < COLS; gx++) if (grid[gy][gx]) paintCell(gx, gy, grid[gy][gx]);
if (flashT > 0) {
ctx.globalAlpha = Math.min(1, flashT / 0.14) * 0.9;
ctx.fillStyle = FLASH;
for (var f = 0; f < flashRows.length; f++) ctx.fillRect(ox, oy + flashRows[f] * cell, cell * COLS, cell);
ctx.globalAlpha = 1;
}
if (piece) {
for (var i = 0; i < piece.cells.length; i++) {
var cy = piece.y + piece.cells[i][1];
if (cy >= 0) paintCell(Math.round(piece.x + piece.cells[i][0]), Math.round(cy), piece.t);
}
}
// 입자 — 속도·중력 적분 결과
for (var p = 0; p < particles.length; p++) {
var pt = particles[p];
ctx.globalAlpha = Math.min(1, pt.t / 0.3);
ctx.fillStyle = pt.c;
var s = pt.sz * cell;
ctx.fillRect(ox + pt.x * cell - s / 2, oy + pt.y * cell - s / 2, s, s);
}
ctx.globalAlpha = 1;
pnEl.textContent = String(particles.length);
}
function drawSky(dt) {
if (!SW || !SH) return;
// 흩어진 입자의 궤적 — 사그라드는 점
sctx.clearRect(0, 0, SW, SH);
for (var t2 = trails.length - 1; t2 >= 0; t2--) {
var tr = trails[t2];
tr.a -= dt / 1.0;
if (tr.a <= 0) { trails.splice(t2, 1); continue; }
sctx.globalAlpha = tr.a * 0.5;
sctx.fillStyle = tr.c;
sctx.fillRect(tr.x * SW - 1.5, tr.y * SH - 1.5, 3, 3);
}
sctx.globalAlpha = 1;
if (trails.length > 400) trails.splice(0, trails.length - 400);
}
function step(now) {
var dt = Math.min(64, now - last) / 1000; last = now;
// 입자 적분 — v += g·dt, p += v·dt
for (var p = particles.length - 1; p >= 0; p--) {
var pt = particles[p];
pt.vy += GRAV * dt;
pt.x += pt.vx * dt;
pt.y += pt.vy * dt;
pt.t -= dt;
if (pt.t <= 0 || pt.y > ROWS + 1) { particles.splice(p, 1); continue; }
// 궤적 기록 (하늘 패널 좌표)
if (Math.random() < 0.25) trails.push({ x: Math.min(1, Math.max(0, pt.x / COLS)), y: Math.min(1, Math.max(0, pt.y / ROWS)), a: 1, c: pt.c });
}
if (flashT > 0) {
flashT -= dt;
if (flashT <= 0) spliceRows();
} else if (!piece) {
spawn();
} else {
var dx = piece.plan.c - piece.x;
piece.x += Math.max(-13 * dt, Math.min(13 * dt, dx));
if (piece.r !== piece.plan.r && Math.abs(dx) < 0.6) {
var rc = rotCW(piece.cells, BOX[piece.t]);
if (!hits(grid, rc, Math.floor(piece.y), Math.round(piece.x))) { piece.cells = rc; piece.r = (piece.r + 1) % 4; }
else piece.r = piece.plan.r;
}
var target = landingRow(grid, piece.cells, Math.round(piece.x));
var aligned = Math.abs(dx) < 0.05 && piece.r === piece.plan.r;
var ny = piece.y + (aligned ? 34 : 5) * dt;
piece.y = ny >= target ? target : ny;
if (piece.y === target) lock();
}
draw();
drawSky(dt);
raf = requestAnimationFrame(step);
}
field.addEventListener('pointerdown', function () {
// 누르면 폭발 재현 — 아래쪽 두 줄을 강제로 터뜨린다
for (var y = ROWS - 2; y < ROWS; y++) {
for (var x = 0; x < COLS; x++) {
var t2 = grid[y][x] || TYPES[Math.floor(rnd() * 7)];
for (var k = 0; k < PER_CELL; k++) {
particles.push({
x: x + 0.2 + rnd() * 0.6, y: y + 0.2 + rnd() * 0.6,
vx: (rnd() - 0.5) * 12, vy: -4 - rnd() * 8,
t: LIFE * (0.7 + rnd() * 0.3),
c: k % 2 ? FILL[t2] : EDGE[t2],
sz: 0.10 + rnd() * 0.16
});
}
}
grid.splice(y, 1); grid.unshift(new Array(COLS).fill(0));
}
clearedRows += 2;
cnEl.textContent = String(clearedRows);
});
window.addEventListener('resize', function () { fit(); if (reduce) { draw(); drawSky(0); } });
fit();
if (reduce) {
// 정지 한 장 — 터진 직후의 입자 몇 개를 정적으로 보인다
for (var k2 = 0; k2 < 30; k2++) {
particles.push({ x: rnd() * COLS, y: 2 + rnd() * 4, vx: 0, vy: 0, t: 9, c: k2 % 2 ? FILL.T : EDGE.T, sz: 0.12 + rnd() * 0.1 });
}
draw(); drawSky(0);
root.classList.add('is-still');
} else {
last = performance.now();
raf = requestAnimationFrame(step);
}
})();// TetrisParticleClear — vanilla 판(run/330/demo/08-tetris-particle-clear/index.html) 의 React 포트.
// 지워진 각 칸을 여섯 개의 작은 사각 입자로 바꾼다. 매 프레임
// v += g·dt (중력), p += v·dt (속도 적분) 로 움직인다 — 라이브러리 없는 순수 계산.
// 같은 격자 게임이지만 이번 항목의 주인공은 보드가 아니라 흩어지는 입자다.
// 칸마다 입자 여섯 개 · 중력 30칸/s² · 수명 1.1초 · 정렬 전 5칸/s · 정렬 후 34칸/s · 미끄러짐 13칸/s.
// 값·수치는 vanilla 와 같다. SHAPES 원본은 오염시키지 않는다 — 회전 판은 map(slice) 사본.
// 움직임은 전부 캔버스 rAF 루프가 그리므로 CSS 애니메이션이 없다.
// reduce 에서는 루프를 돌리지 않고 터진 직후 입자 몇 개를 정적으로 보이는 한 장만 남긴다(.isStill).
import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./TetrisParticleClear.module.scss";
export type TetrisParticleClearProps = {
duration?: string;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
// useRef 는 T | null 을 돌려준다. 처음부터 값이 있고 절대 비지 않는 상자는 이렇게 좁혀 쓴다
type Box<T> = { current: T };
const COLS = 10, ROWS = 12;
const TYPES = ["I", "O", "T", "S", "Z", "J", "L"];
const SHAPES: Record<string, number[][]> = {
I: [[0, 1], [1, 1], [2, 1], [3, 1]],
O: [[1, 1], [2, 1], [1, 2], [2, 2]],
T: [[1, 0], [0, 1], [1, 1], [2, 1]],
S: [[1, 0], [2, 0], [0, 1], [1, 1]],
Z: [[0, 0], [1, 0], [1, 1], [2, 1]],
J: [[0, 0], [0, 1], [1, 1], [2, 1]],
L: [[2, 0], [0, 1], [1, 1], [2, 1]]
};
const BOX: Record<string, number> = { I: 4, O: 4, T: 3, S: 3, Z: 3, J: 3, L: 3 };
const PER_CELL = 6; // 칸마다 입자 수
const GRAV = 30; // 중력 (칸/s²)
const LIFE = 1.1; // 입자 수명 (초)
const FLASH_S = 0.14; // 클리어 섬광 (초)
const FALL_ALIGNED = 34, DRIFT = 5, SLIDE = 13; // 정렬 후 34칸/s · 정렬 전 5칸/s · 미끄러짐 13칸/s
const FILL: Record<string, string> = {
I: "#a6ced3", O: "#d3c9a6", T: "#c6a6d3", S: "#a6d3b1", Z: "#d3a6aa", J: "#a6b4d3", L: "#d3baa6"
};
const EDGE: Record<string, string> = {
I: "#429da9", O: "#a99342", T: "#8a42a9", S: "#42a95b", Z: "#a9424a", J: "#4261a9", L: "#a97042"
};
const LINE = "rgba(23,20,26,.10)";
const FLASH = "#ff4d1f";
const HINT = "칸마다 입자 여섯 개 · 속도·중력 적분";
const ARIA_FIELD = "클리어 파티클";
const ARIA_SKY = "입자 흩어짐 궤적";
const UNIT = "개 입자";
const C_PRE = "클리어 ";
const C_POST = "줄";
// 시드 고정 난수 — 같은 판이 반복된다
function mulberry32(a: number): () => number {
return function (): number {
a |= 0; a = (a + 0x6d2b79f5) | 0;
let t = Math.imul(a ^ (a >>> 15), 1 | a);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
function rotCW(cells: number[][], n: number): number[][] {
return cells.map((c) => [c[1], n - 1 - c[0]]);
}
function hits(grid: string[][], cells: number[][], row: number, col: number): boolean {
for (let i = 0; i < cells.length; i++) {
const x = col + cells[i][0], y = row + cells[i][1];
if (x < 0 || x >= COLS || y >= ROWS) return true;
if (y >= 0 && grid[y][x]) return true;
}
return false;
}
function landingRow(grid: string[][], cells: number[][], col: number): number {
let row = -4;
while (!hits(grid, cells, row + 1, col)) row += 1;
return row;
}
function shapeRot(t: string, r: number): number[][] {
let c = SHAPES[t].map((p) => p.slice());
const n = BOX[t];
for (let i = 0; i < r; i++) c = rotCW(c, n);
return c;
}
type Grid = string[][];
type Piece = { t: string; r: number; cells: number[][]; x: number; y: number; plan: { r: number; c: number } };
type Particle = { x: number; y: number; vx: number; vy: number; t: number; c: string; sz: number };
type Trail = { x: number; y: number; a: number; c: string };
export default function TetrisParticleClear({
duration = "2s",
easing = "ease-out",
color = "#c93000"
}: TetrisParticleClearProps) {
const fieldRef = useRef<HTMLDivElement | null>(null);
const cvRef = useRef<HTMLCanvasElement | null>(null);
const skyRef = useRef<HTMLDivElement | null>(null);
const scvRef = useRef<HTMLCanvasElement | null>(null);
const pnRef = useRef<HTMLElement | null>(null);
const cnRef = useRef<HTMLElement | null>(null);
const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
const sctxRef = useRef<CanvasRenderingContext2D | null>(null);
const stRef = useRef({
W: 0, H: 0, SW: 0, SH: 0, dpr: 1, cell: 8, ox: 0, oy: 0,
grid: [] as Grid, bag: [] as string[], piece: null as Piece | null,
particles: [] as Particle[], trails: [] as Trail[],
clearedRows: 0, flashT: 0, flashRows: [] as number[]
}) as Box<{
W: number; H: number; SW: number; SH: number; dpr: number; cell: number; ox: number; oy: number;
grid: Grid; bag: string[]; piece: Piece | null;
particles: Particle[]; trails: Trail[];
clearedRows: number; flashT: number; flashRows: number[];
}>;
const rndRef = useRef(mulberry32(3308)) as Box<() => number>;
const lastRef = useRef(0) as Box<number>;
const rafRef = useRef(0) as Box<number>;
const [still, setStill] = useState(false);
const vars: Vars = { "--duration": duration, "--easing": easing, "--color": color };
function reduced(): boolean {
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}
function emptyGrid(): Grid {
const g: Grid = [];
for (let y = 0; y < ROWS; y++) { g.push([]); for (let x = 0; x < COLS; x++) g[y].push(""); }
return g;
}
function cloneGrid(g: Grid): Grid {
return g.map((row) => row.slice());
}
function choose(grid: Grid, t: string): { r: number; c: number } | null {
let best: { r: number; c: number; score: number } | null = null;
for (let r = 0; r < 4; r++) {
const cells = shapeRot(t, r);
for (let c = -2; c < COLS; c++) {
if (hits(grid, cells, 0, c)) continue;
const row = landingRow(grid, cells, c);
if (row < 0) continue;
const g2 = cloneGrid(grid);
for (let i = 0; i < cells.length; i++) g2[row + cells[i][1]][c + cells[i][0]] = t;
let full = 0, holes = 0;
for (let y = 0; y < ROWS; y++) {
let f = 0;
for (let x = 0; x < COLS; x++) if (g2[y][x]) f += 1;
if (f === COLS) full += 1;
}
for (let x2 = 0; x2 < COLS; x2++) {
let seen = false;
for (let y2 = 0; y2 < ROWS; y2++) { if (g2[y2][x2]) seen = true; else if (seen) holes += 1; }
}
const score = full * 1000 - holes * 800 - row;
if (!best || score > best.score) best = { r: r, c: c, score: score };
}
}
return best;
}
function refill(): void {
const st = stRef.current;
st.bag = TYPES.slice();
for (let i = st.bag.length - 1; i > 0; i--) {
const j = Math.floor(rndRef.current() * (i + 1));
const tmp = st.bag[i]; st.bag[i] = st.bag[j]; st.bag[j] = tmp;
}
}
function spawn(): void {
const st = stRef.current;
if (!st.bag.length) refill();
const t = st.bag.pop() as string;
let plan = choose(st.grid, t);
if (!plan) { st.grid = emptyGrid(); plan = choose(st.grid, t) as { r: number; c: number }; }
st.piece = { t: t, r: 0, cells: SHAPES[t].slice(), x: 3, y: -0.4, plan: plan };
}
function lock(): void {
const st = stRef.current;
const p = st.piece;
if (!p) return;
const rx = Math.round(p.x), ry = Math.floor(p.y);
let dead = false;
for (let i = 0; i < p.cells.length; i++) {
const gx = rx + p.cells[i][0], gy = ry + p.cells[i][1];
if (gy < 0) { dead = true; break; }
st.grid[gy][gx] = p.t;
}
if (dead) st.grid = emptyGrid();
else {
st.flashRows = [];
for (let y = 0; y < ROWS; y++) {
let n = 0;
for (let x = 0; x < COLS; x++) if (st.grid[y][x]) n += 1;
if (n === COLS) st.flashRows.push(y);
}
if (st.flashRows.length) {
// 칸 → 입자 폭발
for (let f = 0; f < st.flashRows.length; f++) {
for (let x2 = 0; x2 < COLS; x2++) {
const t2 = st.grid[st.flashRows[f]][x2];
for (let k = 0; k < PER_CELL; k++) {
st.particles.push({
x: x2 + 0.15 + rndRef.current() * 0.7, y: st.flashRows[f] + 0.15 + rndRef.current() * 0.7,
vx: (rndRef.current() - 0.5) * 10, vy: -2 - rndRef.current() * 8,
t: LIFE * (0.6 + rndRef.current() * 0.4),
c: k % 2 ? FILL[t2] : EDGE[t2],
sz: 0.10 + rndRef.current() * 0.16
});
}
}
}
st.clearedRows += st.flashRows.length;
const out = cnRef.current;
if (out) out.textContent = String(st.clearedRows);
st.flashT = FLASH_S;
}
}
st.piece = null;
}
function spliceRows(): void {
const st = stRef.current;
st.flashRows.sort((a, b) => a - b);
for (let i = 0; i < st.flashRows.length; i++) {
st.grid.splice(st.flashRows[i], 1);
st.grid.unshift(new Array(COLS).fill(""));
}
st.flashRows = [];
let filled = 0;
for (let y = 0; y < ROWS; y++) for (let x = 0; x < COLS; x++) if (st.grid[y][x]) filled += 1;
if (filled < COLS * 3) {
for (let gy = ROWS - 4; gy < ROWS; gy++) {
const h = Math.floor(rndRef.current() * COLS);
for (let gx = 0; gx < COLS; gx++) st.grid[gy][gx] = gx === h ? "" : TYPES[Math.floor(rndRef.current() * 7)];
}
}
}
// 고DPI 대응 — 배킹 스토어를 devicePixelRatio 배로 키우고 좌표계는 CSS 픽셀 그대로 쓴다
function fit(): void {
const st = stRef.current;
const field = fieldRef.current, cv = cvRef.current, sky = skyRef.current, scv = scvRef.current;
if (!field || !cv || !sky || !scv) return;
const ctx = cv.getContext("2d"), sctx = scv.getContext("2d");
if (!ctx || !sctx) return;
st.W = field.clientWidth; st.H = field.clientHeight;
st.SW = sky.clientWidth; st.SH = sky.clientHeight;
st.dpr = Math.min(2, window.devicePixelRatio || 1);
cv.width = Math.round(st.W * st.dpr); cv.height = Math.round(st.H * st.dpr);
ctx.setTransform(st.dpr, 0, 0, st.dpr, 0, 0);
scv.width = Math.round(st.SW * st.dpr); scv.height = Math.round(st.SH * st.dpr);
sctx.setTransform(st.dpr, 0, 0, st.dpr, 0, 0);
st.cell = Math.floor(Math.min(st.H / ROWS, st.W / COLS));
st.ox = Math.floor((st.W - st.cell * COLS) / 2);
st.oy = Math.floor((st.H - st.cell * ROWS) / 2);
ctxRef.current = ctx;
sctxRef.current = sctx;
}
function paintCell(gx: number, gy: number, t: string, alpha?: number): void {
const st = stRef.current;
const ctx = ctxRef.current;
if (!ctx) return;
const r = Math.max(2, st.cell * 0.22);
ctx.globalAlpha = alpha == null ? 1 : alpha;
ctx.beginPath();
ctx.roundRect(st.ox + gx * st.cell + 1, st.oy + gy * st.cell + 1, st.cell - 2, st.cell - 2, r);
ctx.fillStyle = FILL[t]; ctx.fill();
ctx.lineWidth = Math.max(1, st.cell * 0.14);
ctx.strokeStyle = EDGE[t]; ctx.stroke();
ctx.globalAlpha = 1;
}
function draw(): void {
const st = stRef.current;
const ctx = ctxRef.current;
if (!ctx) return;
ctx.clearRect(0, 0, st.W, st.H);
ctx.strokeStyle = LINE; ctx.lineWidth = 1;
ctx.beginPath();
for (let x = 0; x <= COLS; x++) { ctx.moveTo(st.ox + x * st.cell + 0.5, st.oy); ctx.lineTo(st.ox + x * st.cell + 0.5, st.oy + ROWS * st.cell); }
for (let y = 0; y <= ROWS; y++) { ctx.moveTo(st.ox, st.oy + y * st.cell + 0.5); ctx.lineTo(st.ox + COLS * st.cell, st.oy + y * st.cell + 0.5); }
ctx.stroke();
for (let gy = 0; gy < ROWS; gy++) for (let gx = 0; gx < COLS; gx++) if (st.grid[gy][gx]) paintCell(gx, gy, st.grid[gy][gx]);
if (st.flashT > 0) {
ctx.globalAlpha = Math.min(1, st.flashT / FLASH_S) * 0.9;
ctx.fillStyle = FLASH;
for (let f = 0; f < st.flashRows.length; f++) ctx.fillRect(st.ox, st.oy + st.flashRows[f] * st.cell, st.cell * COLS, st.cell);
ctx.globalAlpha = 1;
}
if (st.piece) {
for (let i = 0; i < st.piece.cells.length; i++) {
const cy = st.piece.y + st.piece.cells[i][1];
if (cy >= 0) paintCell(Math.round(st.piece.x + st.piece.cells[i][0]), Math.round(cy), st.piece.t);
}
}
// 입자 — 속도·중력 적분 결과
for (let p = 0; p < st.particles.length; p++) {
const pt = st.particles[p];
ctx.globalAlpha = Math.min(1, pt.t / 0.3);
ctx.fillStyle = pt.c;
const s = pt.sz * st.cell;
ctx.fillRect(st.ox + pt.x * st.cell - s / 2, st.oy + pt.y * st.cell - s / 2, s, s);
}
ctx.globalAlpha = 1;
const out = pnRef.current;
if (out) out.textContent = String(st.particles.length);
}
function drawSky(dt: number): void {
const st = stRef.current;
const sctx = sctxRef.current;
if (!sctx || !st.SW || !st.SH) return;
// 흩어진 입자의 궤적 — 사그라드는 점
sctx.clearRect(0, 0, st.SW, st.SH);
for (let t2 = st.trails.length - 1; t2 >= 0; t2--) {
const tr = st.trails[t2];
tr.a -= dt / 1.0;
if (tr.a <= 0) { st.trails.splice(t2, 1); continue; }
sctx.globalAlpha = tr.a * 0.5;
sctx.fillStyle = tr.c;
sctx.fillRect(tr.x * st.SW - 1.5, tr.y * st.SH - 1.5, 3, 3);
}
sctx.globalAlpha = 1;
if (st.trails.length > 400) st.trails.splice(0, st.trails.length - 400);
}
function step(now: number): void {
const st = stRef.current;
const dt = Math.min(64, now - lastRef.current) / 1000;
lastRef.current = now;
// 입자 적분 — v += g·dt, p += v·dt
for (let p = st.particles.length - 1; p >= 0; p--) {
const pt = st.particles[p];
pt.vy += GRAV * dt;
pt.x += pt.vx * dt;
pt.y += pt.vy * dt;
pt.t -= dt;
if (pt.t <= 0 || pt.y > ROWS + 1) { st.particles.splice(p, 1); continue; }
// 궤적 기록 (하늘 패널 좌표)
if (Math.random() < 0.25) st.trails.push({ x: Math.min(1, Math.max(0, pt.x / COLS)), y: Math.min(1, Math.max(0, pt.y / ROWS)), a: 1, c: pt.c });
}
if (st.flashT > 0) {
st.flashT -= dt;
if (st.flashT <= 0) spliceRows();
} else if (!st.piece) {
spawn();
} else {
const p = st.piece;
const dx = p.plan.c - p.x;
p.x += Math.max(-SLIDE * dt, Math.min(SLIDE * dt, dx));
if (p.r !== p.plan.r && Math.abs(dx) < 0.6) {
const rc = rotCW(p.cells, BOX[p.t]);
if (!hits(st.grid, rc, Math.floor(p.y), Math.round(p.x))) { p.cells = rc; p.r = (p.r + 1) % 4; }
else p.r = p.plan.r;
}
const target = landingRow(st.grid, p.cells, Math.round(p.x));
const aligned = Math.abs(dx) < 0.05 && p.r === p.plan.r;
const ny = p.y + (aligned ? FALL_ALIGNED : DRIFT) * dt;
p.y = ny >= target ? target : ny;
if (p.y === target) lock();
}
draw();
drawSky(dt);
rafRef.current = requestAnimationFrame(step);
}
// 누르면 폭발 재현 — 아래쪽 두 줄을 강제로 터뜨린다
function onPointerDown(): void {
const st = stRef.current;
for (let y = ROWS - 2; y < ROWS; y++) {
for (let x = 0; x < COLS; x++) {
const t2 = st.grid[y][x] || TYPES[Math.floor(rndRef.current() * 7)];
for (let k = 0; k < PER_CELL; k++) {
st.particles.push({
x: x + 0.2 + rndRef.current() * 0.6, y: y + 0.2 + rndRef.current() * 0.6,
vx: (rndRef.current() - 0.5) * 12, vy: -4 - rndRef.current() * 8,
t: LIFE * (0.7 + rndRef.current() * 0.3),
c: k % 2 ? FILL[t2] : EDGE[t2],
sz: 0.10 + rndRef.current() * 0.16
});
}
}
st.grid.splice(y, 1);
st.grid.unshift(new Array(COLS).fill(""));
}
st.clearedRows += 2;
const out = cnRef.current;
if (out) out.textContent = String(st.clearedRows);
if (reduced()) { draw(); drawSky(0); }
}
useEffect(() => {
const st = stRef.current;
st.grid = emptyGrid();
// 시작 쓰레기 — 아래 5줄, 줄마다 구멍 1칸
for (let gy0 = ROWS - 5; gy0 < ROWS; gy0++) {
const h0 = Math.floor(rndRef.current() * COLS);
for (let gx0 = 0; gx0 < COLS; gx0++) st.grid[gy0][gx0] = gx0 === h0 ? "" : TYPES[Math.floor(rndRef.current() * 7)];
}
refill();
fit();
function onResize(): void {
fit();
if (reduced()) { draw(); drawSky(0); }
}
window.addEventListener("resize", onResize);
if (reduced()) {
// 정지 한 장 — 터진 직후의 입자 몇 개를 정적으로 보인다
for (let k2 = 0; k2 < 30; k2++) {
st.particles.push({ x: rndRef.current() * COLS, y: 2 + rndRef.current() * 4, vx: 0, vy: 0, t: 9, c: k2 % 2 ? FILL.T : EDGE.T, sz: 0.12 + rndRef.current() * 0.1 });
}
draw(); drawSky(0);
setStill(true);
} else {
lastRef.current = performance.now();
rafRef.current = requestAnimationFrame(step);
}
return () => {
window.removeEventListener("resize", onResize);
cancelAnimationFrame(rafRef.current);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const rootCls = still ? styles.pt + " " + styles.isStill : styles.pt;
return (
<main className={styles.stage}>
<div className={rootCls} style={vars}>
<p className={styles.hint}>{HINT}</p>
<div className={styles.row}>
<div
className={styles.field}
ref={fieldRef}
role="application"
aria-label={ARIA_FIELD}
tabIndex={0}
onPointerDown={onPointerDown}
>
<canvas className={styles.cv} ref={cvRef}></canvas>
</div>
<div className={styles.side}>
<b className={styles.n} ref={pnRef} aria-live="polite">0</b>
<span className={styles.unit}>{UNIT}</span>
<p className={styles.c}>{C_PRE}<b ref={cnRef}>0</b>{C_POST}</p>
<div className={styles.sky} ref={skyRef} role="img" aria-label={ARIA_SKY}>
<canvas ref={scvRef}></canvas>
</div>
</div>
</div>
</div>
</main>
);
}08 Clear particles — erased cells bursting apart — Measured area 26.844% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · Tetris JavaScript: Build It in 9 Canvas Steps
The post this demo lives in
Tetris JavaScript: Build It in 9 Canvas StepsFalling blocks, stacking, line clears — computed from rotation matrices and collision checks. A Tetris built in nine ste See all demos in this post
