AI game creator

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

No:41375

7255

←

Prev Next

→

Tetris
Developer anonymous｜Date and time 70/1/1 11:00:02
Build time unknown sec｜Game capacity 7.202KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tetris Game</title>
  <style>
    #gameBoard {
      position: relative;
      margin: 0 auto;
      width: 300px;
      height: 600px;
      background-color: #333;
      border: 2px solid #666;
    }
    .cell {
      position: absolute;
      width: 30px;
      height: 30px;
      border: 1px solid #666;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="gameBoard"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Game Constants
      const ROWS = 20;
      const COLS = 10;
      const CELL_SIZE = 30;
      const GAME_SPEED = 500; // milliseconds

// Game Variables
      let gameBoard = [];
      let activePiece;

// Initialize the game board 
      function initGameBoard() {
        for (let row = 0; row < ROWS; row++) {
          gameBoard[row] = [];
          for (let col = 0; col < COLS; col++) {
            gameBoard[row][col] = 0;
          }
        }
      }

// Initialize the active piece
      function initActivePiece() {
        activePiece = {
          shape: [[1, 1, 1, 1]],
          row: 0,
          col: Math.floor(COLS / 2 - 2),
        }
      }

// Clear the game board
      function clearGameBoard() {
        for (let row = 0; row < ROWS; row++) {
          for (let col = 0; col < COLS; col++) {
            gameBoard[row][col] = 0;
          }
        }
      }

// Draw the game board on the screen
      function drawGameBoard() {
        const gameBoardElement = document.getElementById('gameBoard');
        gameBoardElement.innerHTML = '';

for (let row = 0; row < ROWS; row++) {
          for (let col = 0; col < COLS; col++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.style.top = row * CELL_SIZE + 'px';
            cell.style.left = col * CELL_SIZE + 'px';

if (gameBoard[row][col] === 1) {
              cell.style.backgroundColor = '#999';
            }
            gameBoardElement.appendChild(cell);
          }
        }
      }

// Check if the current piece can move down
      function canMoveDown() {
        for (let row = activePiece.row + activePiece.shape.length - 1; row >= activePiece.row; row--) {
          for (let col = activePiece.col; col < activePiece.col + activePiece.shape[0].length; col++) {
            if (activePiece.shape[row - activePiece.row][col - activePiece.col] === 1) {
              if (row === ROWS - 1 || gameBoard[row + 1][col] === 1) {
                return false;
              }
              break;
            }
          }
        }
        return true;
      }

// Move the current piece down
      function moveDown() {
        if (canMoveDown()) {
          activePiece.row++;
          drawGameBoard();
        } else {
          // Lock the piece on the game board
          for (let row = activePiece.row; row < activePiece.row + activePiece.shape.length; row++) {
            for (let col = activePiece.col; col < activePiece.col + activePiece.shape[0].length; col++) {
              if (activePiece.shape[row - activePiece.row][col - activePiece.col] === 1) {
                gameBoard[row][col] = 1;
              }
            }
          }
          clearFullRows();
          initActivePiece();
        }
      }

// Check if the current piece can move left
      function canMoveLeft() {
        for (let row = activePiece.row; row < activePiece.row + activePiece.shape.length; row++) {
          for (let col = activePiece.col; col < activePiece.col + activePiece.shape[0].length; col++) {
            if (activePiece.shape[row - activePiece.row][col - activePiece.col] === 1) {
              if (col === 0 || gameBoard[row][col - 1] === 1) {
                return false;
              }
              break;
            }
          }
        }
        return true;
      }

// Move the current piece to the left
      function moveLeft() {
        if (canMoveLeft()) {
          activePiece.col--;
          drawGameBoard();
        }
      }

// Check if the current piece can move right
      function canMoveRight() {
        for (let row = activePiece.row; row < activePiece.row + activePiece.shape.length; row++) {
          for (let col = activePiece.col + activePiece.shape[0].length - 1; col >= activePiece.col; col--) {
            if (activePiece.shape[row - activePiece.row][col - activePiece.col] === 1) {
              if (col === COLS - 1 || gameBoard[row][col + 1] === 1) {
                return false;
              }
              break;
            }
          }
        }
        return true;
      }

// Move the current piece to the right
      function moveRight() {
        if (canMoveRight()) {
          activePiece.col++;
          drawGameBoard();
        }
      }

// Rotate the current piece
      function rotatePiece() {
        const oldShape = activePiece.shape;
        const newShape = [];

for (let col = 0; col < oldShape[0].length; col++) {
          const newRow = [];
          for (let row = oldShape.length - 1; row >= 0; row--) {
            newRow.push(oldShape[row][col]);
          }
          newShape.push(newRow);
        }

// Check if the rotated piece can fit
        const newCol = activePiece.col - Math.floor((newShape[0].length - oldShape[0].length) / 2);
        if (newCol >= 0 && newCol + newShape[0].length <= COLS) {
          activePiece.shape = newShape;
          activePiece.col = newCol;
          drawGameBoard();
        }
      }

// Clear rows that are full
      function clearFullRows() {
        let fullRows = [];
        for (let row = ROWS - 1; row >= 0; row--) {
          let rowIsFull = true;
          for (let col = 0; col < COLS; col++) {
            if (gameBoard[row][col] === 0) {
              rowIsFull = false;
              break;
            }
          }
          if (rowIsFull) {
            fullRows.push(row);
          }
        }

if (fullRows.length > 0) {
          // Remove the full rows
          for (let i = 0; i < fullRows.length; i++) {
            const row = fullRows[i];
            for (let j = row; j > 0; j--) {
              gameBoard[j] = gameBoard[j - 1];
            }
            gameBoard[0] = Array.from({ length: COLS }, () => 0);
          }
          drawGameBoard();
        }
      }

// Game Loop
      function gameLoop() {
        moveDown();
        setTimeout(gameLoop, GAME_SPEED);
      }

// Handle keyboard input
      function handleKeyPress(event) {
        const keyCode = event.keyCode;
        if (keyCode === 37) {
          moveLeft();
        } else if (keyCode === 39) {
          moveRight();
        } else if (keyCode === 38) {
          rotatePiece();
        } else if (keyCode === 40) {
          moveDown();
        }
      }

// Start the game
      function startGame() {
        initGameBoard();
        initActivePiece();
        drawGameBoard();
        gameLoop();
      }
      
      startGame();
      document.addEventListener('keydown', handleKeyPress);
    });
  </script>
</body>
</html>