AI game creator

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

No:10711

←

Prev Next

→

Un Tetris
Developer User3408｜Date and time 23/8/2 6:18:05
Build time 62.675 sec｜Game capacity 6.335KB｜

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>
  body {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
  }
  
  canvas {
    border: 1px solid #fff;
  }
</style>
</head>
<body>
<canvas id="tetrisCanvas" width="320" height="480"></canvas>

const ROW = 20;
  const COL = 10;
  const SQ = 20;
  const VACANT = "#000";

// Draw a square
  function drawSquare(x, y, color) {
    context.fillStyle = color;
    context.fillRect(x * SQ, y * SQ, SQ, SQ);

context.strokeStyle = "#fff";
    context.strokeRect(x * SQ, y * SQ, SQ, SQ);
  }

// Create the empty board
  let board = [];
  for (let r = 0; r < ROW; r++) {
    board[r] = [];
    for (let c = 0; c < COL; c++) {
      board[r][c] = VACANT;
    }
  }

// Draw the board
  function drawBoard() {
    for (let r = 0; r < ROW; r++) {
      for (let c = 0; c < COL; c++) {
        drawSquare(c, r, board[r][c]);
      }
    }
  }

// Pieces and their colors
  const PIECES = [
    [Z, "red"],
    [S, "green"],
    [T, "yellow"],
    [O, "blue"],
    [L, "purple"],
    [I, "cyan"],
    [J, "orange"]
  ];

// Generate random pieces
  function randomPiece() {
    let random = Math.floor(Math.random() * PIECES.length);
    return new Piece(PIECES[random][0], PIECES[random][1]);
  }

// Object constructor for pieces
  function Piece(tetromino, color) {
    this.tetromino = tetromino;
    this.color = color;

this.tetrominoN = 0; // Starting from the first pattern
    this.activeTetromino = this.tetromino[this.tetrominoN];

this.x = 3;
    this.y = -2;
  }

// Move the piece downwards
  Piece.prototype.moveDown = function () {
    if (!this.collision(0, 1, this.activeTetromino)) {
      this.unDraw();
      this.y++;
      this.draw();
    } else {
      // Lock the piece
      this.lock();
      piece = randomPiece();
    }
  };

// Move the piece to the left
  Piece.prototype.moveLeft = function () {
    if (!this.collision(-1, 0, this.activeTetromino)) {
      this.unDraw();
      this.x--;
      this.draw();
    }
  };

// Move the piece to the right
  Piece.prototype.moveRight = function () {
    if (!this.collision(1, 0, this.activeTetromino)) {
      this.unDraw();
      this.x++;
      this.draw();
    }
  };

// Rotate the piece
  Piece.prototype.rotate = function () {
    let nextPattern = this.tetromino[
      (this.tetrominoN + 1) % this.tetromino.length
    ];
    let kick = 0;

if (this.collision(0, 0, nextPattern)) {
      if (this.x > COL / 2) {
        // It's the right wall
        kick = -1; // We need to move the piece to the left
      } else {
        // It's the left wall
        kick = 1; // We need to move the piece to the right
      }
    }

if (!this.collision(kick, 0, nextPattern)) {
      this.unDraw();
      this.x += kick;
      this.tetrominoN = (this.tetrominoN + 1) % this.tetromino.length;
      this.activeTetromino = this.tetromino[this.tetrominoN];
      this.draw();
    }
  };

// Collision detection
  Piece.prototype.collision = function (x, y, piece) {
    for (let r = 0; r < piece.length; r++) {
      for (let c = 0; c < piece.length; c++) {
        // Skip if the square is empty
        if (!piece[r][c]) {
          continue;
        }

// Coordinates after movement
        let newX = this.x + c + x;
        let newY = this.y + r + y;

// Conditions to check collisions
        if (newX < 0 || newX >= COL || newY >= ROW) {
          return true;
        }

if (newY < 0) {
          continue;
        }

if (board[newY][newX] !== VACANT) {
          return true;
        }
      }
    }
    return false;
  };

// Lock the piece in place
  Piece.prototype.lock = function () {
    for (let r = 0; r < this.activeTetromino.length; r++) {
      for (let c = 0; c < this.activeTetromino.length; c++) {
        if (!this.activeTetromino[r][c]) {
          continue;
        }

// Lock the piece if it reaches the top
        if (this.y + r < 0) {
          alert("Game Over!");
          // Restart the game
          restartGame();
          break;
        }

// Lock the piece in its position and color
        board[this.y + r][this.x + c] = this.color;
      }
    }

// Clear complete rows
    for (let r = 0; r < ROW; r++) {
      let isRowFull = true;
      for (let c = 0; c < COL; c++) {
        isRowFull = isRowFull && board[r][c] !== VACANT;
      }
      if (isRowFull) {
        for (let y = r; y > 1; y--) {
          for (let c = 0; c < COL; c++) {
            board[y][c] = board[y - 1][c];
          }
        }
        for (let c = 0; c < COL; c++) {
          board[0][c] = VACANT;
        }
      }
    }
    drawBoard();
  };

// Draw the piece on the board
  Piece.prototype.draw = function () {
    for (let r = 0; r < this.activeTetromino.length; r++) {
      for (let c = 0; c < this.activeTetromino.length; c++) {
        if (this.activeTetromino[r][c]) {
          drawSquare(this.x + c, this.y + r, this.color);
        }
      }
    }
  };

// Undraw the piece
  Piece.prototype.unDraw = function () {
    for (let r = 0; r < this.activeTetromino.length; r++) {
      for (let c = 0; c < this.activeTetromino.length; c++) {
        if (this.activeTetromino[r][c]) {
          drawSquare(this.x + c, this.y + r, VACANT);
        }
      }
    }
  };

// Keyboard controls
  document.addEventListener("keydown", control);

// Restart the game
  function restartGame() {
    for (let r = 0; r < ROW; r++) {
      for (let c = 0; c < COL; c++) {
        board[r][c] = VACANT;
      }
    }
    piece = randomPiece();
    drawBoard();
    setInterval(() => {
      piece.moveDown();
    }, 1000);
  }

// Start the game
  let piece = randomPiece();
  drawBoard();
  setInterval(() => {
    piece.moveDown();
  }, 1000);
</script>
</body>
</html>