AI game creator

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

No:27067

129

←

Prev Next

→

Tetris
Developer User13383｜Date and time 23/12/4 3:19:15
Build time 57.707 sec｜Game capacity 5.812KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      display: block;
      margin: 20px auto;
      background: #000;
    }
  </style>
</head>
<body>
  <canvas id="tetrisCanvas" width="320" height="640"></canvas>
  <script>
    (function () {
      const canvas = document.getElementById('tetrisCanvas');
      const context = canvas.getContext('2d');

const blockSize = 32;
      const rows = canvas.height / blockSize;
      const cols = canvas.width / blockSize;
      const emptyColor = '#232323';
      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]]
      ];

const pieceColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
      const field = [...Array(rows)].map(() => Array(cols).fill(0));

let currentPiece = getRandomPiece();
      let currentPieceColor = getRandomColor();
      let currentX = Math.floor(cols / 2) - Math.floor(currentPiece.length / 2);
      let currentY = 0;
      let score = 0;

function drawBlock(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
        context.strokeStyle = '#333';
        context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
      }

function movePieceLeft() {
        if (canPieceMoveTo(currentPiece, currentX - 1, currentY)) {
          currentX--;
        }
      }

function movePieceRight() {
        if (canPieceMoveTo(currentPiece, currentX + 1, currentY)) {
          currentX++;
        }
      }

function rotatePiece() {
        const rotatedPiece = currentPiece[0].map((_, colIndex) =>
          currentPiece.map(row => row[colIndex]).reverse()
        );
        if (canPieceMoveTo(rotatedPiece, currentX, currentY)) {
          currentPiece = rotatedPiece;
        }
      }

function getRandomPiece() {
        const randomIndex = Math.floor(Math.random() * pieces.length);
        return pieces[randomIndex];
      }

function getRandomColor() {
        const randomIndex = Math.floor(Math.random() * pieceColors.length);
        return pieceColors[randomIndex];
      }

function drawScore() {
        context.fillStyle = '#FFF';
        context.font = 'bold 20px Arial';
        context.textAlign = 'left';
        context.fillText('Score: ' + score, 20, 30);
      }

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

function mainLoop() {
        clearCanvas();
        drawField();
        drawPiece();
        drawScore();
        movePieceDown();
      }

const interval = setInterval(mainLoop, 300);
    })();
  </script>
</body>
</html>