蟹版テトリス's game | AI game creator

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

No:29600

52

蟹版テトリス
Developer User14508｜Date and time 23/12/17 19:15:51
Build time 43.987 sec｜Game capacity 5.035KB｜

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>蟹版テトリス</title>
<style>
  #board {
    width: 200px;
    height: 400px;
    border: 1px solid black;
  }

.row {
    display: flex;
    height: 20px;
  }

.cell {
    width: 20px;
    background-color: white;
    border: 1px solid gray;
  }

.active {
    background-color: salmon;
  }
</style>
</head>
<body>
  <div id="board"></div>

<script>
    // 初期状態
    const rows = 20;
    const columns = 10;
    const board = new Array(rows).fill().map(() => new Array(columns).fill(0));
    let activePiece = generatePiece();
    let intervalId;
  
    // キーボード操作のイベントリスナー
    document.addEventListener('keydown', handleKeyPress);
  
    // ゲーム開始
    start();
  
    function start() {
      drawBoard();
      intervalId = setInterval(moveDown, 1000);
    }
  
    function generatePiece() {
      const pieces = [
        [[1, 1], [1, 1]],
        [[0, 1, 0], [1, 1, 1]],
        [[1, 1, 0], [0, 1, 1]],
        [[1, 1, 1], [0, 0, 1]],
        [[1, 1, 1, 1]],
        [[1], [1], [1], [1]],
        [[0, 1], [0, 1], [0, 1], [0, 1]]
      ];
  
      const randomIndex = Math.floor(Math.random() * pieces.length);
      return pieces[randomIndex];
    }
  
    function drawBoard() {
      const boardElement = document.getElementById('board');
  
      boardElement.innerHTML = '';
  
      board.forEach((row, rowIndex) => {
        const rowElement = document.createElement('div');
        rowElement.className = 'row';
  
        row.forEach((cell, columnIndex) => {
          const cellElement = document.createElement('div');
          cellElement.className = 'cell';
  
          if (cell === 1) {
            cellElement.style.backgroundColor = 'gray';
          }
  
          if (
            activePiece &&
            rowIndex >= activePiece.row &&
            rowIndex < activePiece.row + activePiece.shape.length &&
            columnIndex >= activePiece.column &&
            columnIndex <
              activePiece.column + activePiece.shape[0].length &&
            activePiece.shape[rowIndex - activePiece.row][
              columnIndex - activePiece.column
            ] === 1
          ) {
            cellElement.className = 'cell active';
          }
  
          rowElement.appendChild(cellElement);
        });
  
        boardElement.appendChild(rowElement);
      });
    }
  
    function moveDown() {
      if (!isColliding(1, 0)) {
        activePiece.row++;
      } else {
        mergePiece();
        activePiece = generatePiece();
  
        if (isColliding(0, 0)) {
          // ゲームオーバー
          clearInterval(intervalId);
          alert('ゲームオーバー！');
        }
      }
  
      drawBoard();
    }
  
    function moveLeft() {
      if (!isColliding(0, -1)) {
        activePiece.column--;
        drawBoard();
      }
    }
  
    function moveRight() {
      if (!isColliding(0, 1)) {
        activePiece.column++;
        drawBoard();
      }
    }
  
    function rotate() {
      if (!isColliding(0, 0, getRotatedPiece())) {
        activePiece.shape = getRotatedPiece();
        drawBoard();
      }
    }
  
    function mergePiece() {
      for (let row = 0; row < activePiece.shape.length; row++) {
        for (let column = 0; column < activePiece.shape[row].length; column++) {
          if (activePiece.shape[row][column] === 1) {
            board[activePiece.row + row][activePiece.column + column] = 1;
          }
        }
      }
    }
  
    function isColliding(rowOffset, columnOffset, piece = activePiece.shape) {
      for (let row = 0; row < piece.length; row++) {
        for (let column = 0; column < piece[row].length; column++) {
          if (piece[row][column] === 0) {
            continue;
          }
  
          const newRow = activePiece.row + row + rowOffset;
          const newColumn = activePiece.column + column + columnOffset;
  
          if (
            newRow >= rows ||
            newRow < 0 ||
            newColumn >= columns ||
            newColumn < 0 ||
            board[newRow][newColumn] === 1
          ) {
            return true;
          }
        }
      }
  
      return false;
    }
  
    function getRotatedPiece() {
      const height = activePiece.shape.length;
      const width = activePiece.shape[0].length;
      const newShape = new Array(width).fill().map(() => new Array(height).fill(0));
  
      for (let row = 0; row < height; row++) {
        for (let column = 0; column < width; column++) {
          newShape[column][height - 1 - row] = activePiece.shape[row][column];
        }
      }
  
      return newShape;
    }
  
    function handleKeyPress(event) {
      switch (event.key) {
        case 'ArrowUp':
          rotate();
          break;
        case 'ArrowDown':
          moveDown();
          break;
        case 'ArrowLeft':
          moveLeft();
          break;
        case 'ArrowRight':
          moveRight();
          break;
      }
    }
  </script>
</body>
</html>