AI game creator

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

No:13268

←

Prev Next

→

Tetris
Developer User5841｜Date and time 23/8/27 18:48:20
Build time 37.385 sec｜Game capacity 5.909KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #000;
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      position: absolute;
    }
    #score {
      color: #fff;
      font-size: 20px;
      font-family: Arial, sans-serif;
      margin: 20px;
      position: absolute;
      z-index: 1;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <div id="score"></div>
  <script>
    const canvas = document.getElementById('tetris');
    const context = canvas.getContext('2d');
    const scoreElement = document.getElementById('score');
    const score = {
      value: 0,
      update: function() {
        scoreElement.textContent = `Score: ${this.value}`;
      }
    };

const ROW = 20;
    const COLUMN = 10;
    const TILE_SIZE = 20;
    const COLORS = [
      'cyan', 'blue', 'orange', 'yellow', 'green', 'purple', 'red'
    ];

let grid = createGrid();
    let currentPiece = createPiece();
    let gameLoop;

function createGrid() {
      const grid = [];
      for (let row = 0; row < ROW; row++) {
        grid.push(new Array(COLUMN).fill(0));
      }
      return grid;
    }

function drawGrid() {
      for (let row = 0; row < ROW; row++) {
        for (let col = 0; col < COLUMN; col++) {
          drawTile(col, row, grid[row][col]);
        }
      }
    }

function drawTile(x, y, color) {
      context.fillStyle = COLORS[color];
      context.fillRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
      context.strokeStyle = 'black';
      context.lineWidth = 2;
      context.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
    }

function createPiece() {
      const index = Math.floor(Math.random() * COLORS.length);
      const type = index + 1;
      const piece = {
        x: Math.floor(COLUMN / 2) - Math.floor(type / 2),
        y: 0,
        color: index + 1,
        shape: getPieceShape(type)
      };
      return piece;
    }

function getPieceShape(type) {
      switch (type) {
        case 1: // I
          return [[1, 1, 1, 1]];        
        case 2: // L
          return [[0, 0, 2], [2, 2, 2]];
        case 3: // J
          return [[3, 0, 0], [3, 3, 3]];
        case 4: // O
          return [[4, 4], [4, 4]];
        case 5: // Z
          return [[5, 5, 0], [0, 5, 5]];
        case 6: // S
          return [[0, 6, 6], [6, 6, 0]];
        case 7: // T
          return [[0, 7, 0], [7, 7, 7]];
      }
    }

function rotate(piece) {
      const shape = piece.shape;
      const pieceCopy = JSON.parse(JSON.stringify(piece));
      const N = shape.length;
      for (let row = 0; row < N; row++) {
        for (let col = 0; col < row; col++) {
          [shape[row][col], shape[col][row]] = [shape[col][row], shape[row][col]];
        }
      }
      shape.forEach(row => row.reverse());

if (collide(piece)) {
        return pieceCopy;
      }
      return piece;
    }

function collide(piece) {
      const shape = piece.shape;
      const x = piece.x;
      const y = piece.y;

for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
          if (shape[row][col] !== 0) {
            const newX = x + col;
            const newY = y + row;
            if (newX < 0 || newX >= COLUMN || newY >= ROW || grid[newY][newX] !== 0) {
              return true;
            }
          }
        }
      }
      return false;
    }

function merge(piece) {
      const shape = piece.shape;
      const x = piece.x;
      const y = piece.y;

for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
          if (shape[row][col] !== 0) {
            const newX = x + col;
            const newY = y + row;
            grid[newY][newX] = piece.color;
          }
        }
      }
    }

function removeFullRows() {
      let rowsToClear = [];
      for (let row = 0; row < ROW; row++) {
        if (grid[row].every(cell => cell !== 0)) {
          rowsToClear.push(row);
        }
      }

for (let i = 0; i < rowsToClear.length; i++) {
        const row = rowsToClear[i];
        grid.splice(row, 1);
        grid.unshift(new Array(COLUMN).fill(0));
      }

score.value += rowsToClear.length * 10;
      score.update();
    }

function gameOver() {
      clearInterval(gameLoop);
      alert('Game Over!');
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawGrid();
      drawPiece(currentPiece);
    }

function movePiece(direction) {
      currentPiece.x += direction;
      if (collide(currentPiece)) {
        currentPiece.x -= direction;
      }
    }

function startGame() {
      gameLoop = setInterval(() => {
        update();
        draw();
      }, 1000);

window.addEventListener('keydown', (event) => {
        switch (event.key) {
          case 'ArrowLeft':
            movePiece(-1);
            break;
          case 'ArrowRight':
            movePiece(1);
            break;
          case 'ArrowDown':
            update();
            break;
          case 'ArrowUp':
            currentPiece = rotate(currentPiece);
            break;
        }
      });
    }

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