Scribd
Upload
18 views5 pages

Tetris

This document is an HTML code for a Tetris game titled 'Tetris Touch'. It includes styling for the game interface, a canvas for the game display, and JavaScript functions to handle game mechanics such as piece movement, collision detection, and score updating. The game allows players to control Tetris pieces using buttons for movement and rotation.

Uploaded by

38grados
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views5 pages

Tetris

This document is an HTML code for a Tetris game titled 'Tetris Touch'. It includes styling for the game interface, a canvas for the game display, and JavaScript functions to handle game mechanics such as piece movement, collision detection, and score updating. The game allows players to control Tetris pieces using buttons for movement and rotation.

Uploaded by

38grados
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

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 = 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, 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] !== 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 === '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) {


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

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

function playerReset() {
const pieces = 'TJLOSZI';
player.matrix = createPiece(pieces[Math.floor(Math.random() *
pieces.length)]);
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;
}
}
}

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

function updateScore() {
document.getElementById('score').innerText = 'Puntos: ' + player.score;
}

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>

You might also like