AI game creator

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

No:39659

←

Prev Next

→

テトリス10
Developer User17762｜Date and time 24/1/29 18:54:43
Build time 33.198 sec｜Game capacity 5.379KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tetris</title>
  <style>
    body {
      overflow: hidden;
      margin: 0;
      padding: 0;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

#gameCanvas {
      background-color: #333;
    }

.cell {
      width: 25px;
      height: 25px;
      border: 1px solid #444;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="250" height="500"></canvas>

const rows = 20;
    const columns = 10;
    const cellSize = 25;
    const boardWidth = cellSize * columns;
    const boardHeight = cellSize * rows;

const pieces = [
      [[1, 1, 1, 1]],
      [[1, 1], [1, 1]],
      [[1, 1, 0], [0, 1, 1]],
      [[0, 1, 1], [1, 1, 0]],
      [[1, 1, 1], [0, 1, 0]],
      [[1, 1, 1], [1, 0, 0]],
      [[1, 1, 1], [0, 0, 1]]
    ];

const colors = [
      '#FF5733',
      '#C70039',
      '#900C3F',
      '#581845',
      '#FFC300',
      '#DAF7A6',
      '#00FFD1'
    ];

let board = [];
    let currentPiece = null;
    let currentPieceX = 0;
    let currentPieceY = 0;
    let currentPieceColor = '';
    let gameLoop;

function initialize() {
      for (let row = 0; row < rows; row++) {
        board[row] = [];
        for (let col = 0; col < columns; col++) {
          board[row][col] = '';
        }
      }
    }

function newPiece() {
      const pieceIndex = Math.floor(Math.random() * pieces.length);
      const piece = pieces[pieceIndex];
      const color = colors[pieceIndex];
      currentPiece = piece;
      currentPieceX = Math.floor(columns / 2) - Math.floor(piece[0].length / 2);
      currentPieceY = 0;
      currentPieceColor = color;
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

for (let row = 0; row < rows; row++) {
        for (let col = 0; col < columns; col++) {
          if (board[row][col]) {
            context.fillStyle = board[row][col];
            context.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
          }
        }
      }

if (currentPiece) {
        for (let row = 0; row < currentPiece.length; row++) {
          for (let col = 0; col < currentPiece[row].length; col++) {
            if (currentPiece[row][col]) {
              const x = currentPieceX + col;
              const y = currentPieceY + row;
              context.fillStyle = currentPieceColor;
              context.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
            }
          }
        }
      }
    }

function rotate(piece) {
      const rotatedPiece = [];
      const rows = piece.length;
      const columns = piece[0].length;

for (let row = 0; row < columns; row++) {
        rotatedPiece[row] = [];
        for (let col = 0; col < rows; col++) {
          rotatedPiece[row][col] = piece[rows - col - 1][row];
        }
      }

return rotatedPiece;
    }

function moveDown() {
      currentPieceY++;

if (collide()) {
        currentPieceY--;
        merge();
        removeFullRows();
        newPiece();
      }
    }

function moveLeft() {
      currentPieceX--;

if (collide()) {
        currentPieceX++;
      }
    }

function moveRight() {
      currentPieceX++;

if (collide()) {
        currentPieceX--;
      }
    }

function rotatePiece() {
      const rotatedPiece = rotate(currentPiece);
      const initialX = currentPieceX;

currentPiece = rotatedPiece;

if (collide()) {
        currentPieceX = initialX;
        currentPiece = rotate(currentPiece);
        currentPiece = rotate(currentPiece);
        currentPiece = rotate(currentPiece);
      }
    }

function startGame() {
      initialize();
      newPiece();

gameLoop = setInterval(() => {
        moveDown();
        draw();
      }, 500);

document.addEventListener('keydown', handleKeyDown);
    }

function handleKeyDown(event) {
      switch (event.keyCode) {
        case 37:
          moveLeft();
          break;
        case 38:
          rotatePiece();
          break;
        case 39:
          moveRight();
          break;
        case 40:
          moveDown();
          break;
      }
    }

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