AI game creator

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

No:10710

187

←

Prev Next

→

A two-sided Tetris
Developer User3408｜Date and time 23/8/2 6:16:04
Build time 84.147 sec｜Game capacity 7.921KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris de dos lados</title>
    <style>
      canvas {
        border: 1px solid #333;
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>

// Posiciones iniciales
      let ladoIzquierdoTablero = new Array(filaTotal).fill(null).map(() => new Array(columnaLados).fill(0));
      let ladoDerechoTablero = new Array(filaTotal).fill(null).map(() => new Array(columnaLados).fill(0));

// Timer para el juego
      let tiempo;

// Puntuación
      let puntuacion = 0;

// Tetriminos
      const tetriminos = [
        [
          [1, 1, 1, 1], // Linea
          [0, 0, 0, 0],
          [0, 0, 0, 0],
          [0, 0, 0, 0],
        ],
        [
          [1, 1, 1], // L
          [1, 0, 0],
          [0, 0, 0],
        ],
        [
          [1, 1, 1], // L invertida
          [0, 0, 1],
          [0, 0, 0],
        ],
        [
          [1, 1], // Cuadrado
          [1, 1],
        ],
        [
          [1, 1, 0], // S
          [0, 1, 1],
          [0, 0, 0],
        ],
        [
          [0, 1, 1], // S invertida
          [1, 1, 0],
          [0, 0, 0],
        ],
        [
          [0, 1, 0], // T
          [1, 1, 1],
          [0, 0, 0],
        ],
      ];

// Colores de los tetriminos
      const colores = [
        "cyan",
        "orange",
        "blue",
        "yellow",
        "red",
        "green",
        "purple",
      ];

// Actualiza el juego
      function actualizar() {
        dibujar();
        moverAbajo();
      }

// Dibuja los tetriminos en el tablero
      function dibujarTetrimonos(tablero, offset) {
        for (let fila = 0; fila < tablero.length; fila++) {
          for (let columna = 0; columna < tablero[fila].length; columna++) {
            if (tablero[fila][columna]) {
              contexto.fillStyle = colores[tablero[fila][columna]];
              contexto.fillRect((columna + offset) * cuadroTamano, fila * cuadroTamano, cuadroTamano, cuadroTamano);
              contexto.strokeStyle = "black";
              contexto.strokeRect((columna + offset) * cuadroTamano, fila * cuadroTamano, cuadroTamano, cuadroTamano);
            }
          }
        }
      }

// Dibuja el juego completo
      function dibujar() {
        contexto.clearRect(0, 0, tetrisCanvas.width, tetrisCanvas.height);
        dibujarTetrimonos(ladoIzquierdoTablero, 0);
        dibujarTetrimonos(ladoDerechoTablero, columnaLados);
      }

// Mueve el tetrimino hacia abajo
      function moverAbajo() {
        if (colision(ladoIzquierdoTablero, { x: 0, y: 1 })) {
          combinarTableros();
          eliminarFilasCompletas();
          if (juegoTerminado()) {
            reiniciarJuego();
            return;
          }
          generarNuevoTetrimino();
        } else {
          ladoIzquierdoTableroActivo.y++;
        }
        dibujar();
        puntuacion++;
        document.getElementById("puntuacion").innerText = puntuacion;
      }

// Mueve el tetrimino hacia la izquierda
      function moverIzquierda() {
        if (!colision(ladoIzquierdoTablero, { x: -1, y: 0 })) {
          ladoIzquierdoTableroActivo.x--;
        }
      }

// Mueve el tetrimino hacia la derecha
      function moverDerecha() {
        if (!colision(ladoIzquierdoTablero, { x: 1, y: 0 })) {
          ladoIzquierdoTableroActivo.x++;
        }
      }

// Rota el tetrimino
      function rotar() {
        const tetriminoAnterior = ladoIzquierdoTableroActivo.tetrimino;
        ladoIzquierdoTableroActivo.tetrimino = rotarTetrimino(ladoIzquierdoTableroActivo.tetrimino);
        if (colision(ladoIzquierdoTablero, { x: 0, y: 0 })) {
          ladoIzquierdoTableroActivo.tetrimino = tetriminoAnterior;
        }
      }

// Rota un tetrimino
      function rotarTetrimino(tetrimino) {
        const tetriminoRotado = tetrimino.map((fila, i) => tetrimino.map((col) => col[i]));
        return tetriminoRotado.reverse();
      }

// Verifica la colisión de un tetrimino con el tablero
      function colision(tablero, offset) {
        for (let fila = 0; fila < ladoIzquierdoTableroActivo.tetrimino.length; fila++) {
          for (let columna = 0; columna < ladoIzquierdoTableroActivo.tetrimino[fila].length; columna++) {
            if (
              ladoIzquierdoTableroActivo.tetrimino[fila][columna] &&
              ((tablero[fila + ladoIzquierdoTableroActivo.y + offset.y] &&
                typeof tablero[fila + ladoIzquierdoTableroActivo.y + offset.y][columna + ladoIzquierdoTableroActivo.x + offset.x] !==
                  "undefined") ||
                columnasLimites(ladoIzquierdoTableroActivo.x + columna + offset.x))
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Verifica que las columnas estén dentro del rango permitido
      function columnasLimites(columna) {
        return columna < 0 || columna >= columnaLados;
      }

// Combina los tableros después de un bloque
      function combinarTableros() {
        for (let fila = 0; fila < ladoIzquierdoTableroActivo.tetrimino.length; fila++) {
          for (let columna = 0; columna < ladoIzquierdoTableroActivo.tetrimino[fila].length; columna++) {
            if (ladoIzquierdoTableroActivo.tetrimino[fila][columna]) {
              ladoIzquierdoTablero[fila + ladoIzquierdoTableroActivo.y][columna + ladoIzquierdoTableroActivo.x] =
                ladoIzquierdoTableroActivo.tetrimino[fila][columna];
            }
          }
        }
      }

// Elimina las filas completas del tablero
      function eliminarFilasCompletas() {
        let filasCompletas = 0;
        for (let fila = filaTotal - 1; fila >= 0; fila--) {
          if (ladoIzquierdoTablero[fila].every((col) => col !== 0)) {
            ladoIzquierdoTablero.splice(fila, 1);
            ladoIzquierdoTablero.unshift(new Array(columnaLados).fill(0));
            filasCompletas++;
          }
        }
        puntuacion += filasCompletas * 100;
        document.getElementById("puntuacion").innerText = puntuacion;
      }

// Verifica si el juego ha terminado
      function juegoTerminado() {
        return ladoIzquierdoTablero[0].some((col) => col !== 0);
      }

// Inicializa un nuevo tetrimino
      function generarNuevoTetrimino() {
        const tetrimino = tetriminos[Math.floor(Math.random() * tetriminos.length)];
        ladoIzquierdoTableroActivo = {
          tetrimino: tetrimino,
          x: Math.floor(columnaLados / 2) - Math.floor(tetrimino[0].length / 2),
          y: 0,
        };
      }

// Reinicia el juego
      function reiniciarJuego() {
        ladoIzquierdoTablero = new Array(filaTotal).fill(null).map(() => new Array(columnaLados).fill(0));
        puntuacion = 0;
        document.getElementById("puntuacion").innerText = puntuacion;
      }

// Manejo de eventos
      document.addEventListener("keydown", (event) => {
        if (event.keyCode === 37) {
          moverIzquierda();
        } else if (event.keyCode === 39) {
          moverDerecha();
        } else if (event.keyCode === 40) {
          moverAbajo();
        } else if (event.keyCode === 38) {
          rotar();
        }
      });

// Inicio del juego
      generarNuevoTetrimino();
      tiempo = setInterval(actualizar, 1000 / 2);
    </script>
  </body>
</html>