AI game creator

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

No:40451

←

Prev Next

→

Un juego tetris
Developer User18058｜Date and time 24/2/2 22:31:50
Build time 35.654 sec｜Game capacity 6.838KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

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

#game-board {
      background-color: #000;
      border: 1px solid #fff;
    }

.cell {
      width: 20px;
      height: 20px;
      border: 1px solid #000;
    }

.cell.active {
      background-color: #fff;
    }

.cell.filled {
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
</body>

// Tetromino shapes
  const SHAPES = {
    I: [[1, 1, 1, 1]],
    J: [[0, 1, 0], [0, 1, 0], [1, 1, 0]],
    L: [[0, 1, 0], [0, 1, 0], [0, 1, 1]],
    O: [[1, 1], [1, 1]],
    S: [[0, 1, 1], [1, 1, 0]],
    T: [[0, 1, 0], [1, 1, 1]],
    Z: [[1, 1, 0], [0, 1, 1]]
  };

// Initialize game board
  const gameBoard = [];
  for (let i = 0; i < ROWS; i++) {
    gameBoard.push(new Array(COLS).fill(EMPTY_CELL));
  }

// Initialize current tetromino
  const tetromino = {
    shape: null,
    row: 0,
    col: 0
  };

// Initialize game timer
  let gameTimer = null;

// Function to draw the game board
  function drawBoard() {
    const gameBoardElement = document.getElementById('game-board');
    gameBoardElement.innerHTML = '';

for (let i = 0; i < ROWS; i++) {
      for (let j = 0; j < COLS; j++) {
        const cell = document.createElement('div');
        cell.className = gameBoard[i][j] === FILLED_CELL ? 'cell filled' : 'cell';
        gameBoardElement.appendChild(cell);
      }
    }
  }

// Function to draw the current tetromino
  function drawTetromino() {
    for (let i = 0; i < tetromino.shape.length; i++) {
      for (let j = 0; j < tetromino.shape[i].length; j++) {
        if (tetromino.shape[i][j] === ACTIVE_CELL) {
          gameBoard[tetromino.row + i][tetromino.col + j] = ACTIVE_CELL;
        }
      }
    }
  }

// Function to clear the current tetromino's previous position
  function clearPreviousTetromino() {
    for (let i = 0; i < tetromino.shape.length; i++) {
      for (let j = 0; j < tetromino.shape[i].length; j++) {
        if (tetromino.shape[i][j] === ACTIVE_CELL) {
          gameBoard[tetromino.row + i][tetromino.col + j] = EMPTY_CELL;
        }
      }
    }
  }

// Function to move the tetromino down
  function moveTetrominoDown() {
    clearPreviousTetromino();
    tetromino.row++;

if (isCollision()) {
      tetromino.row--;
      lockTetromino();

if (isGameOver()) {
        clearInterval(gameTimer);
        alert('Game Over!');
        return;
      }

spawnTetromino();
    }

drawTetromino();
    drawBoard();
  }

// Function to move the tetromino left
  function moveTetrominoLeft() {
    clearPreviousTetromino();
    tetromino.col--;

if (isCollision()) {
      tetromino.col++;
    }

drawTetromino();
    drawBoard();
  }

// Function to move the tetromino right
  function moveTetrominoRight() {
    clearPreviousTetromino();
    tetromino.col++;

if (isCollision()) {
      tetromino.col--;
    }

drawTetromino();
    drawBoard();
  }

// Function to rotate the tetromino
  function rotateTetromino() {
    if (tetromino.shape === SHAPES.O) {
      // O shape is symmetric, no need to rotate
      return;
    }

const rotatedShape = [];

for (let i = 0; i < tetromino.shape[0].length; i++) {
      const row = [];
      for (let j = tetromino.shape.length - 1; j >= 0; j--) {
        row.push(tetromino.shape[j][i]);
      }
      rotatedShape.push(row);
    }

clearPreviousTetromino();
    tetromino.shape = rotatedShape;

if (isCollision()) {
      // Restore previous shape if rotation results in collision
      tetromino.shape = SHAPES[getCurrentShape()];
    }

drawTetromino();
    drawBoard();
  }

// Function to check if there is a collision
  function isCollision() {
    for (let i = 0; i < tetromino.shape.length; i++) {
      for (let j = 0; j < tetromino.shape[i].length; j++) {
        if (
          tetromino.shape[i][j] === ACTIVE_CELL &&
          (tetromino.row + i >= ROWS ||
            tetromino.col + j < 0 ||
            tetromino.col + j >= COLS ||
            gameBoard[tetromino.row + i][tetromino.col + j] === FILLED_CELL)
        ) {
          return true;
        }
      }
    }
    return false;
  }

// Function to lock the current tetromino in place
  function lockTetromino() {
    for (let i = 0; i < tetromino.shape.length; i++) {
      for (let j = 0; j < tetromino.shape[i].length; j++) {
        if (tetromino.shape[i][j] === ACTIVE_CELL) {
          gameBoard[tetromino.row + i][tetromino.col + j] = FILLED_CELL;
        }
      }
    }

clearLines();
  }

// Function to check if any lines are complete and clear them
  function clearLines() {
    for (let i = ROWS - 1; i >= 0; i--) {
      if (gameBoard[i].every(cell => cell === FILLED_CELL)) {
        gameBoard.splice(i, 1);
        gameBoard.unshift(new Array(COLS).fill(EMPTY_CELL));
      }
    }
  }

// Function to check if the game is over
  function isGameOver() {
    return gameBoard[0].some(cell => cell === FILLED_CELL);
  }

// Function to generate a random tetromino shape
  function getRandomShape() {
    const shapes = Object.keys(SHAPES);
    const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
    return SHAPES[randomShape];
  }

// Function to get the current tetromino shape
  function getCurrentShape() {
    const shapeKeys = Object.keys(SHAPES);
    const currentShape = Object.values(SHAPES).find(
      shape => JSON.stringify(shape) === JSON.stringify(tetromino.shape)
    );
    return shapeKeys[Object.values(SHAPES).indexOf(currentShape)];
  }

// Function to spawn a new tetromino
  function spawnTetromino() {
    tetromino.shape = getRandomShape();
    tetromino.row = 0;
    tetromino.col = Math.floor(COLS / 2) - Math.floor(tetromino.shape[0].length / 2);
  }

// Function to start the game
  function startGame() {
    spawnTetromino();
    drawTetromino();
    drawBoard();

gameTimer = setInterval(moveTetrominoDown, 500);
  }

// Start the game
  startGame();

// Handle keyboard controls
  document.addEventListener('keydown', event => {
    switch (event.keyCode) {
      case 37: // Left arrow key
        moveTetrominoLeft();
        break;
      case 38: // Up arrow key
        rotateTetromino();
        break;
      case 39: // Right arrow key
        moveTetrominoRight();
        break;
      case 40: // Down arrow key
        moveTetrominoDown();
        break;
    }
  });
</script>
</html>