cute Tetris

Cute Tetris
Game Over!

Sure, I can help you create a cute Tetris game as a single HTML file. Here's the code: 

```
<!DOCTYPE html>
<html>
  <head>
    <title>Cute Tetris</title>
    <style>
      /* Add some styles to make the Tetris game look cuter! */
      body {
        background-color: #f6bd60;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
      }

      h1 {
        font-size: 2.5rem;
        margin-top: 50px;
      }

      .game {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
      }

      .block {
        width: 30px;
        height: 30px;
        margin: 1px;
        border-radius: 5px;
      }

      .block-I {
        background-color: #f7dc6f;
        border: 1px solid #f5cba7;
      }

      .block-O {
        background-color: #f5cba7;
        border: 1px solid #dc7633;
      }

      .block-T {
        background-color: #f0b27a;
        border: 1px solid #d35400;
      }

      .block-S {
        background-color: #85c1e9;
        border: 1px solid #2980b9;
      }

      .block-Z {
        background-color: #f89406;
        border: 1px solid #c0392b;
      }

      .block-J {
        background-color: #7d3c98;
        border: 1px solid #833471;
      }

      .block-L {
        background-color: #e74c3c;
        border: 1px solid #c0392b;
      }

      .game-board {
        width: 241px;
        height: 481px;
        border: 1px solid #000000;
        position: relative;
      }

      .game-over {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background-color: #ffffff;
        border: 3px solid #000000;
        padding: 20px;
        border-radius: 10px;
        width: 300px;
      }

      .game-over h2 {
        margin: 0;
        font-size: 1.5rem;
        color: red;
      }

      .game-buttons {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
      }

      button {
        font-size: 1rem;
        padding: 5px 15px;
        border-radius: 5px;
        cursor: pointer;
      }

      .btn-restart {
        background-color: #2ecc71;
        color: #ffffff;
        border: none;
      }

      .btn-exit {
        background-color: #e74c3c;
        color: #ffffff;
        border: none;
      }
    </style>
  </head>

  <body>
    <h1>Cute Tetris</h1>

    <!-- Display the game board here -->
    <div class="game">
      <div class="game-board"></div>
    </div>

    <!-- Display the game over message here -->
    <div class="game-over">
      <h2>Game Over!</h2>
      <div class="game-buttons">
        <button class="btn-restart">Restart</button>
        <button class="btn-exit">Exit</button>
      </div>
    </div>

    <!-- Add the game logic here using JavaScript -->
    <script>
      // Define the game board and block colors
      const board = [];
      let currentBlock = {};
      const blockColors = {
        I: "block-I",
        O: "block-O",
        T: "block-T",
        S: "block-S",
        Z: "block-Z",
        J: "block-J",
        L: "block-L",
      };

      // Define the game settings
      const settings = {
        blockWidth: 30,
        blockHeight: 30,
        boardWidth: 10,
        boardHeight: 20,
        speed: 500,
      };

      // Define utility functions
      const getRandomBlock = () => {
        const blocks = "IOTSZJL";
        const randomBlockIndex = Math.floor(Math.random() * blocks.length);
        const blockType = blocks[randomBlockIndex];
        const newBlock = {
          type: blockType,
          rotation: 0,
          x: Math.floor(Math.random() * (settings.boardWidth - 3)),
          y: 0,
        };
        return newBlock;
      };

      const drawBlock = (x, y, type) => {
        const block = document.createElement("div");
        block.classList.add("block");
        block.classList.add(blockColors[type]);
        block.style.left = x * settings.blockWidth + "px";
        block.style.top = y * settings.blockHeight + "px";
        block.style.position = "absolute";
        document.querySelector(".game-board").appendChild(block);
      };

      const drawBoard = () => {
        for (let i = 0; i < settings.boardHeight; i++) {
          board[i] = [];
          for (let j = 0; j < settings.boardWidth; j++) {
            board[i][j] = "";
            drawBlock(j, i, "");
          }
        }
      };

      const drawPiece = () => {
        currentBlock.shape.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              drawBlock(
                currentBlock.x + x,
                currentBlock.y + y,
                currentBlock.type
              );
            }
          });
        });
      };

      const removePiece = () => {
        currentBlock.shape.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              const xPos = currentBlock.x + x;
              const yPos = currentBlock.y + y;
              if (yPos >= 0 && xPos >= 0 && xPos < settings.boardWidth) {
                board[yPos][xPos] = "";
                document.querySelector(
                  `.game-board > .block:nth-child(${
                    yPos * settings.boardWidth + xPos + 1
                  })`
                ).remove();
              }
            }
          });
        });
      };

      const rotatePiece = () => {
        let newRotation = currentBlock.rotation + 1;
        if (newRotation > 3) {
          newRotation = 0;
        }
        const rotatedShape = currentBlock.shapes[newRotation];
        if (checkCollision(currentBlock.x, currentBlock.y, rotatedShape)) {
          currentBlock.rotation = newRotation;
          removePiece();
          currentBlock.shape = rotatedShape;
          drawPiece();
        }
      };

      const checkCollision = (x, y, shape) => {
        let result = false;
        shape.forEach((row, yPos) => {
          row.forEach((value, xPos) => {
            if (value !== 0) {
              const newX = x + xPos;
              const newY = y + yPos;
              if (
                newY < 0 ||
                newY >= settings.boardHeight ||
                newX < 0 ||
                newX >= settings.boardWidth ||
                board[newY][newX] !== ""
              ) {
                result = true;
              }
            }
          });
        });
        return result;
      };

      const moveDown = () => {
        removePiece();
        currentBlock.y++;
        if (checkCollision(currentBlock.x, currentBlock.y, currentBlock.shape)) {
          currentBlock.y--;
          drawPiece();
          storeBlock();
        } else {
          drawPiece();
        }
      };

      const moveLeft = () => {
        removePiece();
        currentBlock.x--;
        if (checkCollision(currentBlock.x, currentBlock.y, currentBlock.shape)) {
          currentBlock.x++;
          drawPiece();
        } else {
          drawPiece();
        }
      };

      const moveRight = () => {
        removePiece();
        currentBlock.x++;
        if (checkCollision(currentBlock.x, currentBlock.y, currentBlock.shape)) {
          currentBlock.x--;
          drawPiece();
        } else {
          drawPiece();
        }
      };

      const storeBlock = () => {
        currentBlock.shape.forEach((row, y) => {
          row.forEach((value, x) => {
            if (value !== 0) {
              const xPos = currentBlock.x + x;
              const yPos = currentBlock.y + y;
              if (yPos >= 0) {
                board[yPos][xPos] = currentBlock.type;
              }
            }
          });
        });
        checkRows();
        currentBlock = getRandomBlock();
        if (checkCollision(currentBlock.x, currentBlock.y, currentBlock.shape)) {
          gameOver();
        }
        drawPiece();
      };

      const checkRows = () => {
        let fullRows = 0;
        board.forEach((row, index) => {
          if (row.every((value) => value !== "")) {
            fullRows++;
            board.splice(index, 1);
            board.unshift(new Array(settings.boardWidth).fill(""));
            document
              .querySelectorAll(
                `.game-board > .block:nth-child(n+${index * settings.boardWidth +
                  1}):nth-child(-n+${(index + 1) * settings.boardWidth})`
              )
              .forEach((block) => {
                block.remove();
              });
          }
        });
        if (fullRows > 0) {
          // Add some funny joke! :)
          console.log(`So many rows cleared! That's ${fullRows} times more than me in basketball.`);
        }
      };

      const gameOver = () => {
        clearInterval(gameInterval);
        document.querySelector(".game-over").style.display = "block";
      };

      const restartGame = () => {
        location.reload();
      };

      const exitGame = () => {
        window.close();
      };

      // Define the game loop
      const gameLoop = () => {
        moveDown();
      };

      // Start the game
      drawBoard();
      currentBlock = getRandomBlock();
      drawPiece();
      const gameInterval = setInterval(gameLoop, settings.speed);

      // Register event listeners for user input
      document.addEventListener("keydown", (event) => {
        if (event.code === "ArrowLeft") {
          moveLeft();
        } else if (event.code === "ArrowRight") {
          moveRight();
        } else if (event.code === "ArrowDown") {
          moveDown();
        } else if (event.code === "ArrowUp") {
          rotatePiece();
        }
      });

      document.querySelector(".btn-restart").addEventListener("click", restartGame);
      document.querySelector(".btn-exit").addEventListener("click", exitGame);
    </script>
  </body>
</html>
```

Enjoy playing the game! And if you need any changes, feel free to let me know.