Tetris's game | AI game creator

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

No:31502

58

Tetris
Developer User14891｜Date and time 23/12/27 8:12:51
Build time 47.019 sec｜Game capacity 6.356KB｜

→ 　

0　

0　

　
　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    canvas {
      border: 1px solid #000;
      background: #f0f0f0;
      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;
      context.scale(scale, scale);

function createMatrix(width, height) {
        const matrix = [];
        while (height--) {
          matrix.push(new Array(width).fill(0));
        }
        return matrix;
      }

function drawMatrix(matrix, offset) {
        matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              context.fillStyle = 'red';
              context.fillRect(x + offset.x, y + offset.y, 1, 1);
            }
          });
        });
      }

function collide(matrix, player, offset) {
        const [m, o] = [player.matrix, offset];
        for (let y = 0; y < m.length; ++y) {
          for (let x = 0; x < m[y].length; ++x) {
            if (m[y][x] !== 0 && (matrix[y + o.y] && matrix[y + o.y][x + o.x]) !== 0) {
              return true;
            }
          }
        }
        return false;
      }

function merge(matrix, player, offset) {
        player.matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              matrix[y + offset.y][x + offset.x] = value;
            }
          });
        });
      }

function rotate(matrix, dir) {
        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],
            ];
          }
        }

if (dir > 0) {
          matrix.forEach(row => row.reverse());
        } else {
          matrix.reverse();
        }
      }

function playerDrop() {
        player.position.y++;
        if (collide(matrix, player, { x: 0, y: 1 })) {
          player.position.y--;
          merge(matrix, player, player.position);
          playerReset();
          arenaSweep();
          updateScore();
        }
        dropCounter = 0;
      }

function playerMove(dir) {
        player.position.x += dir;
        if (collide(matrix, player, { x: dir, y: 0 })) {
          player.position.x -= dir;
        }
      }

function playerRotate(dir) {
        const pos = player.position.x;
        let offset = 1;
        rotate(player.matrix, dir);
        while (collide(matrix, player, { x: 0, y: 0 })) {
          player.position.x += offset;
          offset = -(offset + (offset > 0 ? 1 : -1));
          if (offset > player.matrix[0].length) {
            rotate(player.matrix, -dir);
            player.position.x = pos;
            return;
          }
        }
      }

let dropCounter = 0;
      let dropInterval = 1000;

let lastTime = 0;
      function update(time = 0) {
        const deltaTime = time - lastTime;
        lastTime = time;

dropCounter += deltaTime;
        if (dropCounter > dropInterval) {
          playerDrop();
        }

draw();
        requestAnimationFrame(update);
      }

function draw() {
        context.fillStyle = '#f0f0f0';
        context.fillRect(0, 0, canvas.width, canvas.height);
        drawMatrix(matrix, { x: 0, y: 0 });
        drawMatrix(player.matrix, player.position);
      }

function playerReset() {
        const pieces = 'ILJOTSZ';
        player.matrix = createPiece(pieces[Math.floor(Math.random() * pieces.length)]);
        player.position.y = 0;
        player.position.x = (Math.floor(matrix[0].length / 2)) - (Math.floor(player.matrix[0].length / 2));
        if (collide(matrix, player, { x: 0, y: 0 })) {
          matrix.forEach(row => row.fill(0));
          player.score = 0;
          updateScore();
        }
      }

function createPiece(type) {
        if (type === 'T') {
          return [
            [0, 0, 0],
            [1, 1, 1],
            [0, 1, 0],
          ];
        } else if (type === 'O') {
          return [
            [2, 2],
            [2, 2],
          ];
        } else if (type === 'L') {
          return [
            [0, 3, 0],
            [0, 3, 0],
            [0, 3, 3],
          ];
        } else if (type === 'J') {
          return [
            [0, 4, 0],
            [0, 4, 0],
            [4, 4, 0],
          ];
        } else if (type === 'I') {
          return [
            [0, 5, 0, 0],
            [0, 5, 0, 0],
            [0, 5, 0, 0],
            [0, 5, 0, 0],
          ];
        } else if (type === 'S') {
          return [
            [0, 6, 6],
            [6, 6, 0],
            [0, 0, 0],
          ];
        } else if (type === 'Z') {
          return [
            [7, 7, 0],
            [0, 7, 7],
            [0, 0, 0],
          ];
        }
      }

function arenaSweep() {
        outer: for (let y = matrix.length - 1; y >= 0; --y) {
          for (let x = 0; x < matrix[y].length; ++x) {
            if (matrix[y][x] === 0) {
              continue outer;
            }
          }
          const row = matrix.splice(y, 1)[0].fill(0);
          matrix.unshift(row);
          ++y;
          player.score += 10;
        }
      }

function updateScore() {
        document.getElementById('score').innerText = player.score;
      }

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 (down)
        } else if (event.keyCode === 81) {
          playerRotate(-1); // Rotate counterclockwise (Q)
        } else if (event.keyCode === 87) {
          playerRotate(1); // Rotate clockwise (W)
        }
      });

const matrix = createMatrix(12, 20);

const player = {
        position: { x: 0, y: 0 },
        matrix: null,
        score: 0,
      };

playerReset();
      updateScore();
      update();
    });
  </script>
</body>
</html>