テトリス's game | AI game creator

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

No:23721

43

テトリス
Developer User11130｜Date and time 23/11/3 9:07:09
Build time 108.235 sec｜Game capacity 4.567KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <style>
      #tetris {
        width: 300px;
        height: 600px;
        border: 1px solid black;
        margin: auto;
        position: relative;
      }
      .cell {
        width: 30px;
        height: 30px;
        border: 1px solid grey;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="tetris"></div>

<script>
      const tetrisContainer = document.getElementById("tetris");
      const gridWidth = 10;
      const gridHeight = 20;
      const emptyCell = "⬛";

const shapes = [
        [[1, 1], [1, 1]],
        [[1, 1, 1, 1]]
      ];

let grid = [];
      let currentShape = null;
      let currentRow = 0;
      let currentCol = 0;
      let gameInterval = null;

function createGrid() {
        for (let i = 0; i < gridHeight; i++) {
          let row = [];
          for (let j = 0; j < gridWidth; j++) {
            row.push(emptyCell);
          }
          grid.push(row);
        }
      }

function updateGrid() {
        tetrisContainer.innerHTML = "";
        for (let i = 0; i < gridHeight; i++) {
          for (let j = 0; j < gridWidth; j++) {
            const cell = document.createElement("div");
            cell.classList.add("cell");
            cell.innerText = grid[i][j];
            tetrisContainer.appendChild(cell);
          }
          tetrisContainer.appendChild(document.createElement("br"));
        }
      }

function generateShape() {
        const randomIndex = Math.floor(Math.random() * shapes.length);
        currentShape = shapes[randomIndex];
        currentRow = 0;
        currentCol = Math.floor((gridWidth - currentShape[0].length) / 2);
      }

function rotateShape() {
        const oldShape = currentShape;
        currentShape = [];
        for (let i = 0; i < oldShape[0].length; i++) {
          let row = [];
          for (let j = oldShape.length - 1; j >= 0; j--) {
            row.push(oldShape[j][i]);
          }
          currentShape.push(row);
        }
      }

function isValidMove(rowOffset, colOffset) {
        for (let i = 0; i < currentShape.length; i++) {
          for (let j = 0; j < currentShape[i].length; j++) {
            if (
              currentShape[i][j] &&
              (currentRow + i + rowOffset >= gridHeight ||
                currentCol + j + colOffset < 0 ||
                currentCol + j + colOffset >= gridWidth ||
                grid[currentRow + i + rowOffset][currentCol + j + colOffset] !==
                  emptyCell)
            ) {
              return false;
            }
          }
        }
        return true;
      }

function moveShape(rowOffset, colOffset) {
        if (isValidMove(rowOffset, colOffset)) {
          currentRow += rowOffset;
          currentCol += colOffset;
        }
      }

function dropShape() {
        if (isValidMove(1, 0)) {
          currentRow++;
        } else {
          placeShape();
          generateShape();
          if (!isValidMove(0, 0)) {
            gameOver();
          }
        }
      }

function placeShape() {
        for (let i = 0; i < currentShape.length; i++) {
          for (let j = 0; j < currentShape[i].length; j++) {
            if (currentShape[i][j]) {
              grid[currentRow + i][currentCol + j] = "🟦";
            }
          }
        }
        clearRows();
        updateGrid();
      }

function clearRows() {
        for (let i = gridHeight - 1; i >= 0; i--) {
          let rowIsFull = true;
          for (let j = 0; j < gridWidth; j++) {
            if (grid[i][j] === emptyCell) {
              rowIsFull = false;
              break;
            }
          }
          if (rowIsFull) {
            grid.splice(i, 1);
            grid.unshift(new Array(gridWidth).fill(emptyCell));
          }
        }
      }

function startGame() {
        createGrid();
        generateShape();
        updateGrid();
        gameInterval = setInterval(dropShape, 1000);
      }

function gameOver() {
        clearInterval(gameInterval);
        alert("Game Over");
      }

window.addEventListener("keydown", function (event) {
        if (event.key === "ArrowLeft") {
          moveShape(0, -1);
        } else if (event.key === "ArrowRight") {
          moveShape(0, 1);
        } else if (event.key === "ArrowDown") {
          dropShape();
        } else if (event.key === "ArrowUp") {
          rotateShape();
        }
        updateGrid();
      });

startGame();
    </script>
  </body>
</html>