AI game creator

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

No:38293

←

Prev Next

→

Tetris
Developer User17330｜Date and time 24/1/24 3:08:08
Build time 35.516 sec｜Game capacity 8.25KB｜

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 {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #000;
      }

#game-board {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="game-board" width="200" height="400"></canvas>

// Canvas setup
      const canvas = document.getElementById("game-board");
      const context = canvas.getContext("2d");
      const cellSize = 20;
      const cols = canvas.width / cellSize;
      const rows = canvas.height / cellSize;

// Gameplay variables
      let grid = [];
      let piece;
      let score = 0;

// Create grid
      for (let row = 0; row < rows; row++) {
        grid[row] = [];
        for (let col = 0; col < cols; col++) {
          grid[row][col] = false;
        }
      }

// Tetrominoes
      const tetrominoes = [
        [
          [true, true, true, true] // I
        ],
        [
          [true, true, true], // L
          [false, false, true]
        ],
        [
          [true, true, true], // J
          [true, false, false]
        ],
        [
          [false, true, true], // Z
          [true, true, false]
        ],
        [
          [true, true], // O
          [true, true]
        ],
        [
          [true, true, true], // T
          [false, true, false]
        ],
        [
          [true, true, false], // S
          [false, true, true]
        ]
      ];

// Function to draw a single cell
      function drawCell(x, y) {
        context.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
        context.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
      }

// Function to draw the grid
      function drawGrid() {
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < cols; col++) {
            if (grid[row][col]) {
              context.fillStyle = "#fff";
              drawCell(col, row);
            }
          }
        }
      }

// Function to draw the current piece
      function drawPiece() {
        context.fillStyle = "#ffdd57";
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (piece[row][col]) {
              drawCell(pieceX + col, pieceY + row);
            }
          }
        }
      }

// Function to check if piece can be moved
      function canMove(direction) {
        const nextX = pieceX + direction;
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (piece[row][col]) {
              if (
                nextX + col < 0 ||
                nextX + col >= cols ||
                pieceY + row >= rows ||
                (grid[pieceY + row][nextX + col] && direction === 1)
              ) {
                return false;
              }
            }
          }
        }
        return true;
      }

// Function to move the piece
      function movePiece(direction) {
        if (canMove(direction)) {
          pieceX += direction;
        }
      }

// Function to rotate the piece
      function rotatePiece() {
        const nextRotation = pieceRotation + 1 >= tetrominoes[pieceIndex].length ? 0 : pieceRotation + 1;
        const nextPiece = tetrominoes[pieceIndex][nextRotation];
        const wallKick = getWallKickOffsets(pieceIndex, pieceRotation, nextRotation);
        for (let i = 0; i < wallKick.length; i++) {
          const [offsetX, offsetY] = wallKick[i];
          const nextX = pieceX + offsetX;
          const nextY = pieceY - offsetY;
          if (canPlace(nextPiece, nextX, nextY)) {
            pieceRotation = nextRotation;
            pieceX = nextX;
            pieceY = nextY;
            return;
          }
        }
      }

// Function to check if the piece can be placed
      function canPlace(piece, x, y) {
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (piece[row][col]) {
              if (
                x + col < 0 ||
                x + col >= cols ||
                y + row >= rows ||
                grid[y + row][x + col]
              ) {
                return false;
              }
            }
          }
        }
        return true;
      }

// Function to lock the piece in the grid
      function lockPiece() {
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (piece[row][col]) {
              grid[pieceY + row][pieceX + col] = true;
            }
          }
        }
        clearLines();
        spawnPiece();
      }

// Function to check and clear lines
      function clearLines() {
        for (let row = rows - 1; row >= 0; row--) {
          if (grid[row].every((cell) => cell)) {
            grid.splice(row, 1);
            grid.unshift(Array(cols).fill(false));
            score += 100;
          }
        }
      }

// Function to get the wall kick offsets
      function getWallKickOffsets(pieceIndex, currentRotation, nextRotation) {
        const currentPiece = tetrominoes[pieceIndex][currentRotation];
        const nextPiece = tetrominoes[pieceIndex][nextRotation];
        const deltaX = pieceX - pieceXBeforeRotate;
        const deltaY = pieceY - pieceYBeforeRotate;

// Function to handle key press events
      function handleKeyPress(event) {
        switch (event.keyCode) {
          case 37: // Left arrow key
            movePiece(-1);
            break;
          case 39: // Right arrow key
            movePiece(1);
            break;
          case 38: // Up arrow key
            rotatePiece();
            break;
          case 40: // Down arrow key
            if (canMove(1)) {
              pieceY++;
            }
            break;
        }
      }

// Function to render the game
      function render() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawGrid();
        drawPiece();
        context.fillStyle = "#fff";
        context.font = "20px Arial";
        context.fillText("Score: " + score, 10, 30);
      }

// Function to update the game state
      function update() {
        if (canMove(1)) {
          pieceY++;
        } else {
          lockPiece();
        }
      }

// Function to start the game
      function startGame() {
        document.addEventListener("keydown", handleKeyPress);
        spawnPiece();
        setInterval(() => {
          update();
          render();
        }, 500);
      }

// Function to spawn a new piece
      function spawnPiece() {
        pieceIndex = Math.floor(Math.random() * tetrominoes.length);
        pieceRotation = 0;
        piece = tetrominoes[pieceIndex][pieceRotation];
        pieceX = Math.floor(cols / 2) - Math.floor(piece[0].length / 2);
        pieceY = 0;
        if (!canPlace(piece, pieceX, pieceY)) {
          gameOver();
        }
      }

// Function to handle game over scenario
      function gameOver() {
        context.fillStyle = "#fff";
        context.font = "40px Arial";
        context.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
      }

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