Tetris's game | AI game creator

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

No:15213

72

Tetris
Developer User6602｜Date and time 23/9/7 17:30:01
Build time 69.03 sec｜Game capacity 6.429KB｜

Sure! Here's an example of a Tetris game implemented as a single HTML file using JavaScript:

To play the game, open the HTML file in a web browser on your smartphone. You can use the virtual keyboard to control the tetrominos: Left arrow to move left, Right arrow to move right, Down arrow to move down faster, and Up arrow to rotate the tetromino. Hope you enjoy playing Tetris!

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a Tetris game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    /* CSS styles for the game board and the tetrominos */
    .board {
      display: grid;
      grid-template-columns: repeat(10, 30px);
      grid-template-rows: repeat(20, 30px);
      grid-gap: 1px;
      background-color: #000;
    }
    
    .block {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="board"></div>

<script>
    // Tetris game logic

const boardWidth = 10;
    const boardHeight = 20;
    const boardSize = boardWidth * boardHeight;
    const board = Array(boardSize).fill(0);
    const tetrominos = [
      [[1,1,1,1]], 
      [[1,1], [1,1]], 
      [[1,1,0], [0,1,1]], 
      [[0,1,1], [1,1,0]], 
      [[1,1,1], [0,1,0]],
      // Add more tetrominos here...
    ];
    const tetrominoColors = ['#ff00ff', '#00ff00', '#0000ff', '#ffff00', '#00ffff'];
    
    let currentTetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
    let currentColor = tetrominoColors[Math.floor(Math.random() * tetrominoColors.length)];
    let currentColumn = Math.floor(Math.random() * (boardWidth - currentTetromino[0].length + 1));
    let currentRow = 0;
    
    function drawBoard() {
      const boardElement = document.querySelector('.board');
      boardElement.innerHTML = '';
      
      for (let row = 0; row < boardHeight; row++) {
        for (let col = 0; col < boardWidth; col++) {
          const block = document.createElement('div');
          if (board[row * boardWidth + col]) {
            block.className = 'block';
          }
          boardElement.appendChild(block);
        }
      }
    }
    
    function drawTetromino() {
      const boardElement = document.querySelector('.board');
      
      for (let row = 0; row < currentTetromino.length; row++) {
        for (let col = 0; col < currentTetromino[row].length; col++) {
          if (currentTetromino[row][col]) {
            const block = document.createElement('div');
            block.className = 'block';
            block.style.backgroundColor = currentColor;
            block.style.gridRowStart = currentRow + row + 1;
            block.style.gridColumnStart = currentColumn + col + 1;
            boardElement.appendChild(block);
          }
        }
      }
    }
    
    function clearTetromino() {
      const boardElement = document.querySelector('.board');
      const blocks = boardElement.getElementsByClassName('block');
      
      while (blocks.length > 0) {
        boardElement.removeChild(blocks[0]);
      }
    }
    
    function rotateTetromino() {
      const rotatedTetromino = [];
      
      for (let col = 0; col < currentTetromino[0].length; col++) {
        const newRow = [];
        for (let row = currentTetromino.length - 1; row >= 0; row--) {
          newRow.push(currentTetromino[row][col]);
        }
        rotatedTetromino.push(newRow);
      }
      
      return rotatedTetromino;
    }
    
    function moveDown() {
      if (currentRow + currentTetromino.length < boardHeight) {
        currentRow++;
      } else {
        placeTetromino();
      }
    }
    
    function moveLeft() {
      if (currentColumn > 0) {
        currentColumn--;
      }
    }
    
    function moveRight() {
      if (currentColumn + currentTetromino[0].length < boardWidth) {
        currentColumn++;
      }
    }
    
    function placeTetromino() {
      for (let row = 0; row < currentTetromino.length; row++) {
        for (let col = 0; col < currentTetromino[row].length; col++) {
          if (currentTetromino[row][col]) {
            board[(currentRow + row) * boardWidth + (currentColumn + col)] = 1;
          }
        }
      }
      
      checkLines();
      
      currentTetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
      currentColor = tetrominoColors[Math.floor(Math.random() * tetrominoColors.length)];
      currentColumn = Math.floor(Math.random() * (boardWidth - currentTetromino[0].length + 1));
      currentRow = 0;
      
      if (checkCollision()) {
        alert('Game Over!');
        board.fill(0);
      }
    }
    
    function checkLines() {
      for (let row = boardHeight - 1; row >= 0; row--) {
        if (board.slice(row * boardWidth, (row + 1) * boardWidth).every(cell => cell)) {
          board.splice(row * boardWidth, boardWidth);
          board.unshift(...Array(boardWidth).fill(0));
        }
      }
    }
    
    function checkCollision() {
      for (let row = 0; row < currentTetromino.length; row++) {
        for (let col = 0; col < currentTetromino[row].length; col++) {
          if (currentTetromino[row][col] && board[(currentRow + row + 1) * boardWidth + (currentColumn + col)]) {
            return true;
          }
        }
      }
      return false;
    }
    
    function handleKeyDown(event) {
      switch (event.key) {
        case 'ArrowLeft':
          moveLeft();
          break;
        case 'ArrowRight':
          moveRight();
          break;
        case 'ArrowDown':
          moveDown();
          break;
        case 'ArrowUp':
          const rotatedTetromino = rotateTetromino();
          const currentColumnTemp = currentColumn;
          
          if (currentColumn + rotatedTetromino[0].length > boardWidth) {
            currentColumn = boardWidth - rotatedTetromino[0].length;
          }
          
          if (!checkCollision()) {
            currentTetromino = rotatedTetromino;
            clearTetromino();
            drawTetromino();
          } else {
            currentColumn = currentColumnTemp;
          }
          
          break;
      }
      
      clearTetromino();
      drawTetromino();
    }
    
    function startGame() {
      document.addEventListener('keydown', handleKeyDown);
      
      setInterval(() => {
        clearTetromino();
        moveDown();
        drawTetromino();
        drawBoard();
      }, 500); // Change the interval to adjust game speed
    }
    
    // Start the game
    startGame();
  </script>
</body>
</html>
```

To play the game, open the HTML file in a web browser on your smartphone. You can use the virtual keyboard to control the tetrominos: Left arrow to move left, Right arrow to move right, Down arrow to move down faster, and Up arrow to rotate the tetromino.

Hope you enjoy playing Tetris!