AI game creator

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

No:10995

←

Prev Next

→

Tetris But Cooler
Developer User4715｜Date and time 23/8/6 12:28:31
Build time 48.125 sec｜Game capacity 6.106KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetris But Cooler</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
      // Tetris But Cooler

// Initialize the canvas
      const canvas = document.getElementById("tetris");
      const context = canvas.getContext("2d");
      context.scale(20, 20);

// Set up the playfield
      const playfield = createMatrix(12, 20);

// Set up the player
      const player = {
        pos: { x: 0, y: 0 },
        matrix: null,
        score: 0,
      };

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

// Merge the player matrix into the playfield
      function merge() {
        player.matrix.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              playfield[y + player.pos.y][x + player.pos.x] = value;
            }
          });
        });
      }

// Check if the player has collided with the playfield
      function collide() {
        const [matrix, pos] = [player.matrix, player.pos];
        for (let y = 0; y < matrix.length; ++y) {
          for (let x = 0; x < matrix[y].length; ++x) {
            if (
              matrix[y][x] !== 0 &&
              (playfield[y + pos.y] && playfield[y + pos.y][x + pos.x]) !== 0
            ) {
              return true;
            }
          }
        }
        return false;
      }

// Rotate the player matrix
      function rotate(matrix) {
        const tempMatrix = matrix.map((row, i) =>
          matrix.map((col) => col[i])
        );
        return tempMatrix.map((row) => row.reverse());
      }

// Create and return a random tetrimino matrix
      function createTetrimino(type) {
        if (type === "I") {
          return [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]];
        } else if (type === "L") {
          return [[0, 0, 0], [1, 1, 1], [1, 0, 0]];
        } else if (type === "J") {
          return [[0, 0, 0], [1, 1, 1], [0, 0, 1]];
        } else if (type === "O") {
          return [[1, 1], [1, 1]];
        } else if (type === "Z") {
          return [[0, 0, 0], [1, 1, 0], [0, 1, 1]];
        } else if (type === "S") {
          return [[0, 0, 0], [0, 1, 1], [1, 1, 0]];
        } else if (type === "T") {
          return [[0, 0, 0], [1, 1, 1], [0, 1, 0]];
        }
      }

// Draw the playfield and the player
      function draw() {
        context.fillStyle = "#000";
        context.fillRect(0, 0, canvas.width, canvas.height);

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

// Draw the matrix on the canvas
      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);
            }
          });
        });
      }

// Move the player down by 1 unit
      function playerDrop() {
        player.pos.y++;
        if (collide()) {
          player.pos.y--;
          merge();
          resetPlayer();
          sweepRows();
          updateScore();
        }
      }

// Move the player horizontally
      function playerMove(direction) {
        player.pos.x += direction;
        if (collide()) {
          player.pos.x -= direction;
        }
      }

// Reset the player position and get a new random tetrimino
      function resetPlayer() {
        const tetriminoes = "ILJOZST";
        player.matrix = createTetrimino(
          tetriminoes[(tetriminoes.length * Math.random()) | 0]
        );
        player.pos.x = ((playfield[0].length / 2) | 0) - ((player.matrix[0].length / 2) | 0);
        player.pos.y = 0;
        if (collide()) {
          playfield.forEach((row) => row.fill(0));
          player.score = 0;
          updateScore();
        }
      }

// Rotate the player matrix
      function playerRotate() {
        const prevPosition = player.pos.x;
        let rotateOffset = 1;
        player.matrix = rotate(player.matrix);
        while (collide()) {
          player.pos.x += rotateOffset;
          rotateOffset = -(rotateOffset + (rotateOffset > 0 ? 1 : -1));
          if (rotateOffset > player.matrix[0].length) {
            playerRotate();
            player.pos.x = prevPosition;
            return;
          }
        }
      }

// Sweep completed rows from the playfield
      function sweepRows() {
        outer: for (let y = playfield.length - 1; y >= 0; --y) {
          for (let x = 0; x < playfield[y].length; ++x) {
            if (playfield[y][x] === 0) {
              continue outer;
            }
          }
          const row = playfield.splice(y, 1)[0].fill(0);
          playfield.unshift(row);
          ++y;
          player.score += 10;
        }
      }

// Update the score
      function updateScore() {
        document.getElementById("score").innerText = player.score;
      }

// Update the game
      function update() {
        draw();
        playerDrop();
      }

// Set up the keyboard controls
      document.addEventListener("keydown", (event) => {
        if (event.keyCode === 37) {
          playerMove(-1); // Left Arrow
        } else if (event.keyCode === 39) {
          playerMove(1); // Right Arrow
        } else if (event.keyCode === 40) {
          playerDrop(); // Down Arrow
        } else if (event.keyCode === 38) {
          playerRotate(); // Up Arrow
        }
      });

// Set up the game loop
      function gameLoop() {
        update();
        requestAnimationFrame(gameLoop);
      }

// Start the game
      resetPlayer();
      updateScore();
      gameLoop();
    </script>
  </body>
</html>