Tetris

const COLS = 10, ROWS = 20;
const COLORS = { I:"#00f0f0", O:"#f0f000", T:"#a000f0", S:"#00f000", Z:"#f00000", J:"#0000f0", L:"#f0a000" };
const SHAPES = {
  I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
  O: [[1,1],[1,1]],
  T: [[0,1,0],[1,1,1],[0,0,0]],
  S: [[0,1,1],[1,1,0],[0,0,0]],
  Z: [[1,1,0],[0,1,1],[0,0,0]],
  J: [[1,0,0],[1,1,1],[0,0,0]],
  L: [[0,0,1],[1,1,1],[0,0,0]],
};
const KEYS = Object.keys(SHAPES);

let W = 0, H = 0;
let grid, cur, nxt;
let score, lines, level, fall, fallStep;
let dasL, dasR, lockTimer, gameOver;
let touchActive, touchStartY;

function newPiece(k) {
  const m = SHAPES[k].map(r => r.slice());
  return { k, m, x: ((COLS - m[0].length) / 2) | 0, y: k === "I" ? -1 : 0 };
}
function randKey() { return KEYS[(Math.random() * KEYS.length) | 0]; }

function cellAt(x, y) {
  if (x < 0 || x >= COLS || y >= ROWS) return 1;
  if (y < 0) return 0;
  return grid[y * COLS + x];
}
function collides(p) {
  for (let j = 0; j < p.m.length; j++)
    for (let i = 0; i < p.m[j].length; i++)
      if (p.m[j][i] && cellAt(p.x + i, p.y + j)) return true;
  return false;
}
function merge(p) {
  for (let j = 0; j < p.m.length; j++)
    for (let i = 0; i < p.m[j].length; i++)
      if (p.m[j][i] && p.y + j >= 0) grid[(p.y + j) * COLS + (p.x + i)] = p.k;
}
function clearLines() {
  let cleared = 0;
  for (let y = ROWS - 1; y >= 0; y--) {
    let full = true;
    for (let x = 0; x < COLS; x++) if (!grid[y * COLS + x]) { full = false; break; }
    if (full) {
      for (let yy = y; yy > 0; yy--)
        for (let x = 0; x < COLS; x++) grid[yy * COLS + x] = grid[(yy - 1) * COLS + x];
      for (let x = 0; x < COLS; x++) grid[x] = 0;
      cleared++; y++;
    }
  }
  if (cleared) {
    score += [0, 100, 300, 500, 800][cleared] * (level + 1);
    lines += cleared;
    level = (lines / 10) | 0;
    fallStep = Math.max(0.05, Math.pow(0.85, level));
  }
}
function rotate(m) {
  const n = m.length, r = Array.from({ length: n }, () => new Array(n).fill(0));
  for (let j = 0; j < n; j++) for (let i = 0; i < n; i++) r[i][n - 1 - j] = m[j][i];
  return r;
}
function tryRotate() {
  const oldM = cur.m, oldX = cur.x;
  cur.m = rotate(cur.m);
  for (const k of [0, -1, 1, -2, 2]) { cur.x = oldX + k; if (!collides(cur)) return; }
  cur.m = oldM; cur.x = oldX;
}
function spawn() {
  cur = nxt || newPiece(randKey());
  nxt = newPiece(randKey());
  fall = 0; lockTimer = 0;
  if (collides(cur)) gameOver = true;
}
function hardDrop() {
  let d = 0;
  while (!collides({ ...cur, y: cur.y + 1 })) { cur.y++; d++; }
  score += d * 2;
  merge(cur); clearLines(); spawn();
}
function softMove(dx) { cur.x += dx; if (collides(cur)) cur.x -= dx; }

function reset() {
  grid = new Array(COLS * ROWS).fill(0);
  score = 0; lines = 0; level = 0;
  fallStep = 0.8; fall = 0;
  dasL = 0; dasR = 0; lockTimer = 0; gameOver = false;
  nxt = null; touchActive = false; touchStartY = 0;
  spawn();
}
function init({ width, height }) { W = width; H = height; reset(); }

function boardMetrics() {
  const pad = 10;
  const hudW = Math.min(150, Math.max(96, W * 0.26));
  const cell = Math.max(8, Math.min(((W - pad * 3 - hudW) / COLS) | 0, ((H - pad * 2) / ROWS) | 0));
  const bw = cell * COLS, bh = cell * ROWS;
  const bx = pad, by = ((H - bh) / 2) | 0;
  return { cell, bx, by, bw, bh, hx: bx + bw + pad, hy: by, hudW };
}
function drawCell(ctx, x, y, c, cell) {
  ctx.fillStyle = c; ctx.fillRect(x, y, cell, cell);
  ctx.fillStyle = "rgba(255,255,255,0.25)";
  ctx.fillRect(x, y, cell, 2); ctx.fillRect(x, y, 2, cell);
  ctx.fillStyle = "rgba(0,0,0,0.35)";
  ctx.fillRect(x, y + cell - 2, cell, 2); ctx.fillRect(x + cell - 2, y, 2, cell);
}
function drawPiece(ctx, p, bx, by, cell, alpha) {
  ctx.globalAlpha = alpha;
  for (let j = 0; j < p.m.length; j++)
    for (let i = 0; i < p.m[j].length; i++)
      if (p.m[j][i] && p.y + j >= 0)
        drawCell(ctx, bx + (p.x + i) * cell, by + (p.y + j) * cell, COLORS[p.k], cell);
  ctx.globalAlpha = 1;
}
function render(ctx) {
  const { cell, bx, by, bw, bh, hx, hy, hudW } = boardMetrics();
  ctx.fillStyle = "#0a0a0f"; ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = "#15151c"; ctx.fillRect(bx, by, bw, bh);
  ctx.strokeStyle = "rgba(255,255,255,0.08)"; ctx.lineWidth = 1;
  for (let x = 1; x < COLS; x++) { ctx.beginPath(); ctx.moveTo(bx + x * cell + 0.5, by); ctx.lineTo(bx + x * cell + 0.5, by + bh); ctx.stroke(); }
  for (let y = 1; y < ROWS; y++) { ctx.beginPath(); ctx.moveTo(bx, by + y * cell + 0.5); ctx.lineTo(bx + bw, by + y * cell + 0.5); ctx.stroke(); }
  for (let y = 0; y < ROWS; y++) for (let x = 0; x < COLS; x++) {
    const c = grid[y * COLS + x];
    if (c) drawCell(ctx, bx + x * cell, by + y * cell, COLORS[c], cell);
  }
  if (!gameOver) {
    const ghost = { ...cur, m: cur.m, y: cur.y };
    while (!collides({ ...ghost, y: ghost.y + 1 })) ghost.y++;
    drawPiece(ctx, ghost, bx, by, cell, 0.25);
    drawPiece(ctx, cur, bx, by, cell, 1);
  }
  ctx.strokeStyle = "rgba(255,255,255,0.35)";
  ctx.strokeRect(bx + 0.5, by + 0.5, bw - 1, bh - 1);

  ctx.fillStyle = "#fff"; ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  ctx.font = "bold 12px ui-sans-serif, system-ui"; ctx.fillText("SCORE", hx, hy + 12);
  ctx.font = "bold 18px ui-sans-serif, system-ui"; ctx.fillText(String(score), hx, hy + 32);
  ctx.font = "bold 11px ui-sans-serif, system-ui"; ctx.fillText("LEVEL", hx, hy + 52);
  ctx.font = "bold 15px ui-sans-serif, system-ui"; ctx.fillText(String(level), hx, hy + 68);
  ctx.font = "bold 11px ui-sans-serif, system-ui"; ctx.fillText("LINES", hx, hy + 86);
  ctx.font = "bold 15px ui-sans-serif, system-ui"; ctx.fillText(String(lines), hx, hy + 102);
  ctx.font = "bold 11px ui-sans-serif, system-ui"; ctx.fillText("NEXT", hx, hy + 124);

  const nc = Math.max(8, Math.min(cell - 2, ((hudW - 8) / 4) | 0));
  const nx0 = hx, ny0 = hy + 130;
  ctx.fillStyle = "#15151c"; ctx.fillRect(nx0, ny0, nc * 4 + 4, nc * 4 + 4);
  if (nxt) for (let j = 0; j < nxt.m.length; j++) for (let i = 0; i < nxt.m[j].length; i++)
    if (nxt.m[j][i]) drawCell(ctx, nx0 + 2 + i * nc, ny0 + 2 + j * nc, COLORS[nxt.k], nc);

  if (gameOver) {
    ctx.fillStyle = "rgba(0,0,0,0.78)"; ctx.fillRect(bx, by + bh / 2 - 40, bw, 80);
    ctx.fillStyle = "#fff"; ctx.textAlign = "center";
    ctx.font = "bold 22px ui-sans-serif, system-ui"; ctx.fillText("GAME OVER", bx + bw / 2, by + bh / 2 - 6);
    ctx.font = "12px ui-sans-serif, system-ui"; ctx.fillText("tap or press a key to restart", bx + bw / 2, by + bh / 2 + 18);
  }
}

function handleTouch(input, bx, bw) {
  for (const c of input.consumeClicks()) {
    if (gameOver) { reset(); return; }
    if (c.x < bx || c.x > bx + bw) continue;
    const rx = (c.x - bx) / bw;
    if (rx < 0.35) softMove(-1);
    else if (rx > 0.65) softMove(1);
    else tryRotate();
  }
  if (input.mouseDown && !touchActive) { touchActive = true; touchStartY = input.mouseY; }
  else if (!input.mouseDown && touchActive) {
    if (input.mouseY - touchStartY > 60 && !gameOver) hardDrop();
    touchActive = false;
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  const { bx, bw } = boardMetrics();

  if (gameOver) {
    for (const k of ["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"," ","Enter"])
      if (input.justPressed(k)) { reset(); break; }
    handleTouch(input, bx, bw);
    render(ctx);
    return;
  }

  if (input.justPressed("ArrowLeft")) { softMove(-1); dasL = 0.18; }
  else if (input.keyDown("ArrowLeft")) { dasL -= dt; if (dasL <= 0) { softMove(-1); dasL = 0.05; } }
  else dasL = 0;

  if (input.justPressed("ArrowRight")) { softMove(1); dasR = 0.18; }
  else if (input.keyDown("ArrowRight")) { dasR -= dt; if (dasR <= 0) { softMove(1); dasR = 0.05; } }
  else dasR = 0;

  if (input.justPressed("ArrowUp")) tryRotate();
  if (input.justPressed(" ")) hardDrop();

  const softOn = input.keyDown("ArrowDown");
  handleTouch(input, bx, bw);

  fall += dt * (softOn ? Math.max(20, 1 / fallStep) : 1);
  while (fall >= fallStep) {
    fall -= fallStep;
    cur.y++;
    if (collides(cur)) {
      cur.y--;
      lockTimer += fallStep;
      if (lockTimer >= 0.5) { merge(cur); clearLines(); spawn(); }
      break;
    } else {
      lockTimer = 0;
      if (softOn) score += 1;
    }
  }

  render(ctx);
}