AI game creator

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

No:10709

110

←

Prev Next

→

A two-sided Tetris
Developer User3408｜Date and time 23/8/2 6:14:00
Build time 55.42 sec｜Game capacity 6.733KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris de Dos Lados</title>
</head>
<body>
    <canvas id="tetrisCanvas" width="400" height="800"></canvas>
    <script>
        // Configuración del juego
        const blockSize = 40; // Tamaño de cada bloque en píxeles
        const rows = 20; // Número de filas del tablero
        const columns = 10; // Número de columnas del tablero
        
        // Colores de las piezas
        const colors = {
          I: "#00FFFF",
          J: "#0000FF",
          L: "#FFA500",
          O: "#FFFF00",
          S: "#00FF00",
          T: "#800080",
          Z: "#FF0000"
        };
        
        // Matriz para representar el tablero del Tetris
        let tetrisBoard = [];
        for (let row = 0; row < rows; row++) {
          tetrisBoard[row] = [];
          for (let col = 0; col < columns; col++) {
            tetrisBoard[row][col] = 0;
          }
        }
        
        const canvas = document.getElementById("tetrisCanvas");
        const ctx = canvas.getContext("2d");
        const scoreDisplay = document.getElementById("score");
        
        // Dibujar el tablero
        function drawBoard() {
          for (let row = 0; row < rows; row++) {
            for (let col = 0; col < columns; col++) {
              drawBlock(col, row, tetrisBoard[row][col]);
            }
          }
        }
        
        // Dibujar un bloque en el canvas
        function drawBlock(x, y, colorIndex) {
          ctx.fillStyle = colors[colorIndex];
          ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
          ctx.strokeStyle = "#000";
          ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }
        
        // Piezas del Tetris
        const pieces = {
          I: [[1, 1, 1, 1]],
          J: [[1, 1, 1], [0, 0, 1]],
          L: [[1, 1, 1], [1, 0, 0]],
          O: [[1, 1], [1, 1]],
          S: [[0, 1, 1], [1, 1, 0]],
          T: [[1, 1, 1], [0, 1, 0]],
          Z: [[1, 1, 0], [0, 1, 1]]
        };
        
        // Generar una nueva pieza al azar
        function generateRandomPiece() {
          const pieceKeys = Object.keys(pieces);
          const randomKey = pieceKeys[Math.floor(Math.random() * pieceKeys.length)];
          return pieces[randomKey];
        }
        
        let currentPiece = generateRandomPiece();
        let currentPieceX = Math.floor(columns / 2) - Math.floor(currentPiece[0].length / 2);
        let currentPieceY = 0;
        
        // Dibujar la pieza actual en el tablero
        function drawCurrentPiece() {
          for (let row = 0; row < currentPiece.length; row++) {
            for (let col = 0; col < currentPiece[row].length; col++) {
              if (currentPiece[row][col]) {
                drawBlock(currentPieceX + col, currentPieceY + row, "T");
              }
            }
          }
        }
        
        // Mover la pieza actual hacia abajo
        function moveDown() {
          if (collision(0, 1, currentPiece)) {
            mergePiece();
            if (currentPieceY === 0) {
              gameOver();
            } else {
              currentPiece = generateRandomPiece();
              currentPieceX = Math.floor(columns / 2) - Math.floor(currentPiece[0].length / 2);
              currentPieceY = 0;
            }
          } else {
            currentPieceY++;
          }
        }
        
        // Mover la pieza actual hacia la izquierda
        function moveLeft() {
          if (!collision(-1, 0, currentPiece)) {
            currentPieceX--;
          }
        }
        
        // Mover la pieza actual hacia la derecha
        function moveRight() {
          if (!collision(1, 0, currentPiece)) {
            currentPieceX++;
          }
        }
        
        // Rotar la pieza actual
        function rotatePiece() {
          const rotatedPiece = [];
          for (let row = 0; row < currentPiece[0].length; row++) {
            rotatedPiece[row] = [];
            for (let col = 0; col < currentPiece.length; col++) {
              rotatedPiece[row][col] = currentPiece[currentPiece.length - 1 - col][row];
            }
          }
          if (!collision(0, 0, rotatedPiece)) {
            currentPiece = rotatedPiece;
          }
        }
        
        // Verificar si hay colisión entre la pieza actual y el tablero
        function collision(deltaX, deltaY, piece) {
          for (let row = 0; row < piece.length; row++) {
            for (let col = 0; col < piece[row].length; col++) {
              if (piece[row][col]) {
                const newX = currentPieceX + col + deltaX;
                const newY = currentPieceY + row + deltaY;
                if (newX < 0 || newX >= columns || newY >= rows || tetrisBoard[newY][newX]) {
                  return true;
                }
              }
            }
          }
          return false;
        }
        
        // Fusionar la pieza actual con el tablero
        function mergePiece() {
          for (let row = 0; row < currentPiece.length; row++) {
            for (let col = 0; col < currentPiece[row].length; col++) {
              if (currentPiece[row][col]) {
                tetrisBoard[currentPieceY + row][currentPieceX + col] = "T";
              }
            }
          }
          clearLines();
        }
        
        // Eliminar filas completas del tablero
        function clearLines() {
          for (let row = rows - 1; row >= 0; row--) {
            if (tetrisBoard[row].every(block => block === "T")) {
              tetrisBoard.splice(row, 1);
              tetrisBoard.unshift(Array(columns).fill(0));
            }
          }
        }
        
        // Mostrar mensaje de juego terminado
        function gameOver() {
          ctx.fillStyle = "#000";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.font = "48px Arial";
          ctx.fillStyle = "#FFF";
          ctx.fillText("Game Over", 100, 400);
        }
        
        // Lógica del juego
        function gameLoop() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
        
          drawBoard();
          drawCurrentPiece();
        
          moveDown();
        }
        
        // Iniciar el juego
        setInterval(gameLoop, 1000);
        
        // Eventos de teclado
        document.addEventListener("keydown", event => {
          if (event.code === "ArrowLeft") {
            moveLeft();
          } else if (event.code === "ArrowRight") {
            moveRight();
          } else if (event.code === "ArrowUp") {
            rotatePiece();
          } else if (event.code === "ArrowDown") {
            moveDown();
          }
        });
    </script>
</body>
</html>