Créame un juego tipo tetris's game

Click here for free DL of the app version that can save data.

No:37021

←

Prev Next

→

Créame un juego tipo tetris
Developer User16957｜Date and time 24/1/19 23:03:29
Build time 32.205 sec｜Game capacity 7.39KB｜

Script

Claro, aquí tienes un juego de Tetris simple implementado en un solo archivo HTML:

Para jugar al juego, solo necesitas abrir el archivo HTML en un navegador. Puedes mover las piezas hacia la izquierda usando la tecla de flecha izquierda, hacia la derecha usando la tecla de flecha derecha, rotar las piezas con la tecla de flecha hacia arriba y hacer que las piezas caigan más rápido con la tecla de flecha hacia abajo. El juego terminará cuando las piezas apilen hasta la parte superior de la pantalla. Espero que disfrutes el juego de Tetris hecho con pictogramas. ¡Diviértete!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

Claro, aquí tienes un juego de Tetris simple implementado en un solo archivo HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      overflow: hidden;
      background-color: #e6e6e6;
    }

canvas {
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="200" height="400"></canvas>

const blockSize = 20; // Tamaño de cada bloque
      const columns = canvasWidth / blockSize;
      const rows = canvasHeight / blockSize;

let grid = createGrid();
      let currentPiece = createPiece();
      let intervalId;

// Crear la cuadrícula inicial vacía
      function createGrid() {
        const grid = [];
        for (let row = 0; row < rows; row++) {
          grid[row] = [];
          for (let col = 0; col < columns; col++) {
            grid[row][col] = 0;
          }
        }
        return grid;
      }

// Crear una nueva pieza de Tetris aleatoria
      function createPiece() {
        const pieces = [
          [[1, 1, 1, 1]], // I
          [[2, 2], [2, 2]], // O
          [[0, 3, 0], [3, 3, 3]], // L
          [[0, 4, 0], [0, 4, 4]], // J
          [[0, 5, 5], [5, 5, 0]], // S
          [[6, 6, 0], [0, 6, 6]], // Z
          [[7, 7, 7], [0, 7, 0]] // T
        ];

const randomPieceIndex = Math.floor(Math.random() * pieces.length);
        const piece = pieces[randomPieceIndex];
        return {
          matrix: piece,
          row: -1, // La fila desde la que empezará a caer la pieza
          col: Math.floor(columns / 2) - Math.floor(piece[0].length / 2) // La columna desde la que empezará a caer la pieza
        };
      }

// Dibujar la cuadrícula y las piezas
      function draw() {
        context.clearRect(0, 0, canvasWidth, canvasHeight);

// Dibujar la cuadrícula
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < columns; col++) {
            drawBlock(col, row, grid[row][col]);
          }
        }

// Dibujar la pieza actual
        for (let row = 0; row < currentPiece.matrix.length; row++) {
          for (let col = 0; col < currentPiece.matrix[row].length; col++) {
            if (currentPiece.matrix[row][col]) {
              drawBlock(currentPiece.col + col, currentPiece.row + row, currentPiece.matrix[row][col]);
            }
          }
        }
      }

// Dibujar un bloque
      function drawBlock(col, row, color) {
        const x = col * blockSize;
        const y = row * blockSize;

context.fillStyle = getBlockColor(color);
        context.fillRect(x, y, blockSize, blockSize);
        context.strokeStyle = '#ccc';
        context.strokeRect(x, y, blockSize, blockSize);
      }

// Obtener el color de un bloque según su número
      function getBlockColor(number) {
        switch (number) {
          case 1: return 'cyan';
          case 2: return 'yellow';
          case 3: return 'orange';
          case 4: return 'blue';
          case 5: return 'green';
          case 6: return 'red';
          case 7: return 'purple';
          default: return 'white';
        }
      }

// Mover la pieza hacia abajo
      function moveDown() {
        if (isValidMove(0, 1)) {
          currentPiece.row++;
        } else {
          placePiece();
          checkForLines();
          currentPiece = createPiece();

if (!isValidMove(0, 0)) {
            clearInterval(intervalId);
            alert('¡Fin del juego!');
          }
        }
      }

// Mover la pieza a la izquierda
      function moveLeft() {
        if (isValidMove(-1, 0)) {
          currentPiece.col--;
        }
      }

// Mover la pieza a la derecha
      function moveRight() {
        if (isValidMove(1, 0)) {
          currentPiece.col++;
        }
      }

// Rotar la pieza
      function rotate() {
        const originalMatrix = currentPiece.matrix;
        const rotatedMatrix = [];
        for (let i = 0; i < originalMatrix[0].length; i++) {
          rotatedMatrix[i] = [];
          for (let j = 0; j < originalMatrix.length; j++) {
            rotatedMatrix[i][j] = originalMatrix[originalMatrix.length - 1 - j][i];
          }
        }
        currentPiece.matrix = rotatedMatrix;

if (!isValidMove(0, 0)) {
          currentPiece.matrix = originalMatrix;
        }
      }

// Verificar si el movimiento de la pieza actual es válido
      function isValidMove(offsetX, offsetY) {
        for (let row = 0; row < currentPiece.matrix.length; row++) {
          for (let col = 0; col < currentPiece.matrix[row].length; col++) {
            if (currentPiece.matrix[row][col]) {
              const newX = currentPiece.col + col + offsetX;
              const newY = currentPiece.row + row + offsetY;

if (newX < 0 || newX >= columns || newY >= rows || grid[newY][newX]) {
                return false;
              }
            }
          }
        }
        return true;
      }

// Colocar la pieza actual en la cuadrícula
      function placePiece() {
        for (let row = 0; row < currentPiece.matrix.length; row++) {
          for (let col = 0; col < currentPiece.matrix[row].length; col++) {
            if (currentPiece.matrix[row][col]) {
              grid[currentPiece.row + row][currentPiece.col + col] = currentPiece.matrix[row][col];
            }
          }
        }
      }

// Verificar si hay líneas completas y eliminarlas
      function checkForLines() {
        for (let row = rows - 1; row >= 0; row--) {
          if (grid[row].every(cell => cell !== 0)) {
            grid.splice(row, 1);
            grid.unshift(Array(columns).fill(0));
          }
        }
      }

// Manejar los eventos de teclado
      function handleKeyPress(event) {
        event.preventDefault();

if (event.key === 'ArrowUp') {
          rotate();
        } else if (event.key === 'ArrowDown') {
          moveDown();
        } else if (event.key === 'ArrowLeft') {
          moveLeft();
        } else if (event.key === 'ArrowRight') {
          moveRight();
        }
      }

// Iniciar el juego
      function startGame() {
        document.addEventListener('keydown', handleKeyPress);
        intervalId = setInterval(() => {
          moveDown();
          draw();
        }, 500);
      }

// Iniciar el juego cuando el contenido del documento esté cargado
      startGame();
    });
  </script>
</body>
</html>
```