Juego de tetris con colores neon's game

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

No:19257

←

Prev Next

→

Juego de tetris con colores neon
Developer User8493｜Date and time 23/10/2 8:10:29
Build time 26.366 sec｜Game capacity 7.049KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juego de Tetris con Colores Neon</title>
  <style>
    body {
      background-color: #000000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #game-board {
      width: 200px;
      height: 400px;
      background-color: #222222;
      border: 2px solid #ffffff;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(20, 1fr);
      gap: 1px;
    }
    #game-board div {
      background-color: transparent;
    }
    .tetromino {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Función para dibujar el juego
    function drawGame() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';

for (let i = 0; i < board.length; i++) {
        const square = document.createElement('div');
        square.style.width = SIZE + 'px';
        square.style.height = SIZE + 'px';
        if (board[i] !== 0) {
          square.classList.add('tetromino');
        }
        gameBoard.appendChild(square);
      }
    }

// Función para generar una nueva pieza
    function generateTetromino() {
      const tetrominos = [
        [[1, 1, 1, 1]], // I
        [[1, 1], [1, 1]], // O
        [[1, 1, 0], [0, 1, 1]], // S
        [[0, 1, 1], [1, 1, 0]], // Z
        [[0, 1, 0], [1, 1, 1]], // T
        [[1, 1, 1], [0, 0, 1]], // L
        [[1, 1, 1], [1, 0, 0]]  // J
      ];

const randomIndex = Math.floor(Math.random() * tetrominos.length);
      const tetromino = tetrominos[randomIndex];

currentTetromino = {
        shape: tetromino,
        x: Math.floor((WIDTH / 2) - (tetromino[0].length / 2)),
        y: 0
      };

drawTetromino();
    }

// Función para dibujar la pieza actual
    function drawTetromino() {
      for (let y = 0; y < currentTetromino.shape.length; y++) {
        for (let x = 0; x < currentTetromino.shape[y].length; x++) {
          if (currentTetromino.shape[y][x]) {
            const boardIndex = (currentTetromino.y + y) * WIDTH + (currentTetromino.x + x);
            board[boardIndex] = 1;
          }
        }
      }
      drawGame();
    }

// Función para mover la pieza actual hacia abajo
    function moveDown() {
      const canMoveDown = canMove(0, 1);

if (!canMoveDown) {
        mergeTetromino();
        checkGameOver();
        generateTetromino();
      } else {
        currentTetromino.y++;
        drawTetromino();
      }
    }

// Función para mover la pieza actual hacia la izquierda
    function moveLeft() {
      const canMoveLeft = canMove(-1, 0);

if (canMoveLeft) {
        currentTetromino.x--;
        drawTetromino();
      }
    }

// Función para mover la pieza actual hacia la derecha
    function moveRight() {
      const canMoveRight = canMove(1, 0);

if (canMoveRight) {
        currentTetromino.x++;
        drawTetromino();
      }
    }

// Función para rotar la pieza actual
    function rotate() {
      const rotatedTetromino = rotateTetromino(currentTetromino.shape);

if (canRotate(rotatedTetromino)) {
        currentTetromino.shape = rotatedTetromino;
        drawTetromino();
      }
    }

// Función para comprobar si la pieza puede moverse en una dirección específica
    function canMove(dx, dy) {
      for (let y = 0; y < currentTetromino.shape.length; y++) {
        for (let x = 0; x < currentTetromino.shape[y].length; x++) {
          if (currentTetromino.shape[y][x]) {
            const newX = currentTetromino.x + x + dx;
            const newY = currentTetromino.y + y + dy;

// Comprobar si está dentro de los límites del tablero
            if (newX < 0 || newX >= WIDTH || newY >= HEIGHT) {
              return false;
            }

// Comprobar si hay alguna colisión con otras piezas
            const boardIndex = newY * WIDTH + newX;
            if (board[boardIndex] !== 0) {
              return false;
            }
          }
        }
      }
      return true;
    }

// Función para fusionar la pieza actual con el tablero
    function mergeTetromino() {
      for (let y = 0; y < currentTetromino.shape.length; y++) {
        for (let x = 0; x < currentTetromino.shape[y].length; x++) {
          if (currentTetromino.shape[y][x]) {
            const boardIndex = (currentTetromino.y + y) * WIDTH + (currentTetromino.x + x);
            board[boardIndex] = 1;
          }
        }
      }
    }

// Función para comprobar si se ha perdido el juego
    function checkGameOver() {
      if (currentTetromino.y <= 0) {
        clearInterval(timer);
        alert('¡Juego terminado!');
      }
    }

// Función para rotar una pieza
    function rotateTetromino(tetromino) {
      const newTetromino = [];

for (let y = 0; y < tetromino[0].length; y++) {
        const newRow = [];
        for (let x = tetromino.length - 1; x >= 0; x--) {
          newRow.push(tetromino[x][y]);
        }
        newTetromino.push(newRow);
      }

return newTetromino;
    }

// Funciones para manejar el control táctil en dispositivos móviles
    function handleSwipeLeft() {
      moveLeft();
    }

function handleSwipeRight() {
      moveRight();
    }

function handleSwipeDown() {
      moveDown();
    }

function handleSwipeUp() {
      rotate();
    }

// Función para iniciar el juego
    function startGame() {
      timer = setInterval(moveDown, 1000);

// Manejo de eventos táctiles
      const gameBoard = document.getElementById('game-board');
      let touchstartX = 0;
      let touchstartY = 0;
      let touchendX = 0;
      let touchendY = 0;

gameBoard.addEventListener('touchstart', function(event) {
        touchstartX = event.touches[0].clientX;
        touchstartY = event.touches[0].clientY;
      }, false);

gameBoard.addEventListener('touchend', function(event) {
        touchendX = event.changedTouches[0].clientX;
        touchendY = event.changedTouches[0].clientY;
        handleGesture();
      }, false);

function handleGesture() {
        const deltaX = touchendX - touchstartX;
        const deltaY = touchendY - touchstartY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            handleSwipeRight();
          } else {
            handleSwipeLeft();
          }
        } else {
          if (deltaY > 0) {
            handleSwipeDown();
          } else {
            handleSwipeUp();
          }
        }
      }
    }

// Iniciar juego al cargar la página
    window.onload = startGame;
  </script>
</body>
</html>