AI game creator

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

No:25685

←

Prev Next

→

Tetris
Developer User12622｜Date and time 23/11/23 23:33:05
Build time 239.297 sec｜Game capacity 5.087KB｜

Script

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript:

You can copy and paste the above code into a new HTML file, save it with a ".html" extension, and open it in a web browser. The game should start, and you can use the arrow keys to control the tetromino shapes. The game logic, piece movement, and lines clearing are all implemented. However, as mentioned in the comments, scoring logic is left as an exercise for you to build upon if desired.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
</head>
<body>
  <canvas id="tetrisCanvas"></canvas>
  
  <script>
    const canvas = document.getElementById('tetrisCanvas');
    const context = canvas.getContext('2d');
    const blockSize = 30;
    const boardWidth = 10;
    const boardHeight = 20;
    const tetrisColors = [
      '#000000', // Black - Empty space
      '#FF0000', // Red - T shape
      '#00FF00', // Green - L shape
      '#0000FF', // Blue - J shape
      '#FFFF00', // Yellow - O shape
      '#FF00FF', // Magenta - S shape
      '#00FFFF', // Cyan - Z shape
      '#FF8800'  // Orange - I shape
    ];
  
    const tetrominos = [
      [],             // Empty
      [[0, 0, 0, 0]], // Square
      [[0, 1, 0],     // T shape
       [1, 1, 1]],
      [[1, 0, 0],     // L shape
       [1, 1, 1]],
      [[0, 0, 1],     // J shape
       [1, 1, 1]],
      [[1, 1],        // S shape
       [1, 1]],
      [[0, 1, 1],     // Z shape
       [1, 1, 0]],
      [[1, 1, 1, 1]]  // I shape
    ];
  
    const board = [];
    let currentPiece;
    let currentX;
    let currentY;
  
    function init() {
      for (let row = 0; row < boardHeight; row++) {
        board[row] = Array(boardWidth).fill(0);
      }
  
      newPiece();
      drawBoard();
  
      setInterval(update, 500);
    }
  
    function newPiece() {
      const tetrominoIndex = Math.floor(Math.random() * (tetrominos.length - 1)) + 1;
      const tetromino = tetrominos[tetrominoIndex];
  
      currentPiece = Array.from(tetromino);
      currentX = Math.floor((boardWidth - currentPiece[0].length) / 2);
      currentY = 0;
    }
  
    function drawSquare(x, y, color) {
      context.fillStyle = color;
      context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
      context.strokeStyle = 'black';
      context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
    }
  
    function drawBoard() {
      for (let y = 0; y < boardHeight; y++) {
        for (let x = 0; x < boardWidth; x++) {
          drawSquare(x, y, tetrisColors[board[y][x]]);
        }
      }
    }
  
    function canMove(x, y, piece) {
      for (let row = 0; row < piece.length; row++) {
        for (let col = 0; col < piece[row].length; col++) {
          if (piece[row][col]) {
            const newX = x + col;
            const newY = y + row;
  
            if (newX < 0 || newX >= boardWidth || newY >= boardHeight || board[newY][newX]) {
              return false;
            }
          }
        }
      }
  
      return true;
    }
  
    function mergePiece() {
      for (let row = 0; row < currentPiece.length; row++) {
        for (let col = 0; col < currentPiece[row].length; col++) {
          if (currentPiece[row][col]) {
            const x = currentX + col;
            const y = currentY + row;
            board[y][x] = currentPiece[row][col];
          }
        }
      }
    }
  
    function rotatePiece(piece) {
      const newPiece = [];
  
      for (let col = 0; col < piece[0].length; col++) {
        let newRow = [];
  
        for (let row = piece.length - 1; row >= 0; row--) {
          newRow.push(piece[row][col]);
        }
  
        newPiece.push(newRow);
      }
  
      return newPiece;
    }
  
    function clearLines() {
      let linesCleared = 0;
  
      for (let row = boardHeight - 1; row >= 0; row--) {
        if (board[row].every(cell => cell !== 0)) {
          board.splice(row, 1);
          board.unshift(Array(boardWidth).fill(0));
          linesCleared++;
        }
      }
  
      return linesCleared;
    }
  
    function update() {
      if (canMove(currentX, currentY + 1, currentPiece)) {
        currentY++;
      } else {
        mergePiece();
        const linesCleared = clearLines();
  
        if (linesCleared > 0) {
          // Add scoring logic here
        }
  
        newPiece();
      }
  
      drawBoard();
    }
  
    document.addEventListener('keydown', event => {
      if (event.key === 'ArrowLeft' && canMove(currentX - 1, currentY, currentPiece)) {
        currentX--;
      } else if (event.key === 'ArrowRight' && canMove(currentX + 1, currentY, currentPiece)) {
        currentX++;
      } else if (event.key === 'ArrowDown' && canMove(currentX, currentY + 1, currentPiece)) {
        currentY++;
      } else if (event.key === 'ArrowUp') {
        const rotatedPiece = rotatePiece(currentPiece);
  
        if (canMove(currentX, currentY, rotatedPiece)) {
          currentPiece = rotatedPiece;
        }
      }
  
      drawBoard();
    });
  
    init();
  </script>
</body>
</html>
```