AI game creator

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

No:11465

188

←

Prev Next

→

Make a tetris
Developer User4834｜Date and time 23/8/10 7:23:15
Build time 51.577 sec｜Game capacity 7.814KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <canvas id="tetrisCanvas" width="200" height="400"></canvas>

// Tetris grid cell size
      const CELL_SIZE = 20;

// Initialize the Tetris grid
      let tetrisGrid = Array.from({ length: ROWS }, () =>
        Array(COLS).fill(0)
      );

// Tetrimino shapes (represented as arrays of rotations)
      const tetriminoes = [
        // I-shape
        [
          [1, 1, 1, 1],
          [0, 0, 0, 0],
          [0, 0, 0, 0],
          [0, 0, 0, 0],
        ],
        // J-shape
        [
          [1, 0, 0],
          [1, 1, 1],
          [0, 0, 0],
        ],
        // L-shape
        [
          [0, 0, 1],
          [1, 1, 1],
          [0, 0, 0],
        ],
        // O-shape
        [
          [1, 1],
          [1, 1],
        ],
        // S-shape
        [
          [0, 1, 1],
          [1, 1, 0],
          [0, 0, 0],
        ],
        // T-shape
        [
          [0, 1, 0],
          [1, 1, 1],
          [0, 0, 0],
        ],
        // Z-shape
        [
          [1, 1, 0],
          [0, 1, 1],
          [0, 0, 0],
        ],
      ];

// Available colors for tetriminos
      const colors = [
        '#00bfff', // Light blue
        '#1e90ff', // Dodger blue
        '#228b22', // Forest green
        '#ffb200', // Gold
        '#ff1493', // Deep pink
        '#8a2be2', // Blue violet
        '#f44336', // Red
      ];

// Initialize Tetris game
      const canvas = document.getElementById('tetrisCanvas');
      const context = canvas.getContext('2d');
      let currentTetrimino = getRandomTetrimino();
      let currentRow = 0;
      let currentCol = 3;
      let score = 0;
      let gameOver = false;

// Generate a random tetrimino
      function getRandomTetrimino() {
        const tetriminoIndex = Math.floor(Math.random() * tetriminoes.length);
        const tetrimino = tetriminoes[tetriminoIndex];
        const color = colors[tetriminoIndex];
        return { shape: tetrimino, color: color };
      }

// Draw a tetrimino on the grid
      function drawTetrimino() {
        const { shape, color } = currentTetrimino;

for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col]) {
              const cellX = (currentCol + col) * CELL_SIZE;
              const cellY = (currentRow + row) * CELL_SIZE;
              drawCell(cellX, cellY, color);
            }
          }
        }
      }

// Draw a cell on the grid
      function drawCell(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x, y, CELL_SIZE, CELL_SIZE);
        context.strokeStyle = 'white';
        context.strokeRect(x, y, CELL_SIZE, CELL_SIZE);
      }

// Clear the grid
      function clearGrid() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

// Draw the Tetris grid
      function drawGrid() {
        for (let row = 0; row < tetrisGrid.length; row++) {
          for (let col = 0; col < tetrisGrid[row].length; col++) {
            const cellX = col * CELL_SIZE;
            const cellY = row * CELL_SIZE;
            const cellColor = tetrisGrid[row][col] || '#f2f2f2';
            drawCell(cellX, cellY, cellColor);
          }
        }
      }

// Check if a tetrimino can be placed at the given position
      function isValidMove(row, col, shape) {
        for (let rowIdx = 0; rowIdx < shape.length; rowIdx++) {
          for (let colIdx = 0; colIdx < shape[rowIdx].length; colIdx++) {
            if (shape[rowIdx][colIdx]) {
              const nextRow = row + rowIdx;
              const nextCol = col + colIdx;

if (
                nextRow < 0 ||
                nextRow >= ROWS ||
                nextCol < 0 ||
                nextCol >= COLS ||
                tetrisGrid[nextRow][nextCol]
              ) {
                return false;
              }
            }
          }
        }

return true;
      }

// Place the current tetrimino on the grid
      function placeTetrimino() {
        const { shape } = currentTetrimino;

for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col]) {
              const gridRow = currentRow + row;
              const gridCol = currentCol + col;
              tetrisGrid[gridRow][gridCol] = currentTetrimino.color;
            }
          }
        }

checkLines();

if (!gameOver) {
          currentTetrimino = getRandomTetrimino();
          currentRow = 0;
          currentCol = 3;

if (!isValidMove(currentRow, currentCol, currentTetrimino.shape)) {
            gameOver = true;
          }
        }
      }

// Check for completed lines and clear them
      function checkLines() {
        let lines = [];

for (let row = 0; row < tetrisGrid.length; row++) {
          if (tetrisGrid[row].every((cell) => cell !== 0)) {
            lines.unshift(row);
          }
        }

if (lines.length > 0) {
          for (let line of lines) {
            tetrisGrid.splice(line, 1);
            tetrisGrid.unshift(Array(COLS).fill(0));
          }

score += lines.length;

// Increase difficulty every 10 cleared lines
          if (score % 10 === 0 && score !== 0) {
            clearInterval(dropInterval);
            dropInterval = Math.max(dropInterval - 100, 100);
          }
        }
      }

// Move the current tetrimino left
      function moveLeft() {
        if (isValidMove(currentRow, currentCol - 1, currentTetrimino.shape)) {
          currentCol--;
        }
      }

// Move the current tetrimino right
      function moveRight() {
        if (isValidMove(currentRow, currentCol + 1, currentTetrimino.shape)) {
          currentCol++;
        }
      }

// Rotate the current tetrimino clockwise
      function rotate() {
        // Transpose matrix
        const oldShape = currentTetrimino.shape;
        const newShape = oldShape[0].map((_, colIndex) =>
          oldShape.map((row) => row[colIndex])
        );

// Reverse rows
        newShape.forEach((row) => row.reverse());

if (isValidMove(currentRow, currentCol, newShape)) {
          currentTetrimino.shape = newShape;
        }
      }

// Move the current tetrimino down
      function drop() {
        if (!gameOver) {
          if (isValidMove(currentRow + 1, currentCol, currentTetrimino.shape)) {
            currentRow++;
          } else {
            placeTetrimino();
          }
        }
      }

// Handle keyboard input
      function handleKeyPress(event) {
        if (event.keyCode === 37) {
          moveLeft();
        } else if (event.keyCode === 39) {
          moveRight();
        } else if (event.keyCode === 38) {
          rotate();
        } else if (event.keyCode === 40) {
          drop();
        }
      }

// Game loop
      function loop() {
        clearGrid();
        drawGrid();
        drawTetrimino();

if (!gameOver) {
          drop();
        } else {
          context.fillStyle = 'black';
          context.font = '20px Arial';
          context.fillText(
            'GAME OVER',
            canvas.width / 2 - 50,
            canvas.height / 2
          );
        }
      }

// Start the game
      let dropInterval = 1000;
      document.addEventListener('keydown', handleKeyPress);
      const gameInterval = setInterval(loop, dropInterval);
    </script>
  </body>
</html>