body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #222;
}

canvas {
border: 1px solid #fff;
}

const canvas = document.getElementById(‘tetris’);
const ctx = canvas.getContext(‘2d’);
ctx.scale(20, 20);

function arenaSweep() {
outer: for (let y = arena.length – 1; y > 0; –y) {
for (let x = 0; x < arena[y].length; ++x) { if (!arena[y][x]) { continue outer; } } const row = arena.splice(y, 1)[0].fill(0); arena.unshift(row); ++y; } } function collide(arena, player) { const [m, o] = [player.matrix, player.pos]; for (let y = 0; y < m.length; ++y) { for (let x = 0; x < m[y].length; ++x) { if (m[y][x] && (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 === 'T') { return [ [1, 1, 1], [0, 1, 0], [0, 0, 0], ]; } else if (type === 'O') { return [ [2, 2], [2, 2], ]; } else if (type === 'L') { return [ [0, 3, 0], [0, 3, 0], [0, 3, 3], ]; } else if (type === 'J') { return [ [0, 4, 0], [0, 4, 0], [4, 4, 0], ]; } else if (type === 'I') { return [ [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0], ]; } else if (type === 'S') { return [ [0, 6, 6], [6, 6, 0], [0, 0, 0], ]; } else if (type === 'Z') { return [ [7, 7, 0], [0, 7, 7], [0, 0, 0], ]; } } function draw() { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); drawMatrix(arena, { x: 0, y: 0 }); drawMatrix(player.matrix, player.pos); } function drawMatrix(matrix, offset) { matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
ctx.fillStyle = ‘red’;
ctx.fillRect(x + offset.x, y + offset.y, 1, 1);
}
});
});
}

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 playerDrop() {
player.pos.y++;
if (collide(arena, player)) {
player.pos.y–;
merge(arena, player);
playerReset();
arenaSweep();
}
dropCounter = 0;
}

function playerMove(offset) {
player.pos.x += offset;
if (collide(arena, player)) {
player.pos.x -= offset;
}
}

function playerReset() {
const pieces = ‘TOLJSIZ’;
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));
}
}

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;
}
}
}

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();
}
}

let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;

function update(time = 0) {
const deltaTime = time – lastTime;
lastTime = time;
dropCounter += deltaTime;

if (dropCounter > dropInterval) {
playerDrop();
}

draw();
requestAnimationFrame(update);
}

const arena = createMatrix(10, 20);
const player = {
pos: {x: 0, y: 0 },
matrix: null,
};

document.addEventListener(‘keydown’, (event) => {
if (event.key === ‘ArrowLeft’) {
playerMove(-1);
} else if (event.key === ‘ArrowRight’) {
playerMove(1);
} else if (event.key === ‘ArrowDown’) {
playerDrop();
} else if (event.key === ‘ArrowUp’) {
playerRotate(1);
}
});

playerReset();
update();

Leave a comment

Your email address will not be published. Required fields are marked *