AI game creator

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

No:15557

←

Prev Next

→

Tetris
Developer User6662｜Date and time 23/9/9 22:17:56
Build time 70.582 sec｜Game capacity 5.897KB｜

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;
      overflow: hidden;
    }

canvas {
      border: 1px solid #333;
      background-color: #111;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>
  <script>
    const canvas = document.getElementById('tetris');
    const context = canvas.getContext('2d');
    context.scale(20, 20);

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);
        ++y;

player.score += 10;
      }
    }

function createMatrix(w, h) {
      const matrix = [];
      while (h--) {
        matrix.push(new Array(w).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 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;
      }
    }

function playerReset() {
      const pieces = 'ILJOTSZ';
      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));
        player.score = 0;
        updateScore();
      }
    }

let dropCounter = 0;
    let dropInterval = 1000;

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

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

lastTime = time;

draw();
      requestAnimationFrame(update);
    }

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

const colors = [
      null,
      '#FF0D72',
      '#0DC2FF',
      '#0DFF72',
      '#F538FF',
      '#FF8E0D',
      '#FFE138',
      '#3877FF',
    ];

const arena = createMatrix(12, 20);

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

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