Tetris Style Game – Falling Blocks in JavaScript

77 0 Games codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Tetris Style Game – Falling Blocks in JavaScript

<div class="wrap">
  <div class="side left">
    <div class="box"><small>HOLD</small><canvas id="hold" width="96" height="96"></canvas></div>
    <div class="box"><small>SCORE</small><b id="score">0</b></div>
    <div class="box"><small>LINES</small><b id="lines">0</b></div>
    <div class="box"><small>LEVEL</small><b id="level">1</b></div>
  </div>
  <div class="well"><canvas id="c" width="300" height="600"></canvas>
    <div class="ov" id="ov"><h1>BLOCKS</h1><p>Tetris-style falling blocks game</p><p class="k">← → move · ↑ rotate · ↓ soft drop<br>Space hard drop · C hold · P pause</p><p id="msg"></p><button id="go">▶ START</button></div>
  </div>
  <div class="side">
    <div class="box"><small>NEXT</small><canvas id="next" width="96" height="260"></canvas></div>
    <div class="box"><small>BEST</small><b id="best">0</b></div>
  </div>
</div>
<div class="touch"><button data-a="left">◀</button><button data-a="rot">⟳</button><button data-a="right">▶</button><button data-a="down">▼</button><button data-a="drop">⤓</button><button data-a="hold">H</button></div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 0, #24245c, #0a0a1f); color: #fff; font-family: "Segoe UI", system-ui, sans-serif; padding: 10px; touch-action: manipulation; user-select: none; }
.wrap { display: flex; gap: 14px; align-items: flex-start; }
.well { position: relative; }
#c.flash { box-shadow: 0 0 60px #fff; }
#c { height: min(78vh, 600px); aspect-ratio: 1/2; display: block; background: #0d0d26; border: 3px solid #3b3b8a; border-radius: 8px; box-shadow: 0 0 40px rgba(90,90,255,.3); }
.side { display: flex; flex-direction: column; gap: 10px; width: 100px; }
.box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 8px; text-align: center; }
.box small { font-size: .65rem; letter-spacing: 2px; opacity: .6; display: block; margin-bottom: 4px; }
.box b { font-size: 1.2rem; } .box canvas { width: 100%; display: block; }
.ov { position: absolute; inset: 0; background: rgba(10,10,31,.88); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 14px; }
.ov.hide { display: none; }
.ov h1 { font-size: 2.6rem; letter-spacing: 6px; background: linear-gradient(90deg, #00f0f0, #f0f000, #f000f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k { font-size: .8rem; opacity: .65; line-height: 1.7; } #msg { color: #ffd166; font-weight: 700; }
#go { border: 0; border-radius: 10px; padding: 12px 30px; font-weight: 800; font-size: 1.1rem; background: #6c5ce7; color: #fff; cursor: pointer; }
.touch { display: none; gap: 8px; }
.touch button { width: 52px; height: 52px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1.3rem; }
@media (hover: none) { .touch { display: flex; } }
@media (max-width: 520px) { .wrap { gap: 8px; } .side { width: 60px; } .box { padding: 5px; } .box b { font-size: .85rem; } #c { height: min(64vh, 600px, calc((100vw - 160px) * 2)); } }

// Tetris-style falling blocks game: 7-bag randomizer, SRS-like wall kicks, hold, next queue, ghost piece, levels, line clear flash
var cv = document.getElementById('c'), ctx = cv.getContext('2d'), COLS = 10, ROWS = 20, S = 30;
var SH = { 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]] };
var COL = { I: '#00e5ff', O: '#ffd60a', T: '#b14cff', S: '#2ee66b', Z: '#ff3b5c', J: '#3d7bff', L: '#ff9f1c' };
var grid, cur, bag = [], queue = [], hold = null, canHold, score, lines, level, dropT, acc, running = false, paused = false, flash = [], best = 0;
try { best = +localStorage.getItem('blocks-best') || 0; } catch (e) {}
document.getElementById('best').textContent = best;
function nextType() { if (!bag.length) bag = Object.keys(SH).sort(function () { return Math.random() - .5; }); return bag.pop(); }
function spawn(t) { var m = SH[t].map(function (r) { return r.slice(); }); return { t: t, m: m, x: (COLS - m.length) / 2 | 0, y: t === 'I' ? -1 : 0 }; }
function collide(p, m, x, y) { for (var r = 0; r < m.length; r++) for (var c = 0; c < m.length; c++) if (m[r][c]) { var X = x + c, Y = y + r; if (X < 0 || X >= COLS || Y >= ROWS || (Y >= 0 && grid[Y][X])) return true; } return false; }
function rotate(m, d) { var n = m.length, o = m.map(function (r) { return r.slice(); }); for (var r = 0; r < n; r++) for (var c = 0; c < n; c++) o[r][c] = d > 0 ? m[n - 1 - c][r] : m[c][n - 1 - r]; return o; }
function tryRotate(d) { var m = rotate(cur.m, d), kicks = [[0, 0], [-1, 0], [1, 0], [0, -1], [-2, 0], [2, 0]]; for (var i = 0; i < kicks.length; i++) if (!collide(cur, m, cur.x + kicks[i][0], cur.y + kicks[i][1])) { cur.m = m; cur.x += kicks[i][0]; cur.y += kicks[i][1]; return; } }
function newPiece() { while (queue.length < 4) queue.push(nextType()); cur = spawn(queue.shift()); canHold = true; if (collide(cur, cur.m, cur.x, cur.y)) gameOver(); drawSide(); }
function lock() {
  cur.m.forEach(function (row, r) { row.forEach(function (v, c) { if (v) { if (cur.y + r < 0) return gameOver(); grid[cur.y + r][cur.x + c] = cur.t; } }); });
  if (!running) return;
  var full = []; for (var r = 0; r < ROWS; r++) if (grid[r].every(Boolean)) full.push(r);
  if (full.length) {
    full.forEach(function (r) { grid.splice(r, 1); grid.unshift(new Array(COLS).fill(null)); });
    cv.classList.add('flash'); setTimeout(function () { cv.classList.remove('flash'); }, 150);
    lines += full.length; score += [0, 100, 300, 500, 800][full.length] * level;
    level = 1 + (lines / 10 | 0); dropT = Math.max(70, 800 - (level - 1) * 70); hud();
  }
  newPiece();
}
function move(dx) { if (!collide(cur, cur.m, cur.x + dx, cur.y)) cur.x += dx; }
function soft() { if (!collide(cur, cur.m, cur.x, cur.y + 1)) { cur.y++; score += 1; hud(); } else lock(); acc = 0; }
function hard() { var n = 0; while (!collide(cur, cur.m, cur.x, cur.y + 1)) { cur.y++; n++; } score += n * 2; hud(); lock(); acc = 0; }
function doHold() { if (!canHold) return; var t = cur.t; if (hold) { cur = spawn(hold); } else newPiece(); hold = t; canHold = false; drawSide(); }
function hud() {
  document.getElementById('score').textContent = score; document.getElementById('lines').textContent = lines; document.getElementById('level').textContent = level;
  if (score > best) { best = score; document.getElementById('best').textContent = best; try { localStorage.setItem('blocks-best', best); } catch (e) {} }
}
function cell(c, x, y, col, s, ghost) {
  s = s || S;
  if (ghost) { c.strokeStyle = col; c.globalAlpha = .45; c.lineWidth = 2; c.strokeRect(x * s + 2, y * s + 2, s - 4, s - 4); c.globalAlpha = 1; return; }
  c.fillStyle = col; c.fillRect(x * s + 1, y * s + 1, s - 2, s - 2);
  c.fillStyle = 'rgba(255,255,255,.35)'; c.fillRect(x * s + 1, y * s + 1, s - 2, 4);
  c.fillStyle = 'rgba(0,0,0,.25)'; c.fillRect(x * s + 1, y * s + s - 5, s - 2, 4);
}
function draw() {
  ctx.fillStyle = '#0d0d26'; ctx.fillRect(0, 0, cv.width, cv.height);
  ctx.strokeStyle = 'rgba(255,255,255,.04)';
  for (var x = 1; x < COLS; x++) { ctx.beginPath(); ctx.moveTo(x * S, 0); ctx.lineTo(x * S, cv.height); ctx.stroke(); }
  for (var y = 1; y < ROWS; y++) { ctx.beginPath(); ctx.moveTo(0, y * S); ctx.lineTo(cv.width, y * S); ctx.stroke(); }
  grid.forEach(function (row, r) { row.forEach(function (v, c) { if (v) cell(ctx, c, r, flash.indexOf(r) > -1 ? '#fff' : COL[v]); }); });
  if (cur && running) {
    var gy = cur.y; while (!collide(cur, cur.m, cur.x, gy + 1)) gy++;
    cur.m.forEach(function (row, r) { row.forEach(function (v, c) { if (v && gy + r >= 0) cell(ctx, cur.x + c, gy + r, COL[cur.t], S, true); }); });
    cur.m.forEach(function (row, r) { row.forEach(function (v, c) { if (v && cur.y + r >= 0) cell(ctx, cur.x + c, cur.y + r, COL[cur.t]); }); });
  }
  if (paused) { ctx.fillStyle = 'rgba(0,0,0,.6)'; ctx.fillRect(0, 0, cv.width, cv.height); ctx.fillStyle = '#fff'; ctx.font = 'bold 30px Segoe UI'; ctx.textAlign = 'center'; ctx.fillText('PAUSED', cv.width / 2, cv.height / 2); }
}
function mini(canvas, types) {
  var c = canvas.getContext('2d'); c.clearRect(0, 0, canvas.width, canvas.height);
  types.forEach(function (t, i) { if (!t) return; var m = SH[t], s = 20, w = m.length * s, ox = (canvas.width - w) / 2 / s, oy = i * 3.2 + (t === 'I' ? .2 : .6);
    m.forEach(function (row, r) { row.forEach(function (v, cc) { if (v) cell(c, ox + cc, oy + r, COL[t], s); }); }); });
}
function drawSide() { mini(document.getElementById('next'), queue.slice(0, 3)); mini(document.getElementById('hold'), [hold]); }
function start() {
  grid = []; for (var r = 0; r < ROWS; r++) grid.push(new Array(COLS).fill(null));
  bag = []; queue = []; hold = null; score = 0; lines = 0; level = 1; dropT = 800; acc = 0; running = true; paused = false;
  hud(); newPiece(); document.getElementById('ov').classList.add('hide');
}
function gameOver() { running = false; document.getElementById('msg').textContent = 'GAME OVER · ' + score + ' pts'; document.getElementById('go').textContent = '↻ PLAY AGAIN'; document.getElementById('ov').classList.remove('hide'); }
function act(a) {
  if (!running || paused) return;
  if (a === 'left') move(-1); if (a === 'right') move(1); if (a === 'rot') tryRotate(1); if (a === 'ccw') tryRotate(-1);
  if (a === 'down') soft(); if (a === 'drop') hard(); if (a === 'hold') doHold();
}
var KM = { ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'rot', KeyX: 'rot', KeyZ: 'ccw', ArrowDown: 'down', Space: 'drop', KeyC: 'hold', ShiftLeft: 'hold' };
addEventListener('keydown', function (e) {
  if (KM[e.code]) { e.preventDefault(); act(KM[e.code]); }
  if (e.code === 'KeyP' && running) paused = !paused;
  if (e.code === 'Enter' && !running) start();
});
document.querySelectorAll('.touch button').forEach(function (b) { b.addEventListener('pointerdown', function (e) { e.preventDefault(); act(b.dataset.a); }); });
document.getElementById('go').onclick = start;
var last = 0;
function loop(t) {
  var dt = t - last; last = t;
  if (running && !paused) { acc += dt; if (acc > dropT) { acc = 0; if (!collide(cur, cur.m, cur.x, cur.y + 1)) cur.y++; else lock(); } }
  if (grid) draw();
  requestAnimationFrame(loop);
}
grid = []; for (var r = 0; r < ROWS; r++) grid.push(new Array(COLS).fill(null));
requestAnimationFrame(loop);

Comments 0

…

Tetris Style Game – Falling Blocks in JavaScript

Recommended

Comments 0