AI game creator

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

No:40508

←

Prev Next

→

Tetris
Developer User18058｜Date and time 24/2/3 5:30:56
Build time 21.022 sec｜Game capacity 5.285KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</title>
  <style>
    body {
      background-color: #333333;
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="300" height="600"></canvas>
  <script>
    // HTML elements
    const canvas = document.getElementById("tetrisCanvas");
    const context = canvas.getContext("2d");

// Game variables
    const ROW = 20;
    const COLUMN = 10;
    const BLOCK_SIZE = 30;
    const EMPTY = "#333333";
    let board = [];
    let currentPiece;
    let intervalId;

// Initialize the board
    function initBoard() {
      for (let row = 0; row < ROW; row++) {
        board[row] = [];
        for (let col = 0; col < COLUMN; col++) {
          board[row][col] = EMPTY;
        }
      }
    }

// Draw a square block
    function drawBlock(x, y, color) {
      context.fillStyle = color;
      context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
      context.strokeStyle = "#ffffff";
      context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    }

// Draw the board
    function drawBoard() {
      for (let row = 0; row < ROW; row++) {
        for (let col = 0; col < COLUMN; col++) {
          drawBlock(col, row, board[row][col]);
        }
      }
    }

// Initialize the game
    function startGame() {
      initBoard();
      currentPiece = new Piece();
      intervalId = setInterval(updateGame, 500); // Drop the piece every 0.5 seconds
    }

// Constructor for a tetromino piece
    function Piece() {
      this.type = "T";
      this.color = "#ff7f50";
      this.x = 3;
      this.y = -2;
      this.shape = [
        [0, 0, 0],
        [1, 1, 1],
        [0, 1, 0]
      ];
    }

// Move the current piece down by one position
    function moveDown() {
      if (!checkCollision(0, 1, currentPiece.shape)) {
        currentPiece.y++;
      } else {
        mergePiece();
        if (isGameOver()) {
          clearInterval(intervalId);
          alert("Game Over!");
        }
        currentPiece = new Piece();
      }
    }

// Merge the current piece onto the board
    function mergePiece() {
      for (let row = 0; row < currentPiece.shape.length; row++) {
        for (let col = 0; col < currentPiece.shape[row].length; col++) {
          if (currentPiece.shape[row][col]) {
            board[row + currentPiece.y][col + currentPiece.x] = currentPiece.color;
          }
        }
      }
    }

// Check if there is a collision between the current piece and the board
    function checkCollision(moveX, moveY, piece) {
      for (let row = 0; row < piece.length; row++) {
        for (let col = 0; col < piece[row].length; col++) {
          if (piece[row][col]) {
            let newX = currentPiece.x + col + moveX;
            let newY = currentPiece.y + row + moveY;

if (newX < 0 || newX >= COLUMN || newY >= ROW || board[newY][newX] !== EMPTY) {
              return true;
            }
          }
        }
      }
      return false;
    }

// Rotate the current piece
    function rotatePiece() {
      let rotatedPiece = currentPiece.shape.map((row, rowIndex) =>
        row.map((val, colIndex) => currentPiece.shape[currentPiece.shape.length - 1 - colIndex][rowIndex])
      );

if (!checkCollision(0, 0, rotatedPiece)) {
        currentPiece.shape = rotatedPiece;
      }
    }

// Clear complete rows and shift down the remaining rows
    function clearRows() {
      let clearedRows = 0;

outer: for (let row = ROW - 1; row >= 0; row--) {
        for (let col = 0; col < COLUMN; col++) {
          if (board[row][col] === EMPTY) {
            continue outer;
          }
        }

board.splice(row, 1);
        board.unshift(Array(COLUMN).fill(EMPTY));
        clearedRows++;
      }

return clearedRows;
    }

// Update the game for a new frame
    function updateGame() {
      moveDown();

if (checkCollision(0, 0, currentPiece.shape)) {
        mergePiece();
        if (isGameOver()) {
          clearInterval(intervalId);
          alert("Game Over!");
          return;
        }
        currentPiece = new Piece();
      }

const clearedRows = clearRows();
      if (clearedRows > 0) {
        // Increase score, level, etc.
      }

drawBoard();
    }

// Check if the game is over
    function isGameOver() {
      return board[0].some(cell => cell !== EMPTY);
    }

// Handle key press events
    document.addEventListener("keydown", handleKeyPress);

function handleKeyPress(event) {
      event.preventDefault();

switch(event.key) {
        case "ArrowLeft":
          if (!checkCollision(-1, 0, currentPiece.shape)) {
            currentPiece.x--;
          }
          break;
        case "ArrowRight":
          if (!checkCollision(1, 0, currentPiece.shape)) {
            currentPiece.x++;
          }
          break;
        case "ArrowDown":
          if (!checkCollision(0, 1, currentPiece.shape)) {
            currentPiece.y++;
          }
          break;
        case "ArrowUp":
          rotatePiece();
          break;
      }
    }

// Start the game
    startGame();
  </script>
</body>
</html>