index.html
<html> |
|
<head> |
|
<title>Tetris</title> |
|
<style> |
|
body { |
|
background: #202028; |
|
color: #fff; |
|
font-family: sans-serif; |
|
font-size: 2em; |
|
text-align: center; |
|
} |
|
canvas { |
|
border: solid .2em #fff; |
|
height: 90vh; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="score"></div> |
|
<canvas id="tetris" width="240" height="400" /> |
|
<script src="tetris.js"></script> |
|
</body> |
|
</html> |
tetris.js
Codice: Seleziona tutto
const canvas = document.getElementById('tetris');const context = canvas.getContext('2d');
context.scale(20, 20);
function arenaSweep() { let rowCount = 1; outer: for (let y = arena.length -1; y > 0; --y) { for (let x = 0; x < arena[y].length; ++x) { if (arena[y][x] === 0) { continue outer; } }
const row = arena.splice(y, 1)[0].fill(0); arena.unshift(row); ++y;
player.score += rowCount * 10; rowCount *= 2; }}
function collide(arena, player) { const m = player.matrix; const o = player.pos; for (let y = 0; y < m.length; ++y) { for (let x = 0; x < m[y].length; ++x) { if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) { return true; } } } return false;}
function createMatrix(w, h) { const matrix = []; while (h--) { matrix.push(new Array(w).fill(0)); } return matrix;}
function createPiece(type){ if (type === 'I') { return [ [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], ]; } else if (type === 'L') { return [ [0, 2, 0], [0, 2, 0], [0, 2, 2], ]; } else if (type === 'J') { return [ [0, 3, 0], [0, 3, 0], [3, 3, 0], ]; } else if (type === 'O') { return [ [4, 4], [4, 4], ]; } else if (type === 'Z') { return [ [5, 5, 0], [0, 5, 5], [0, 0, 0], ]; } else if (type === 'S') { return [ [0, 6, 6], [6, 6, 0], [0, 0, 0], ]; } else if (type === 'T') { return [ [0, 7, 0], [7, 7, 7], [0, 0, 0], ]; }}
function drawMatrix(matrix, offset) { matrix.forEach((row, y) => { row.forEach((value, x) => { if (value !== 0) { context.fillStyle = colors[value]; context.fillRect(x + offset.x, y + offset.y, 1, 1); } }); });}
function draw() { context.fillStyle = '#000'; context.fillRect(0, 0, canvas.width, canvas.height);
drawMatrix(arena, {x: 0, y: 0}); drawMatrix(player.matrix, player.pos);}
function merge(arena, player) { player.matrix.forEach((row, y) => { row.forEach((value, x) => { if (value !== 0) { arena[y + player.pos.y][x + player.pos.x] = value; } }); });}
function rotate(matrix, dir) { for (let y = 0; y < matrix.length; ++y) { for (let x = 0; x < y; ++x) { [ matrix[x][y], matrix[y][x], ] = [ matrix[y][x], matrix[x][y], ]; } }
if (dir > 0) { matrix.forEach(row => row.reverse()); } else { matrix.reverse(); }}
function playerDrop() { player.pos.y++; if (collide(arena, player)) { player.pos.y--; merge(arena, player); playerReset(); arenaSweep(); updateScore(); } dropCounter = 0;}
function playerMove(offset) { player.pos.x += offset; if (collide(arena, player)) { player.pos.x -= offset; }}
function playerReset() { const pieces = 'TJLOSZI'; player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]); player.pos.y = 0; player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0); if (collide(arena, player)) { arena.forEach(row => row.fill(0)); player.score = 0; updateScore(); }}
function playerRotate(dir) { const pos = player.pos.x; let offset = 1; rotate(player.matrix, dir); while (collide(arena, player)) { player.pos.x += offset; offset = -(offset + (offset > 0 ? 1 : -1)); if (offset > player.matrix[0].length) { rotate(player.matrix, -dir); player.pos.x = pos; return; } }}
let dropCounter = 0;let dropInterval = 1000;
let lastTime = 0;function update(time = 0) { const deltaTime = time - lastTime;
dropCounter += deltaTime; if (dropCounter > dropInterval) { playerDrop(); }
lastTime = time;
draw(); requestAnimationFrame(update);}
function updateScore() { document.getElementById('score').innerText = player.score;}
document.addEventListener('keydown', event => { if (event.keyCode === 37) { playerMove(-1); } else if (event.keyCode === 39) { playerMove(1); } else if (event.keyCode === 40) { playerDrop(); } else if (event.keyCode === 81) { playerRotate(-1); } else if (event.keyCode === 87) { playerRotate(1); }});
const colors = [ null, '#FF0D72', '#0DC2FF', '#0DFF72', '#F538FF', '#FF8E0D', '#FFE138', '#3877FF',];
const arena = createMatrix(12, 20);
const player = { pos: {x: 0, y: 0}, matrix: null, score: 0,};
playerReset();updateScore();update();