AI game creator

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

No:34934

105

←

Prev Next

→

Tetris
Developer User16392｜Date and time 24/1/12 19:39:44
Build time 32.427 sec｜Game capacity 6.93KB｜

Script

Score: 0

Game Over

←

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>
    #game-board {
      width: 300px;
      height: 600px;
      border: 1px solid black;
      margin: auto;
      position: relative;
    }
    
    .block {
      width: 29.5px;
      height: 29.5px;
      border: 0.5px solid gray;
      background-color: transparent;
      position: absolute;
    }
    
    #score {
      text-align: center;
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
    }
    
    #game-over {
      text-align: center;
      margin-top: 20px;
      font-size: 48px;
      font-weight: bold;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <div id="score">Score: 0</div>
  <div id="game-over">Game Over</div>

const rows = 20;
      const columns = 10;
      const blockWidth = 29.5;
      const blockHeight = 29.5;
      const emptyColor = 'transparent';
      const colors = ['red', 'yellow', 'green', 'blue', 'purple'];

let score = 0;
      let gameGrid = new Array(rows).fill(null).map(() => new Array(columns).fill(emptyColor));

function createBlock() {
        const block = document.createElement('div');
        block.classList.add('block');

return block;
      }

function draw() {
        gameBoard.innerHTML = '';

for (let row = 0; row < rows; row++) {
          for (let column = 0; column < columns; column++) {
            const block = createBlock();
            block.style.top = (blockHeight * row) + 'px';
            block.style.left = (blockWidth * column) + 'px';
            block.style.backgroundColor = gameGrid[row][column];

gameBoard.appendChild(block);
          }
        }
      }

function rotateTetromino() {
        const newTetromino = [];

for (let column = 0; column < currentTetromino[0].length; column++) {
          const newRow = [];

for (let row = currentTetromino.length - 1; row >= 0; row--) {
            newRow.push(currentTetromino[row][column]);
          }

newTetromino.push(newRow);
        }

return newTetromino;
      }

function clearRows() {
        let rowCount = 0;

outer: for (let row = rows - 1; row >= 0; row--) {
          for (let column = 0; column < columns; column++) {
            if (gameGrid[row][column] === emptyColor) {
              continue outer;
            }
          }

const clearedRow = gameGrid.splice(row, 1)[0].fill(emptyColor);
          gameGrid.unshift(clearedRow);
          rowCount++;
        }

score += (rowCount * 10);
        scoreElement.textContent = `Score: ${score}`;
      }

function gameOver() {
        clearInterval(gameInterval);
        gameOverElement.style.display = 'block';
      }

function moveDown() {
        if (!checkCollision(currentTetromino, tetrominoX, tetrominoY + 1)) {
          tetrominoY++;
        } else {
          mergeTetromino();
          clearRows();

if (tetrominoY === 0) {
            gameOver();
            return;
          }

tetrominoX = 3;
          tetrominoY = 0;
          currentTetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
        }

draw();
      }

function moveLeft() {
        if (!checkCollision(currentTetromino, tetrominoX - 1, tetrominoY)) {
          tetrominoX--;
          draw();
        }
      }

function moveRight() {
        if (!checkCollision(currentTetromino, tetrominoX + 1, tetrominoY)) {
          tetrominoX++;
          draw();
        }
      }

function rotate() {
        const rotatedTetromino = rotateTetromino();

if (!checkCollision(rotatedTetromino, tetrominoX, tetrominoY)) {
          currentTetromino = rotatedTetromino;
          draw();
        }
      }

const tetrominos = [
        [
          [emptyColor, emptyColor, emptyColor, emptyColor],
          [colors[0], colors[0], colors[0], colors[0]],
          [emptyColor, colors[0], emptyColor, emptyColor],
          [emptyColor, emptyColor, emptyColor, emptyColor],
        ],
        [
          [emptyColor, emptyColor, emptyColor, emptyColor],
          [emptyColor, emptyColor, colors[1], emptyColor],
          [emptyColor, colors[1], colors[1], colors[1]],
          [emptyColor, emptyColor, emptyColor, emptyColor],
        ],
        [
          [emptyColor, emptyColor, emptyColor, emptyColor],
          [emptyColor, colors[2], emptyColor, emptyColor],
          [emptyColor, colors[2], colors[2], colors[2]],
          [emptyColor, emptyColor, emptyColor, emptyColor],
        ],
        [
          [emptyColor, emptyColor, emptyColor, emptyColor],
          [emptyColor, colors[3], colors[3], emptyColor],
          [emptyColor, colors[3], colors[3], emptyColor],
          [emptyColor, emptyColor, emptyColor, emptyColor],
        ],
        [
          [emptyColor, emptyColor, emptyColor, emptyColor],
          [emptyColor, emptyColor, colors[4], emptyColor],
          [colors[4], colors[4], colors[4], emptyColor],
          [emptyColor, emptyColor, emptyColor, emptyColor],
        ],
      ];

let currentTetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
      let tetrominoX = 3;
      let tetrominoY = 0;

draw();

const gameSpeed = 500;
      const gameInterval = setInterval(moveDown, gameSpeed);
    });
  </script>
</body>
</html>