AI game creator

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

No:26171

←

Prev Next

→

Tetris
Developer User12904｜Date and time 23/11/27 15:47:54
Build time 163.26 sec｜Game capacity 6.077KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</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;

context.scale(scale, scale);

const arena = createMatrix(12, 20);

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

function draw() {
        context.fillStyle = '#000';
        context.fillRect(0, 0, canvas.width, canvas.height);

drawMatrix(arena, { x: 0, y: 0 });
        drawMatrix(player.matrix, player.pos);
      }

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.pos.y++;
        if (collide(arena, player)) {
          player.pos.y--;
          merge(arena, player);
          playerReset();
          arenaSweep();
          updateScore();
        }
        dropCounter = 0;
      }

function playerMove(dir) {
        player.pos.x += dir;
        if (collide(arena, player)) {
          player.pos.x -= dir;
        }
      }

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 playerReset() {
        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]],
          [[0, 1, 0], 
           [1, 1, 1]],
          [[1, 1, 1], 
           [1, 0, 0]],
        ];

player.matrix = pieces[Math.floor(Math.random() * pieces.length)];
        player.pos.y = 0;
        player.pos.x = Math.floor(arena[0].length / 2) -
                       Math.floor(player.matrix[0].length / 2);

if (collide(arena, player)) {
          arena.forEach(row => row.fill(0));
          // Game over
          drawGameOverScreen();
          setTimeout(() => {
            window.location.reload();
          }, 3000);
        }
      }

const colors = [
        null,
        'red',
        'green',
        'blue',
        'purple',
        'orange',
        'yellow',
        'pink',
      ];

function drawGameOverScreen() {
        context.fillStyle = 'rgba(0, 0, 0, 0.5)';
        context.fillRect(0, 0, canvas.width, canvas.height);

context.fillStyle = 'white';
        context.font = '30px Arial';
        context.textAlign = 'center';
        context.fillText('GameOver', canvas.width / 2, canvas.height / 2);
      }

function arenaSweep() {
        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);
          player.score += 10;
        }
      }

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

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

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