A game that is a tetris mix of the same tetris with the title double tetris.'s game

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

No:10464

181

←

Prev Next

→

A game that is a tetris mix of the same tetris wit..ALL
Developer User3408｜Date and time 23/7/31 14:17:07
Build time 56.009 sec｜Game capacity 7.607KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Doble Tetris</title>
    <style>
      body {
        background-color: #222;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
      }

#canvas {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="240" height="400"></canvas>

// Dimensions of game board
      const ROWS = 20;
      const COLS = 10;
      const BLOCK_SIZE = 20;

// Tetromino shapes
      const SHAPES = [
        // I-Shape
        [[1, 1, 1, 1]],
        // J-Shape
        [[1, 0, 0], [1, 1, 1]],
        // L-Shape
        [[0, 0, 1], [1, 1, 1]],
        // O-Shape
        [[1, 1], [1, 1]],
        // S-Shape
        [[0, 1, 1], [1, 1, 0]],
        // T-Shape
        [[0, 1, 0], [1, 1, 1]],
        // Z-Shape
        [[1, 1, 0], [0, 1, 1]],
      ];

// Colors for each tetromino shape
      const COLORS = [
        "#00FFFF", // Cyan
        "#0000FF", // Blue
        "#FFA500", // Orange
        "#FFFF00", // Yellow
        "#00FF00", // Green
        "#800080", // Purple
        "#FF0000", // Red
      ];

// Initialize game variables
      let canvas, ctx, board, currentTetromino, timer, score;

// Initialize game board
      function init() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        score = 0;

// Create board with empty cells
        board = [];
        for (let row = 0; row < ROWS; row++) {
          board[row] = Array.from({ length: COLS }).fill(0);
        }

// Generate new tetromino
        generateTetromino();

// Start game loop
        timer = setInterval(gameLoop, 500);
      }

// Generate new random tetromino
      function generateTetromino() {
        const shapeIndex = Math.floor(Math.random() * SHAPES.length);
        const shape = SHAPES[shapeIndex];
        const color = COLORS[shapeIndex];

const col = Math.floor(Math.random() * (COLS - shape[0].length + 1));
        const row = -1 * shape.length; // Start above the game board

currentTetromino = { shape, color, row, col };
      }

// Game loop function
      function gameLoop() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move tetromino down
        if (canMove(1, 0)) {
          currentTetromino.row++;
        } else {
          // Lock tetromino in place
          lockTetromino();

// Check for filled rows
          checkRows();

// Generate new tetromino
          generateTetromino();

// Check if game over
          if (!canMove(0, 0)) {
            clearInterval(timer);
            alert("Game Over. Score: " + score);
          }
        }

// Draw current tetromino
        drawTetromino();

// Draw game board
        drawBoard();
      }

// Check if tetromino can move in the specified direction
      function canMove(moveRow, moveCol) {
        for (let row = 0; row < currentTetromino.shape.length; row++) {
          for (let col = 0; col < currentTetromino.shape[row].length; col++) {
            if (currentTetromino.shape[row][col]) {
              const newRow = currentTetromino.row + row + moveRow;
              const newCol = currentTetromino.col + col + moveCol;

// Validations
              if (
                newRow >= ROWS ||
                newCol < 0 ||
                newCol >= COLS ||
                board[newRow][newCol]
              ) {
                return false;
              }
            }
          }
        }

return true;
      }

// Lock tetromino in place
      function lockTetromino() {
        for (let row = 0; row < currentTetromino.shape.length; row++) {
          for (let col = 0; col < currentTetromino.shape[row].length; col++) {
            if (currentTetromino.shape[row][col]) {
              const newRow = currentTetromino.row + row;
              const newCol = currentTetromino.col + col;
              board[newRow][newCol] = currentTetromino.color;
            }
          }
        }
      }

// Check for filled rows and clear them
      function checkRows() {
        for (let row = ROWS - 1; row >= 0; row--) {
          if (board[row].every((cell) => cell !== 0)) {
            score += 10;
            board.splice(row, 1);
            board.unshift(Array.from({ length: COLS }).fill(0));
          }
        }
      }

// Draw current tetromino on the canvas
      function drawTetromino() {
        ctx.fillStyle = currentTetromino.color;

for (let row = 0; row < currentTetromino.shape.length; row++) {
          for (let col = 0; col < currentTetromino.shape[row].length; col++) {
            if (currentTetromino.shape[row][col]) {
              const x = (currentTetromino.col + col) * BLOCK_SIZE;
              const y = (currentTetromino.row + row) * BLOCK_SIZE;

ctx.fillRect(x, y, BLOCK_SIZE, BLOCK_SIZE);
            }
          }
        }
      }

// Draw game board
      function drawBoard() {
        for (let row = 0; row < ROWS; row++) {
          for (let col = 0; col < COLS; col++) {
            const cell = board[row][col];

if (cell) {
              ctx.fillStyle = cell;
              ctx.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }
          }
        }
      }

// Handle user input
      document.addEventListener("keydown", handleKeyPress);

// Rotate tetromino
      function rotateTetromino() {
        const rotatedShape = [];
        const shape = currentTetromino.shape;

for (let col = 0; col < shape[0].length; col++) {
          let newRow = [];

for (let row = shape.length - 1; row >= 0; row--) {
            newRow.push(shape[row][col]);
          }

rotatedShape.push(newRow);
        }

if (canRotate(rotatedShape)) {
          currentTetromino.shape = rotatedShape;
        }
      }

// Check if tetromino can be rotated
      function canRotate(rotatedShape) {
        for (let row = 0; row < rotatedShape.length; row++) {
          for (let col = 0; col < rotatedShape[row].length; col++) {
            if (rotatedShape[row][col]) {
              const newRow = currentTetromino.row + row;
              const newCol = currentTetromino.col + col;

return true;
      }

// Start the game
      init();
    </script>
  </body>
</html>