Tetris's game | AI game creator

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

No:46634

62

Tetris
Developer User20169｜Date and time 24/2/25 14:29:55
Build time 10.247 sec｜Game capacity 3.014KB｜

→ 　

1　

0　

　
　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="300" height="600"></canvas>
  <script>
    const canvas = document.getElementById('tetrisCanvas');
    const context = canvas.getContext('2d');
    const GRID_SIZE = 30;
    const ROWS = canvas.height / GRID_SIZE;
    const COLS = canvas.width / GRID_SIZE;

let board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
    let currentPlayer = {
      x: 0,
      y: 0,
      blocks: [[1, 1, 1], [0, 1, 0]]
    };

function drawBoard() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      board.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === 1) {
            context.fillRect(colIndex * GRID_SIZE, rowIndex * GRID_SIZE, GRID_SIZE, GRID_SIZE);
          }
        });
      });
    }

function drawPlayer() {
      currentPlayer.blocks.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === 1) {
            context.fillRect((currentPlayer.x + colIndex) * GRID_SIZE, (currentPlayer.y + rowIndex) * GRID_SIZE, GRID_SIZE, GRID_SIZE);
          }
        });
      });
    }

function moveDown() {
      currentPlayer.y++;
      if (checkCollision()) {
        currentPlayer.y--;
        mergePlayer();
        currentPlayer.y = 0;
        currentPlayer.x = Math.floor(Math.random() * (COLS - 2));
        clearLines();
      }
    }

function checkCollision() {
      return currentPlayer.blocks.some((row, rowIndex) => {
        return row.some((cell, colIndex) => {
          if (cell === 1) {
            if (currentPlayer.y + rowIndex >= ROWS || board[currentPlayer.y + rowIndex][currentPlayer.x + colIndex] === 1) {
              return true;
            }
          }
          return false;
        });
      });
    }

function mergePlayer() {
      currentPlayer.blocks.forEach((row, rowIndex) => {
        row.forEach((cell, colIndex) => {
          if (cell === 1) {
            board[currentPlayer.y + rowIndex][currentPlayer.x + colIndex] = 1;
          }
        });
      });
    }

function clearLines() {
      for (let rowIndex = ROWS - 1; rowIndex >= 0; rowIndex--) {
        if (board[rowIndex].every(cell => cell === 1)) {
          board.splice(rowIndex, 1);
          board.unshift(Array(COLS).fill(0));
        }
      }
    }

function runGame() {
      drawBoard();
      drawPlayer();
      moveDown();
      setTimeout(runGame, 500);
    }

document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowLeft') {
        currentPlayer.x--;
        if (checkCollision()) {
          currentPlayer.x++;
        }
      } else if (event.key === 'ArrowRight') {
        currentPlayer.x++;
        if (checkCollision()) {
          currentPlayer.x--;
        }
      }
    });

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