AI game creator

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

No:24705

←

Prev Next

→

Make a tetris game
Developer User11787｜Date and time 23/11/11 14:41:20
Build time 127.022 sec｜Game capacity 5.247KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tetris - Das Spiel</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

canvas {
      background: #000;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="tetris" width="240" height="400"></canvas>

const ROW = canvas.height / scale;
    const COLUMN = canvas.width / scale;

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

const matrix = createMatrix(ROW, COLUMN);

const pieces = [
      [   // I piece
        [0, 1, 0, 0],
        [0, 1, 0, 0],
        [0, 1, 0, 0],
        [0, 1, 0, 0]
      ],
      [   // J piece
        [0, 2, 0],
        [0, 2, 0],
        [2, 2, 0]
      ],
      [   // L piece
        [0, 3, 0],
        [0, 3, 0],
        [0, 3, 3]
      ],
      [   // O piece
        [4, 4],
        [4, 4]
      ],
      [   // S piece
        [0, 5, 5],
        [5, 5, 0],
        [0, 0, 0]
      ],
      [   // T piece
        [0, 6, 0],
        [6, 6, 6],
        [0, 0, 0]
      ],
      [   // Z piece
        [7, 7, 0],
        [0, 7, 7],
        [0, 0, 0]
      ]
    ];

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

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

function rotateMatrix(matrix, direction) {
      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 (direction > 0) {
        matrix.forEach(row => row.reverse());
      } else {
        matrix.reverse();
      }
    }

function rotatePlayer(direction) {
      const playerBackup = JSON.parse(JSON.stringify(player));
      rotateMatrix(player.matrix, direction);
      if (collide(matrix, player)) {
        rotateMatrix(player.matrix, -direction);
        player = playerBackup;
      }
    }

function movePlayer(direction) {
      player.position.x += direction;
      if (collide(matrix, player)) {
        player.position.x -= direction;
      }
    }

function dropPlayer() {
      player.position.y++;
      if (collide(matrix, player)) {
        player.position.y--;
        mergeMatrix(matrix, player);
        resetPlayer();
        removeFullRows();
      }
    }

function resetPlayer() {
      const random = Math.floor(Math.random() * pieces.length);
      player.matrix = pieces[random];
      player.position.y = 0;
      player.position.x = Math.floor(COLUMN / 2) - Math.floor(player.matrix[0].length / 2);
      if (collide(matrix, player)) {
        matrix.forEach(row => row.fill(0));
      }
    }

function update() {
      draw();
      dropPlayer();
    }

const colors = [
      null,
      '#00ffff',
      '#0000ff',
      '#ff7f00',
      '#ffff00',
      '#00ff00',
      '#9f00ff',
      '#ff0000'
    ];

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

resetPlayer();
    setInterval(update, 1000);   // Game speed - 1 second per frame
  </script>
</body>
</html>