AI game creator

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

No:10746

←

Prev Next

→

Tetris
Developer User4590｜Date and time 23/8/2 22:50:15
Build time 62.993 sec｜Game capacity 5.697KB｜

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>
    * {
      margin: 0;
      padding: 0;
    }
    canvas {
      background: #000;
      display: block;
      margin: auto;
    }
    .score {
      color: #fff;
      text-align: center;
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="640"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

// Create the grid
    const grid = [];
    const ROW = 20;
    const COLUMN = 10;
    for (let row = 0; row < ROW; row++) {
      grid[row] = [];
      for (let col = 0; col < COLUMN; col++) {
        grid[row][col] = 'black';
      }
    }

// Define the tetrominoes
    const tetrominoes = [
      [[1, 1, 1, 1]], // I
      [[1, 1], [1, 1]], // O
      [[1, 0, 0], [1, 1, 1]], // T
      [[0, 0, 1], [1, 1, 1]], // L
      [[1, 1, 1], [0, 0, 1]], // J
      [[0, 1, 1], [1, 1, 0]], // S
      [[1, 1, 0], [0, 1, 1]] // Z
    ];

let tetromino;
    let tetrominoColor;
    let tetrominoRow;
    let tetrominoCol;
    let score = 0;

// Generate a new tetromino
    function generateTetromino() {
      const random = Math.floor(Math.random() * tetrominoes.length);
      tetromino = tetrominoes[random];
      tetrominoColor = getRandomColor();
      tetrominoRow = 0;
      tetrominoCol = Math.floor(COLUMN / 2) - Math.floor(tetromino[0].length / 2);
    }

// Get a random color for the tetromino
    function getRandomColor() {
      const colors = ['cyan', 'yellow', 'purple', 'orange', 'blue', 'green', 'red'];
      const random = Math.floor(Math.random() * colors.length);
      return colors[random];
    }

// Draw a square on the canvas
    function drawSquare(col, row, color) {
      const x = col * 40;
      const y = row * 40;
      context.fillStyle = color;
      context.fillRect(x, y, 40, 40);
      context.strokeStyle = 'black';
      context.strokeRect(x, y, 40, 40);
    }

// Draw the grid and the falling tetromino
    function draw() {
      for (let row = 0; row < ROW; row++) {
        for (let col = 0; col < COLUMN; col++) {
          drawSquare(col, row, grid[row][col]);
        }
      }
      for (let row = 0; row < tetromino.length; row++) {
        for (let col = 0; col < tetromino[row].length; col++) {
          if (tetromino[row][col]) {
            const tetrominoX = tetrominoCol + col;
            const tetrominoY = tetrominoRow + row;
            drawSquare(tetrominoX, tetrominoY, tetrominoColor);
          }
        }
      }
    }

// Check if a movement is valid
    function isValidMove() {
      for (let row = 0; row < tetromino.length; row++) {
        for (let col = 0; col < tetromino[row].length; col++) {
          if (tetromino[row][col]) {
            const nextRow = tetrominoRow + row + 1;
            if (nextRow >= ROW || grid[nextRow][tetrominoCol + col] !== 'black') {
              return false;
            }
          }
        }
      }
      return true;
    }

// Lock the tetromino in place on the grid
    function lockTetromino() {
      for (let row = 0; row < tetromino.length; row++) {
        for (let col = 0; col < tetromino[row].length; col++) {
          if (tetromino[row][col]) {
            const tetrominoX = tetrominoCol + col;
            const tetrominoY = tetrominoRow + row;
            grid[tetrominoY][tetrominoX] = tetrominoColor;
          }
        }
      }
    }

// Clear filled rows and update the score
    function clearRows() {
      for (let row = ROW - 1; row >= 0; row--) {
        let isRowFull = true;
        for (let col = 0; col < COLUMN; col++) {
          if (grid[row][col] === 'black') {
            isRowFull = false;
            break;
          }
        }
        if (isRowFull) {
          grid.splice(row, 1);
          const newRow = new Array(COLUMN).fill('black');
          grid.unshift(newRow);
          score += 10;
        }
      }
    }

// Game over check
    function isGameOver() {
      for (let col = 0; col < COLUMN; col++) {
        if (grid[0][col] !== 'black') {
          return true;
        }
      }
      return false;
    }

// Update the game
    function update() {
      if (isValidMove()) {
        tetrominoRow++;
      } else {
        lockTetromino();
        clearRows();
        if (isGameOver()) {
          alert('Game Over!');
          location.reload();
        }
        generateTetromino();
      }
    }

// Start the game
    function startGame() {
      generateTetromino();
      setInterval(() => {
        context.clearRect(0, 0, canvas.width, canvas.height);
        update();
        draw();
        document.querySelector('.score').innerHTML = 'Score: ' + score;
      }, 500);
    }

// Handle user input
    document.addEventListener('keydown', (e) => {
      if (e.keyCode === 37) {
        // Left arrow key
        tetrominoCol--;
        if (!isValidMove()) {
          tetrominoCol++;
        }
      } else if (e.keyCode === 39) {
        // Right arrow key
        tetrominoCol++;
        if (!isValidMove()) {
          tetrominoCol--;
        }
      } else if (e.keyCode === 40) {
        // Down arrow key
        tetrominoRow++;
        if (!isValidMove()) {
          tetrominoRow--;
        }
      } else if (e.keyCode === 38) {
        // Up arrow key (rotate)
        const previousTetromino = tetromino;
        tetromino = tetromino[0].map((_, index) => tetromino.map(row => row[index])).reverse();
        if (!isValidMove()) {
          tetromino = previousTetromino;
        }
      }
    });

startGame();
  </script>
</body>
</html>