A game that mixes tetris and tetris's game

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

No:12546

←

Prev Next

→

A game that mixes tetris and tetris
Developer User3408｜Date and time 23/8/19 16:16:46
Build time 46.76 sec｜Game capacity 7.399KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Tetromino Mix</title>
    <style>
      canvas {
        background-color: #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  
  <body>
    <canvas id="tetrisCanvas"></canvas>
    
    <script>
      // Tetris Pictograms
      const pictograms = {
        I: "⊢",
        J: "⊣",
        L: "⊢_",
        O: "⊠",
        S: "≠≠",
        T: "⊣⊥",
        Z: "≠≠"
      }
      
      // Tetromino shapes
      const tetrominos = {
        I: [
          [0, 0, 0, 0],
          [1, 1, 1, 1],
          [0, 0, 0, 0],
          [0, 0, 0, 0]
        ],
        J: [
          [1, 0, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        L: [
          [0, 0, 1],
          [1, 1, 1],
          [0, 0, 0]
        ],
        O: [
          [1, 1],
          [1, 1]
        ],
        S: [
          [0, 1, 1],
          [1, 1, 0],
          [0, 0, 0]
        ],
        T: [
          [0, 1, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        Z: [
          [1, 1, 0],
          [0, 1, 1],
          [0, 0, 0]
        ]
      };
      
      // Tetromino colors
      const tetrominoColors = {
        I: "#00ffff",
        J: "#0000ff",
        L: "#ffa500",
        O: "#ffff00",
        S: "#00ff00",
        T: "#800080",
        Z: "#ff0000"
      };
      
      const canvas = document.getElementById('tetrisCanvas');
      const context = canvas.getContext('2d');
    
      const tileSize = 30; // Size of each tile in pixels
      const boardWidth = 10; // Width of the game board in tiles
      const boardHeight = 20; // Height of the game board in tiles
      
      canvas.width = tileSize * boardWidth;
      canvas.height = tileSize * boardHeight;
      
      const board = [];
      for (let row = 0; row < boardHeight; row++) {
        board[row] = Array(boardWidth).fill(0);
      }
      
      let currentPiece = getRandomPiece();
      let currentPieceX = Math.floor(boardWidth / 2) - 1;
      let currentPieceY = 0;
      
      let gameOver = false;
      let score = 0;
      
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        drawBoard();
        drawPiece();
      }
      
      function drawBoard() {
        for (let row = 0; row < boardHeight; row++) {
          for (let col = 0; col < boardWidth; col++) {
            if (board[row][col]) {
              context.fillStyle = tetrominoColors[board[row][col]];
              context.fillRect(col * tileSize, row * tileSize, tileSize, tileSize);
              context.fillStyle = "#000";
              context.fillText(pictograms[board[row][col]], col * tileSize, (row + 1) * tileSize);
            }
          }
        }
      }
      
      function drawPiece() {
        for (let row = 0; row < currentPiece.length; row++) {
          for (let col = 0; col < currentPiece[row].length; col++) {
            if (currentPiece[row][col]) {
              const x = (currentPieceX + col) * tileSize;
              const y = (currentPieceY + row) * tileSize;
              context.fillStyle = tetrominoColors[currentPiece[row][col]];
              context.fillRect(x, y, tileSize, tileSize);
              context.fillStyle = "#000";
              context.fillText(pictograms[currentPiece[row][col]], x, y + tileSize);
            }
          }
        }
      }
      
      function movePiece(direction) {
        const newX = currentPieceX + direction;
        
        if (isValidMove(currentPiece, newX, currentPieceY)) {
          currentPieceX = newX;
        }
      }
      
      function rotatePiece() {
        const rotatedPiece = rotate(currentPiece);
        
        if (isValidMove(rotatedPiece, currentPieceX, currentPieceY)) {
          currentPiece = rotatedPiece;
        }
      }
      
      function dropPiece() {
        if (isValidMove(currentPiece, currentPieceX, currentPieceY + 1)) {
          currentPieceY++;
        } else {
          mergePiece();
          clearLines();
          if (!gameOver) {
            currentPiece = getRandomPiece();
            currentPieceX = Math.floor(boardWidth / 2) - 1;
            currentPieceY = 0;
          }
        }
      }
      
      function isValidMove(piece, newX, newY) {
        for (let row = 0; row < piece.length; row++) {
          for (let col = 0; col < piece[row].length; col++) {
            if (piece[row][col]) {
              const newXPos = newX + col;
              const newYPos = newY + row;
              
              if (
                newXPos < 0 ||
                newXPos >= boardWidth ||
                newYPos >= boardHeight ||
                board[newYPos][newXPos]
              ) {
                return false;
              }
            }
          }
        }
        
        return true;
      }
      
      function mergePiece() {
        for (let row = 0; row < currentPiece.length; row++) {
          for (let col = 0; col < currentPiece[row].length; col++) {
            if (currentPiece[row][col]) {
              board[currentPieceY + row][currentPieceX + col] = currentPiece[row][col];
            }
          }
        }
      }
      
      function clearLines() {
        let linesCleared = 0;
        
        for (let row = boardHeight - 1; row >= 0; row--) {
          if (board[row].every(tile => tile !== 0)) {
            board.splice(row, 1);
            board.unshift(Array(boardWidth).fill(0));
            linesCleared++;
          }
        }
        
        score += linesCleared * 10;
      }
      
      function getRandomPiece() {
        const pieces = Object.keys(tetrominos);
        const randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
        return tetrominos[randomPiece];
      }
      
      function rotate(piece) {
        const size = piece.length;
        const rotatedPiece = Array(size);
        
        for (let row = 0; row < size; row++) {
          rotatedPiece[row] = Array(size);
          for (let col = 0; col < size; col++) {
            rotatedPiece[row][col] = piece[size - col - 1][row];
          }
        }
        
        return rotatedPiece;
      }
      
      function handleKeyPress(event) {
        if (event.key === "ArrowUp") {
          rotatePiece();
        } else if (event.key === "ArrowDown") {
          dropPiece();
        } else if (event.key === "ArrowLeft") {
          movePiece(-1);
        } else if (event.key === "ArrowRight") {
          movePiece(1);
        }
      }
      
      function update() {
        if (!gameOver) {
          dropPiece();
        }
        
        draw();
      }
      
      function startGame() {
        document.addEventListener("keydown", handleKeyPress);
        
        const gameLoop = setInterval(update, 500);
        
        function game_over() {
          clearInterval(gameLoop);
          gameOver = true;
          draw();
          alert("¡Juego terminado! Puntuación final: " + score);
        }
        
        setInterval(() => {
          if (gameOver) {
            game_over();
            return;
          }
          
          for (let col = 0; col < boardWidth; col++) {
            if (board[0][col]) {
              game_over();
              return;
            }
          }
        }, 1000);
      }
      
      startGame();
    </script>
  </body>
</html>