テトリス's game | AI game creator

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

No:22536

92

テトリス
Developer User10397｜Date and time 23/10/23 2:46:41
Build time 98.389 sec｜Game capacity 5.838KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #game-board {
      border: 2px solid white;
      width: 300px;
      height: 600px;
      background-color: #222;
      position: relative;
    }
    
    .block {
      width: 30px;
      height: 30px;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
      const colors = ['🔵', '🔴', '🟢', '🟡', '🟣', '🟠', '🟤'];

const gameBoard = document.getElementById('game-board');
      const grid = createGrid();
      let currentPosition = 4;
      let currentRotation = 0;
      let currentBlock = Math.floor(Math.random() * colors.length);

draw();

function createGrid() {
        const grid = [];
        for (let i = 0; i < 20; i++) {
          const row = [];
          for (let j = 0; j < 10; j++) {
            row.push(0);
          }
          grid.push(row);
        }
        return grid;
      }

function draw() {
        gameBoard.innerHTML = '';
        for (let i = 0; i < grid.length; i++) {
          for (let j = 0; j < grid[i].length; j++) {
            const block = document.createElement('div');
            block.classList.add('block');
            block.style.left = j * 30 + 'px';
            block.style.top = i * 30 + 'px';
            if (grid[i][j] === 0) {
              block.innerText = '';
              block.style.backgroundColor = '#222';
            } else {
              block.innerText = colors[grid[i][j] - 1];
              block.style.backgroundColor = 'white';
            }
            gameBoard.appendChild(block);
          }
        }
      }

function update() {
        if (isValidMove()) {
          merge();
          checkBoard();
          createNewBlock();
        } else {
          currentPosition -= 10;
          draw();
        }
      }

function isValidMove() {
        const current = createCurrentBlock();
        for (let i = 0; i < current.length; i++) {
          for (let j = 0; j < current[i].length; j++) {
            if (
              current[i][j] !== 0 &&
              (grid[i + currentPosition] && grid[i + currentPosition][j] !== 0)
            ) {
              return false;
            }
          }
        }
        return true;
      }

function merge() {
        const current = createCurrentBlock();
        for (let i = 0; i < current.length; i++) {
          for (let j = 0; j < current[i].length; j++) {
            if (current[i][j] !== 0) {
              grid[i + currentPosition][j] = currentBlock + 1;
            }
          }
        }
      }

function checkBoard() {
        for (let i = 0; i < grid.length; i++) {
          if (grid[i].every(cell => cell !== 0)) {
            grid.splice(i, 1);
            grid.unshift(Array(10).fill(0));
          }
        }
      }

function createNewBlock() {
        currentPosition = 4;
        currentRotation = 0;
        currentBlock = Math.floor(Math.random() * colors.length);
      }

function createCurrentBlock() {
        return [
          [[0, 1], [0, 1], [0, 1], [0, 1]],
          [[0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0]],
          [[1, 1], [1, 1]],
          [[0, 1, 0], [1, 1, 1], [0, 1, 0]],
          [[0, 1, 1], [1, 1, 0], [0, 0, 0]],
          [[1, 1, 0], [0, 1, 1], [0, 0, 0]],
          [[0, 0, 1], [1, 1, 1], [0, 0, 0]]
        ][currentBlock][currentRotation];
      }

function rotateBlock() {
        const nextRotation = (currentRotation + 1) % 4;
        const current = createCurrentBlock();
        let valid = true;
        for (let i = 0; i < current.length; i++) {
          for (let j = 0; j < current[i].length; j++) {
            if (
              current[i][j] !== 0 &&
              (grid[i + currentPosition] && grid[i + currentPosition][j] !== 0)
            ) {
              valid = false;
              break;
            }
          }
        }
        if (valid) {
          currentRotation = nextRotation;
        }
      }

function moveLeft() {
        currentPosition--;
        if (!isValidMove()) {
          currentPosition++;
        }
      }

function moveRight() {
        currentPosition++;
        if (!isValidMove()) {
          currentPosition--;
        }
      }

function drawNewBlock() {
        const current = createCurrentBlock();
        for (let i = 0; i < current.length; i++) {
          for (let j = 0; j < current[i].length; j++) {
            if (current[i][j] !== 0) {
              const block = document.createElement('div');
              block.classList.add('block');
              block.style.left = (j + currentPosition) * 30 + 'px';
              block.style.top = i * 30 + 'px';
              block.innerText = colors[currentBlock];
              block.style.backgroundColor = 'white';
              gameBoard.appendChild(block);
            }
          }
        }
      }

function moveDown() {
        currentPosition += 10;
        if (!isValidMove()) {
          currentPosition -= 10;
          update();
          return;
        }
      }

document.addEventListener('keydown', event => {
        if (event.key === 'ArrowUp') {
          rotateBlock();
        } else if (event.key === 'ArrowLeft') {
          moveLeft();
        } else if (event.key === 'ArrowRight') {
          moveRight();
        } else if (event.key === 'ArrowDown') {
          moveDown();
        }
        draw();
        drawNewBlock();
      });

setInterval(() => {
        moveDown();
        draw();
        drawNewBlock();
      }, 1000);
    });
  </script>
</body>
</html>