AI game creator

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

No:34528

←

Prev Next

→

テトリス
Developer 豆腐｜Date and time 24/1/11 2:42:01
Build time 36.856 sec｜Game capacity 5.975KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris</title>
  <style>
    body {
      background-color: #222;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #111;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>

// Tetris piece templates
    const L = [
      [1, 0],
      [1, 0],
      [1, 1]
    ];
    const J = [
      [0, 1],
      [0, 1],
      [1, 1]
    ];
    const Z = [
      [1, 1, 0],
      [0, 1, 1]
    ];
    const S = [
      [0, 1, 1],
      [1, 1, 0]
    ];
    const T = [
      [1, 1, 1],
      [0, 1, 0]
    ];
    const O = [
      [1, 1],
      [1, 1]
    ];
    const I = [
      [1],
      [1],
      [1],
      [1]
    ];

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 createPiece(type) {
      switch (type) {
        case 'L':
          return L;
        case 'J':
          return J;
        case 'Z':
          return Z;
        case 'S':
          return S;
        case 'T':
          return T;
        case 'O':
          return O;
        case 'I':
          return I;
      }
    }

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;
      }
    }

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));
        player.score = 0;
        updateScore();
      }
    }

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 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>