AI game creator

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

No:36638

←

Prev Next

→

Tetris
Developer User16822｜Date and time 24/1/18 5:00:19
Build time 39.18 sec｜Game capacity 8.988KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Tetris - Juego</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #000;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>

// Functions to draw different shapes using pictograms
      const drawShape = (shape, x, y, color) => {
        shape.forEach((row, rowIndex) => {
          row.forEach((value, colIndex) => {
            if (value) {
              drawBlock(x + colIndex, y + rowIndex, color);
            }
          });
        });
      };

const drawBlock = (x, y, color) => {
        context.fillStyle = color;
        context.fillRect(x * unitSize, y * unitSize, unitSize, unitSize);
        context.strokeStyle = '#333';
        context.strokeRect(x * unitSize, y * unitSize, unitSize, unitSize);
      };

// Tetromino shapes (represented using pictograms)
      const tetrominos = {
        I: [
          [0, 0, 0, 0],
          [1, 1, 1, 1],
          [0, 0, 0, 0],
          [0, 0, 0, 0]
        ],
        J: [
          [1, 0, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        L: [
          [0, 0, 1],
          [1, 1, 1],
          [0, 0, 0]
        ],
        O: [
          [1, 1],
          [1, 1]
        ],
        S: [
          [0, 1, 1],
          [1, 1, 0],
          [0, 0, 0]
        ],
        T: [
          [0, 1, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        Z: [
          [1, 1, 0],
          [0, 1, 1],
          [0, 0, 0]
        ]
      };

// Colors for different tetromino shapes
      const tetrominoColors = {
        I: '#00FFFF',
        J: '#0000FF',
        L: '#FFA500',
        O: '#FFFF00',
        S: '#00FF00',
        T: '#800080',
        Z: '#FF0000'
      };

// Matrix representing the playfield
      const playfield = Array.from({ length: playfieldHeight }, () => new Array(playfieldWidth).fill(0));

// Function to draw the entire playfield on the canvas
      const drawPlayfield = () => {
        playfield.forEach((row, rowIndex) => {
          row.forEach((value, colIndex) => {
            if (value) {
              drawBlock(colIndex, rowIndex, tetrominoColors[value]);
            }
          });
        });
      };

// Function to clear the playfield
      const clearPlayfield = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);
      };

// Function to merge the falling tetromino with the playfield
      const mergeTetromino = () => {
        tetromino.shape.forEach((row, rowIndex) => {
          row.forEach((value, colIndex) => {
            if (value) {
              playfield[tetromino.y + rowIndex][tetromino.x + colIndex] = tetromino.type;
            }
          });
        });
      };

// Function to check if the falling tetromino collided with any other tetrominos or the boundaries
      const checkCollision = (offsetX, offsetY, newRotation) => {
        const tetrominoCopy = JSON.parse(JSON.stringify(tetromino));
        tetrominoCopy.x += offsetX;
        tetrominoCopy.y += offsetY;
        tetrominoCopy.rotation = newRotation;
      
        for (let row = 0; row < tetrominoCopy.shape.length; row++) {
          for (let col = 0; col < tetrominoCopy.shape[row].length; col++) {
            if (tetrominoCopy.shape[row][col]) {
              const playfieldRow = tetrominoCopy.y + row;
              const playfieldCol = tetrominoCopy.x + col;
      
              if (
                playfieldRow >= playfieldHeight ||
                playfieldCol < 0 ||
                playfieldCol >= playfieldWidth ||
                playfield[playfieldRow][playfieldCol]
              ) {
                return true;
              }
            }
          }
        }
      
        return false;
      };

// Function to rotate the falling tetromino
      const rotateTetromino = () => {
        const prevRotation = tetromino.rotation;
        tetromino.rotation = (tetromino.rotation + 1) % tetromino.shape.length;

if (checkCollision(0, 0, tetromino.rotation)) {
          // If rotation leads to collision, revert it
          tetromino.rotation = prevRotation;
        }
      };

// Function to move the falling tetromino left
      const moveTetrominoLeft = () => {
        if (!checkCollision(-1, 0, tetromino.rotation)) {
          tetromino.x--;
        }
      };

// Function to move the falling tetromino right
      const moveTetrominoRight = () => {
        if (!checkCollision(1, 0, tetromino.rotation)) {
          tetromino.x++;
        }
      };

// Function to move the falling tetromino down
      const moveTetrominoDown = () => {
        if (!checkCollision(0, 1, tetromino.rotation)) {
          tetromino.y++;
        } else {
          mergeTetromino();
          checkRows();
          tetromino = getNextTetromino();
          if (checkCollision(0, 0, tetromino.rotation)) {
            // If new tetromino collided immediately, game over
            gameOver();
          }
        }
      };

// Function to check if any rows are complete and should be cleared
      const checkRows = () => {
        outer: for (let row = playfieldHeight - 1; row >= 0; row--) {
          for (let col = 0; col < playfieldWidth; col++) {
            if (!playfield[row][col]) {
              continue outer;
            }
          }
        
          // If a row is complete, remove it and shift all rows above it down
          playfield.splice(row, 1);
          playfield.unshift(new Array(playfieldWidth).fill(0));
        }
      };

// Function to generate a random tetromino type
      const getRandomTetrominoType = () => {
        const tetrominoTypes = 'IJLOSTZ';
        return tetrominoTypes[Math.floor(Math.random() * tetrominoTypes.length)];
      };

// Function to get the next tetromino
      const getNextTetromino = () => {
        const type = tetrominoQueue.length > 0 ? tetrominoQueue.shift() : getRandomTetrominoType();
        tetrominoQueue.push(getRandomTetrominoType());
        return {
          type,
          shape: tetrominos[type],
          rotation: 0,
          x: Math.floor((playfieldWidth - tetrominos[type][0].length) / 2),
          y: 0
        };
      };

// Function to draw the falling tetromino on the canvas
      const drawTetromino = () => {
        drawShape(tetromino.shape, tetromino.x, tetromino.y, tetrominoColors[tetromino.type]);
      };

// Function to draw the next tetromino preview
      const drawNextTetromino = () => {
        const previewCanvas = document.createElement('canvas');
        const previewContext = previewCanvas.getContext('2d');
        previewCanvas.width = 4 * unitSize;
        previewCanvas.height = 4 * unitSize;
        previewCanvas.style.border = '1px solid #333';

const nextTetromino = tetrominoQueue[0] ? tetrominos[tetrominoQueue[0]] : tetrominos[getRandomTetrominoType()];
        drawShape(nextTetromino, 0.5, 0.5, tetrominoColors[Object.keys(tetrominos).find(key => tetrominos[key] === nextTetromino)], previewContext);

const scaleFactor = unitSize / 4;
        context.drawImage(previewCanvas, canvas.width - previewCanvas.width - 10, canvas.height - previewCanvas.height - 10, previewCanvas.width * scaleFactor, previewCanvas.height * scaleFactor);
      };

// Function to handle game over
      const gameOver = () => {
        clearInterval(gameInterval);
        clearPlayfield();
        context.fillStyle = '#fff';
        context.font = '36px Arial';
        context.textAlign = 'center';
        context.fillText('GAME OVER', canvas.width / 2, canvas.height / 2);
      };

// Initialize the game
      let tetromino = getNextTetromino();
      const tetrominoQueue = [getRandomTetrominoType()];
      let gameInterval = setInterval(() => {
        clearPlayfield();
        drawPlayfield();
        drawTetromino();
        drawNextTetromino();
        moveTetrominoDown();
      }, 1000 / 2); // Adjust the game speed here (currently set to 2 pieces per second)

// Handle keyboard input for controlling the tetromino
      document.addEventListener('keydown', e => {
        if (e.code === 'ArrowUp') {
          rotateTetromino();
        } else if (e.code === 'ArrowLeft') {
          moveTetrominoLeft();
        } else if (e.code === 'ArrowRight') {
          moveTetrominoRight();
        } else if (e.code === 'ArrowDown') {
          moveTetrominoDown();
        }
      });
    });
  </script>
</body>
</html>