<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tetris Touch</title>
<style>
body { background: #111; color: white; text-align: center; font-family: sans-
serif; margin: 0; padding: 0; }
canvas { background: #000; display: block; margin: 10px auto; border: 2px solid
white; }
#score { font-size: 1.5em; margin: 10px; }
.controls {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
button {
padding: 15px 20px;
font-size: 18px;
border-radius: 10px;
border: none;
background-color: #333;
color: white;
cursor: pointer;
min-width: 80px;
}
button:active {
background-color: #555;
}
</style>
</head>
<body>
<h1>Tetris</h1>
<canvas width="240" height="400" id="tetris"></canvas>
<div id="score">Puntos: 0</div>
<div class="controls">
<button onclick="playerMove(-1)">◀️</button>
<button onclick="playerDrop()">⬇️</button>
<button onclick="playerMove(1)">▶️</button>
<button onclick="playerRotate(1)">⟳</button>
</div>
<script>
const canvas = [Link]('tetris');
const context = [Link]('2d');
[Link](20, 20);
function arenaSweep() {
let rowCount = 1;
outer: for (let y = [Link] -1; y > 0; --y) {
for (let x = 0; x < arena[y].length; ++x) {
if (arena[y][x] === 0) {
continue outer;
}
}
const row = [Link](y, 1)[0].fill(0);
[Link](row);
++y;
[Link] += rowCount * 10;
rowCount *= 2;
}
}
function collide(arena, player) {
const [m, o] = [[Link], [Link]];
for (let y = 0; y < [Link]; ++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--) {
[Link](new Array(w).fill(0));
}
return matrix;
}
function createPiece(type) {
if (type === 'T') {
return [
[0, 0, 0],
[1, 1, 1],
[0, 1, 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 drawMatrix(matrix, offset) {
[Link]((row, y) => {
[Link]((value, x) => {
if (value !== 0) {
[Link] = colors[value];
[Link](x + offset.x, y + offset.y, 1, 1);
}
});
});
}
function draw() {
[Link] = '#000';
[Link](0, 0, [Link], [Link]);
drawMatrix(arena, {x:0, y:0});
drawMatrix([Link], [Link]);
}
function merge(arena, player) {
[Link]((row, y) => {
[Link]((value, x) => {
if (value !== 0) {
arena[y + [Link].y][x + [Link].x] = value;
}
});
});
}
function playerDrop() {
[Link].y++;
if (collide(arena, player)) {
[Link].y--;
merge(arena, player);
playerReset();
arenaSweep();
updateScore();
}
dropCounter = 0;
}
function playerMove(dir) {
[Link].x += dir;
if (collide(arena, player)) {
[Link].x -= dir;
}
}
function playerReset() {
const pieces = 'TJLOSZI';
[Link] = createPiece(pieces[[Link]([Link]() *
[Link])]);
[Link].y = 0;
[Link].x = (arena[0].length / 2 | 0) -
([Link][0].length / 2 | 0);
if (collide(arena, player)) {
[Link](row => [Link](0));
[Link] = 0;
updateScore();
}
}
function playerRotate(dir) {
const pos = [Link].x;
let offset = 1;
rotate([Link], dir);
while (collide(arena, player)) {
[Link].x += offset;
offset = -(offset + (offset > 0 ? 1 : -1));
if (offset > [Link][0].length) {
rotate([Link], -dir);
[Link].x = pos;
return;
}
}
}
function rotate(matrix, dir) {
for (let y = 0; y < [Link]; ++y) {
for (let x = 0; x < y; ++x) {
[matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
}
}
if (dir > 0) {
[Link](row => [Link]());
} else {
[Link]();
}
}
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);
}
function updateScore() {
[Link]('score').innerText = 'Puntos: ' + [Link];
}
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();
</script>
</body>
</html>
