A Tetris with enemies's game

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

No:10722

122

←

Prev Next

→

A Tetris with enemies
Developer User3408｜Date and time 23/8/2 9:37:08
Build time 63.699 sec｜Game capacity 7.504KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris con Enemigos</title>
  <style>
    body {
      background-color: #333;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#canvas {
      display: block;
      margin: 0 auto;
      background-color: #111;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>
  <script>
    // Vamos a crear el juego Tetris con enemigos

// Creamos el canvas
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const blockSize = 40;

// Creamos una matriz para representar el tablero
    const rows = canvasHeight / blockSize;
    const columns = canvasWidth / blockSize;
    let board = [];

// Inicializamos el tablero con celdas vacías
    for (let r = 0; r < rows; r++) {
      board[r] = [];
      for (let c = 0; c < columns; c++) {
        board[r][c] = null;
      }
    }

// Creamos una clase para representar las piezas
    class Piece {
      constructor(shape, color) {
        this.shape = shape;
        this.color = color;
        this.x = Math.floor(columns / 2) - Math.floor(shape[0].length / 2);
        this.y = 0;
      }

moveDown() {
        this.y += 1;
      }

moveLeft() {
        this.x -= 1;
      }

moveRight() {
        this.x += 1;
      }

rotate() {
        const oldShape = this.shape;
        const newShape = [];

for (let r = 0; r < oldShape[0].length; r++) {
          newShape[r] = [];
          for (let c = 0; c < oldShape.length; c++) {
            newShape[r][c] = oldShape[oldShape.length - 1 - c][r];
          }
        }

this.shape = newShape;
      }

draw() {
        for (let r = 0; r < this.shape.length; r++) {
          for (let c = 0; c < this.shape[0].length; c++) {
            if (this.shape[r][c]) {
              drawBlock(this.x + c, this.y + r, this.color);
            }
          }
        }
      }
    }

// Creamos una función para dibujar un bloque en el tablero
    function drawBlock(x, y, color) {
      const xPos = x * blockSize;
      const yPos = y * blockSize;

context.fillStyle = color;
      context.fillRect(xPos, yPos, blockSize, blockSize);
      context.strokeStyle = "#222";
      context.strokeRect(xPos, yPos, blockSize, blockSize);
    }

// Creamos una función para dibujar el tablero completo
    function drawBoard() {
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < columns; c++) {
          if (board[r][c]) {
            drawBlock(c, r, board[r][c]);
          }
        }
      }
    }

// Creamos una función para verificar si una posición está dentro del tablero
    function isValidPosition(x, y, shape) {
      for (let r = 0; r < shape.length; r++) {
        for (let c = 0; c < shape[0].length; c++) {
          if (shape[r][c]) {
            const newX = x + c;
            const newY = y + r;

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

return true;
    }

// Creamos una función para fijar una pieza en el tablero
    function fixPiece() {
      for (let r = 0; r < currentPiece.shape.length; r++) {
        for (let c = 0; c < currentPiece.shape[0].length; c++) {
          if (currentPiece.shape[r][c]) {
            const x = currentPiece.x + c;
            const y = currentPiece.y + r;
            board[y][x] = currentPiece.color;
          }
        }
      }

checkAndClearLines();
      spawnPiece();
    }

// Creamos una función para verificar y eliminar líneas completas
    function checkAndClearLines() {
      for (let r = rows - 1; r >= 0; r--) {
        let lineIsComplete = true;

for (let c = 0; c < columns; c++) {
          if (!board[r][c]) {
            lineIsComplete = false;
            break;
          }
        }

if (lineIsComplete) {
          // Eliminamos la línea completa
          board.splice(r, 1);
          // Agregamos una nueva línea en la parte superior del tablero
          board.unshift(new Array(columns).fill(null));
        }
      }
    }

// Creamos una función para dibujar todo el juego
    function drawGame() {
      context.clearRect(0, 0, canvasWidth, canvasHeight);

drawBoard();
      currentPiece.draw();
    }

// Creamos una función para manejar las teclas presionadas
    function handleKeyPress(event) {
      if (!gameOver) {
        if (event.keyCode === 37) {
          // Izquierda
          if (isValidPosition(currentPiece.x - 1, currentPiece.y, currentPiece.shape)) {
            currentPiece.moveLeft();
          }
        } else if (event.keyCode === 39) {
          // Derecha
          if (isValidPosition(currentPiece.x + 1, currentPiece.y, currentPiece.shape)) {
            currentPiece.moveRight();
          }
        } else if (event.keyCode === 40) {
          // Abajo
          if (isValidPosition(currentPiece.x, currentPiece.y + 1, currentPiece.shape)) {
            currentPiece.moveDown();
          }
        } else if (event.keyCode === 38) {
          // Arriba (rotación)
          let rotatedShape = currentPiece.shape;
          currentPiece.rotate();
          if (!isValidPosition(currentPiece.x, currentPiece.y, currentPiece.shape)) {
            currentPiece.shape = rotatedShape;
          }
        }
      }
    }

// Creamos una función para actualizar el juego en cada fotograma
    function updateGame() {
      if (!gameOver) {
        if (isValidPosition(currentPiece.x, currentPiece.y + 1, currentPiece.shape)) {
          currentPiece.moveDown();
        } else {
          fixPiece();
        }

drawGame();

if (!isValidPosition(currentPiece.x, currentPiece.y + 1, currentPiece.shape)) {
          gameOver = true;
          alert("¡Game Over!");
        }
      }
    }

// Creamos una función para generar una nueva pieza aleatoria
    function spawnPiece() {
      const pieces = {
        I: [
          [true, true, true, true]
        ],
        J: [
          [true, false, false],
          [true, true, true]
        ],
        L: [
          [false, false, true],
          [true, true, true]
        ],
        O: [
          [true, true],
          [true, true]
        ],
        S: [
          [false, true, true],
          [true, true, false]
        ],
        T: [
          [false, true, false],
          [true, true, true]
        ],
        Z: [
          [true, true, false],
          [false, true, true]
        ]
      };

const colors = [
        "#FF0000", // Rojo
        "#00FF00", // Verde
        "#0000FF", // Azul
        "#FFFF00", // Amarillo
        "#FF00FF", // Magenta
        "#00FFFF" // Cian
      ];

const randomPiece = Object.keys(pieces)[Math.floor(Math.random() * Object.keys(pieces).length)];
      const randomColor = colors[Math.floor(Math.random() * colors.length)];

currentPiece = new Piece(pieces[randomPiece], randomColor);
    }

// Inicializamos el juego
    let currentPiece;
    let gameOver = false;

spawnPiece();
    drawGame();

// Iniciamos la detección de eventos
    document.addEventListener("keydown", handleKeyPress);

// Iniciamos la animación del juego
    setInterval(updateGame, 1000 / 2); // Actualizamos el juego cada 0.5 segundos
  </script>
</body>
</html>