AI game creator

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

No:12996

111

←

Prev Next

→

Tetris
Developer User5680｜Date and time 23/8/25 23:32:35
Build time 64.925 sec｜Game capacity 6.522KB｜

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>
    canvas { 
      border: 1px solid #000; 
      display: block; 
      margin: 0 auto; 
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('tetris');
      const context = canvas.getContext('2d');
      const scale = 20;
    
      const rows = canvas.height / scale;
      const columns = canvas.width / scale;
    
      let score = 0;
    
      function drawBackground() {
        context.fillStyle = '#000';
        context.fillRect(0, 0, canvas.width, canvas.height);
      }
    
      function drawScore() {
        context.fillStyle = '#fff';
        context.font = '20px Arial';
        context.fillText('Score: ' + score, 20, 40);
      }
    
      function drawBlock(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x * scale, y * scale, scale, scale);
        context.strokeStyle = '#000';
        context.strokeRect(x * scale, y * scale, scale, scale);
      }
    
      function drawMatrix(matrix, offset) {
        matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value) {
              drawBlock(x + offset.x, y + offset.y, value);
            }
          });
        });
      }
    
      function merge(matrix, player) {
        player.matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value) {
              matrix[y + player.pos.y][x + player.pos.x] = value;
            }
          });
        });
      }
    
      function collide(matrix, player) {
        for (let y = 0; y < player.matrix.length; y++) {
          for (let x = 0; x < player.matrix[y].length; x++) {
            if (player.matrix[y][x] && (matrix[y + player.pos.y] && matrix[y + player.pos.y][x + player.pos.x]) !== 0) {
              return true;
            }
          }
        }
        return false;
      }
    
      function createMatrix(rows, columns) {
        const matrix = [];
        while (rows--) {
          matrix.push(new Array(columns).fill(0));
        }
        return matrix;
      }
    
      function createPiece(type) {
        if (type === 'I') {
          return [
            [0, 0, 0, 0],
            [1, 1, 1, 1],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
          ];
        } else if (type === 'J') {
          return [
            [0, 2, 0],
            [0, 2, 0],
            [2, 2, 0]
          ];
        } else if (type === 'L') {
          return [
            [0, 3, 0],
            [0, 3, 0],
            [0, 3, 3]
          ];
        } else if (type === 'O') {
          return [
            [4, 4],
            [4, 4]
          ];
        } else if (type === 'S') {
          return [
            [0, 5, 5],
            [5, 5, 0],
            [0, 0, 0]
          ];
        } else if (type === 'T') {
          return [
            [0, 0, 0],
            [6, 6, 6],
            [0, 6, 0]
          ];
        } else if (type === 'Z') {
          return [
            [7, 7, 0],
            [0, 7, 7],
            [0, 0, 0]
          ];
        }
      }
    
      function rotate(matrix) {
        const temp = [...matrix];
        for (let y = 0; y < matrix.length; ++y) {
          for (let x = 0; x < y; ++x) {
            [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
          }
        }
        matrix.forEach(row => row.reverse());
        if (collide(arena, player)) {
          matrix = temp;
        }
        return matrix;
      }
    
      function draw() {
        drawBackground();
        drawMatrix(arena, { x: 0, y: 0 });
        drawMatrix(player.matrix, player.pos);
        drawScore();
      }
    
      function clearRows() {
        outer: for (let y = arena.length - 1; y >= 0; --y) {
          for (let x = 0; x < arena[y].length; ++x) {
            if (arena[y][x] === 0) {
              continue outer;
            }
          }
          const row = arena.splice(y, 1)[0].fill(0);
          arena.unshift(row);
          score += 10;
        }
      }
    
      function playerDrop() {
        player.pos.y++;
        if (collide(arena, player)) {
          player.pos.y--;
          merge(arena, player);
          clearRows();
          playerReset();
          if (collide(arena, player)) {
            arena.forEach(row => row.fill(0));
            score = 0;
          }
        }
        dropCounter = 0;
      }
    
      function playerMove(dir) {
        player.pos.x += dir;
        if (collide(arena, player)) {
          player.pos.x -= dir;
        }
      }
    
      function playerRotate() {
        const pos = player.pos.x;
        let offset = 1;
        rotate(player.matrix);
        while (collide(arena, player)) {
          player.pos.x += offset;
          offset = -(offset + (offset > 0 ? 1 : -1));
          if (offset > player.matrix[0].length) {
            rotate(player.matrix);
            player.pos.x = pos;
            return;
          }
        }
      }
    
      function playerReset() {
        const pieces = 'TJLOSZI';
        player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
        player.pos.y = 0;
        player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
        if (collide(arena, player)) {
          arena.forEach(row => row.fill(0));
          score = 0;
        }
      }
    
      function update(time = 0) {
        const deltaTime = time - lastTime;
        lastTime = time;
    
        dropCounter += deltaTime;
    
        if (dropCounter > dropInterval) {
          playerDrop();
        }
    
        draw();
        requestAnimationFrame(update);
      }
    
      document.addEventListener('keydown', (event) => {
        if (event.keyCode === 37) {
          playerMove(-1); // move left
        } else if (event.keyCode === 39) {
          playerMove(1); // move right
        } else if (event.keyCode === 40) {
          playerDrop(); // drop piece
        } else if (event.keyCode === 38) {
          playerRotate(); // rotate piece
        }
      });
    
      const arena = createMatrix(rows, columns);
    
      const player = {
        pos: { x: 0, y: 0 },
        matrix: null,
      };
    
      let lastTime = 0;
      let dropCounter = 0;
      let dropInterval = 1000;
    
      playerReset();
      update();
    });
  </script>
</body>
</html>