Tetris's game | AI game creator

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

No:42455

115

Tetris
Developer User18878｜Date and time 24/2/11 19:14:56
Build time 20.981 sec｜Game capacity 6.011KB｜

→ 　

0　

0　

　

　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="1" height=1"></canvas>

<script>
    // Tetris game implementation in JavaScript
  
    // Get the canvas element
    const canvas = document.getElementById('tetrisCanvas');
    const context = canvas.getContext('2d');
  
    // Define the size of each block and the number of rows and columns
    const blockSize = 40;
    const rows = canvas.height / blockSize;
    const cols = canvas.width / blockSize;
  
    // Create the game grid
    const grid = [];
    for (let row = 0; row < rows; row++) {
      grid[row] = [];
      for (let col = 0; col < cols; col++) {
        grid[row][col] = null;
      }
    }
  
    // Define the shape of each Tetromino (Tetris piece)
    const Tetrominos = {
      I: [
        [1, 1, 1, 1],
      ],
      J: [
        [1, 0, 0],
        [1, 1, 1],
      ],
      L: [
        [0, 0, 1],
        [1, 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],
      ],
    };
  
    // Define the colors of each Tetromino
    const TetrominoColors = {
      I: '#00FFFF',
      J: '#0000FF',
      L: '#FFA500',
      O: '#FFFF00',
      S: '#00FF00',
      T: '#800080',
      Z: '#FF0000',
    };
  
    // Create a Tetromino class
    class Tetromino {
      constructor(shape, color) {
        this.shape = shape;
        this.color = color;
        this.row = 0;
        this.col = Math.floor(cols / 2) - Math.floor(shape[0].length / 2);
      }
  
      moveDown() {
        if (this.canMove(1, 0)) {
          this.row++;
        } else {
          this.lock();
          currentTetromino = randomTetromino();
        }
      }
  
      moveLeft() {
        if (this.canMove(0, -1)) {
          this.col--;
        }
      }
  
      moveRight() {
        if (this.canMove(0, 1)) {
          this.col++;
        }
      }
  
      rotate() {
        const rotatedTetromino = [];
        for (let row = 0; row < this.shape[0].length; row++) {
          rotatedTetromino[row] = [];
          for (let col = 0; col < this.shape.length; col++) {
            rotatedTetromino[row][col] = this.shape[col][this.shape[0].length - 1 - row];
          }
        }
        if (this.canMove(0, 0, rotatedTetromino)) {
          this.shape = rotatedTetromino;
        }
      }
  
      canMove(rowOffset, colOffset, newShape = this.shape) {
        for (let row = 0; row < newShape.length; row++) {
          for (let col = 0; col < newShape[0].length; col++) {
            if (newShape[row][col] && ((this.row + row + rowOffset >= rows) || (this.col + col + colOffset < 0) || (this.col + col + colOffset >= cols) || grid[this.row + row + rowOffset][this.col + col + colOffset])) {
              return false;
            }
          }
        }
        return true;
      }
  
      lock() {
        for (let row = 0; row < this.shape.length; row++) {
          for (let col = 0; col < this.shape[0].length; col++) {
            if (this.shape[row][col]) {
              grid[this.row + row][this.col + col] = this.color;
            }
          }
        }
        clearRows();
      }
  
      draw() {
        for (let row = 0; row < this.shape.length; row++) {
          for (let col = 0; col < this.shape[0].length; col++) {
            if (this.shape[row][col]) {
              drawBlock(this.col + col, this.row + row, this.color);
            }
          }
        }
      }
    }
  
    // Function to draw a block on the grid
    function drawBlock(col, row, color) {
      context.fillStyle = color;
      context.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
  
      context.strokeStyle = '#000';
      context.strokeRect(col * blockSize, row * blockSize, blockSize, blockSize);
    }
  
    // Function to clear full rows
    function clearRows() {
      for (let row = rows - 1; row >= 0; row--) {
        if (grid[row].every((block) => block !== null)) {
          grid.splice(row, 1);
          grid.unshift(new Array(cols).fill(null));
        }
      }
    }
  
    // Function to generate a random Tetromino
    function randomTetromino() {
      const tetrominoKeys = Object.keys(Tetrominos);
      const randomKey = tetrominoKeys[Math.floor(Math.random() * tetrominoKeys.length)];
      return new Tetromino(Tetrominos[randomKey], TetrominoColors[randomKey]);
    }
  
    // Game loop function
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      currentTetromino.moveDown();
      currentTetromino.draw();
  
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
          const block = grid[row][col];
          if (block) {
            drawBlock(col, row, block);
          }
        }
      }
  
      requestAnimationFrame(gameLoop);
    }
  
    // Start the game
    let currentTetromino = randomTetromino();
    gameLoop();
  
    // Event listeners for keyboard controls
  
    function handleKeyDown(event) {
      if (event.keyCode === 37) { // Left arrow key
        currentTetromino.moveLeft();
      } else if (event.keyCode === 39) { // Right arrow key
        currentTetromino.moveRight();
      } else if (event.keyCode === 40) { // Down arrow key
        currentTetromino.moveDown();
      } else if (event.keyCode === 32) { // Spacebar
        currentTetromino.rotate();
      }
    }
  
    document.addEventListener('keydown', handleKeyDown);
  </script>
</body>
</html>