Tetris by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<h6>Titolo di intestazione di sesto livello
<nav>Definisce un menu di navigazione
<p>Serve a definire paragrafi di testo
<label>Mostrare un testo di etichetta per un elemento di input.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<pre>Indica una parte di testo preformattato

Users

Log in to search for users

Explore

Find inspiration

Basketball Legends

Design & Comunicazione Digitale ??

sanchez ximena html 3

Costruzione di tabella con html5

Livia e la Foresta Incantata

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tetris</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

  <canvas id="tetrisCanvas" width="300" height="600"></canvas>
  <span>Usa le frecce direzionali ▲▶▼◀</span>
</body>
</html>

body{
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  color: darkgray;
}
canvas{
  background-color: whitesmoke;
  border-bottom: 4px solid gray;
  border-top: none;
}

document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('tetrisCanvas');
      const context = canvas.getContext('2d');
      const blockSize = 30;
      const boardWidth = canvas.width / blockSize;
      const boardHeight = canvas.height / blockSize;
      let board = Array.from({ length: boardHeight }, () => Array(boardWidth).fill(0));
      let gameOver = false;
      let gameSpeed = 500; // milliseconds

      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBoard();
        drawPiece();
      }

      function drawBoard() {
        for (let row = 0; row < board.length; row++) {
          for (let col = 0; col < board[row].length; col++) {
            if (board[row][col] !== 0) {
              context.fillStyle = getColor(board[row][col]);
              context.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
            }
          }
        }
      }

      function drawPiece() {
        const piece = currentPiece.shape;
        const color = getColor(currentPiece.type);

        piece.forEach((row, rowIndex) => {
          row.forEach((value, colIndex) => {
            if (value !== 0) {
              context.fillStyle = color;
              context.fillRect(
                (currentPiece.x + colIndex) * blockSize,
                (currentPiece.y + rowIndex) * blockSize,
                blockSize,
                blockSize
              );
            }
          });
        });
      }

      function generateRandomPiece() {
        const pieces = [
          { type: 1, shape: [[1, 1, 1, 1]] },
          { type: 2, shape: [[1, 1], [1, 1]] },
          { type: 3, shape: [[1, 1, 1], [0, 1, 0]] },
          { type: 4, shape: [[1, 1, 1], [1, 0, 0]] },
          { type: 5, shape: [[1, 1, 1], [0, 0, 1]] },
        ];

        const randomIndex = Math.floor(Math.random() * pieces.length);
        return { ...pieces[randomIndex], x: Math.floor((boardWidth - pieces[randomIndex].shape[0].length) / 2), y: 0 };
      }

      let currentPiece = generateRandomPiece();

      function movePieceDown() {
        currentPiece.y++;

        if (checkCollision()) {
          currentPiece.y--;
          mergePiece();
          currentPiece = generateRandomPiece();

          if (checkGameOver()) {
            gameOver = true;
            alert("Game Over!");
          }
        }
      }

      function movePieceLeft() {
        currentPiece.x--;

        if (checkCollision()) {
          currentPiece.x++;
        }
      }

      function movePieceRight() {
        currentPiece.x++;

        if (checkCollision()) {
          currentPiece.x--;
        }
      }

      function rotatePiece() {
        const rotatedPiece = [];
        for (let col = 0; col < currentPiece.shape[0].length; col++) {
          rotatedPiece[col] = [];
          for (let row = 0; row < currentPiece.shape.length; row++) {
            rotatedPiece[col][row] = currentPiece.shape[currentPiece.shape.length - 1 - row][col];
          }
        }

        currentPiece.shape = rotatedPiece;

        if (checkCollision()) {
          // Revert rotation if it causes a collision
          for (let col = 0; col < currentPiece.shape[0].length; col++) {
            for (let row = 0; row < currentPiece.shape.length; row++) {
              currentPiece.shape[col][row] = rotatedPiece[row][col];
            }
          }
        }
      }

      function getColor(type) {
        const colors = ['#FF0000', '#00FF00', '#FFFF00', '#0000FF', '#FF00FF'];
        return colors[type - 1]; // Colors array is 0-based
      }

      function checkCollision() {
        const shape = currentPiece.shape;
        for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (
              shape[row][col] !== 0 &&
              (board[currentPiece.y + row] && board[currentPiece.y + row][currentPiece.x + col]) !== 0
            ) {
              return true;
            }
          }
        }
        return false;
      }

      function mergePiece() {
        const shape = currentPiece.shape;
        const color = getColor(currentPiece.type);
        for (let row = 0; row < shape.length; row++) {
          for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col] !== 0) {
              board[currentPiece.y + row][currentPiece.x + col] = currentPiece.type;
            }
          }
        }
        checkForLineClear();
      }

      function checkForLineClear() {
        for (let row = board.length - 1; row >= 0; row--) {
          if (board[row].every((cell) => cell !== 0)) {
            board.splice(row, 1);
            board.unshift(Array(boardWidth).fill(0));
          }
        }
      }

      function checkGameOver() {
        return board[0].some(cell => cell !== 0);
      }

      function handleKeyPress(event) {
        if (!gameOver) {
          switch (event.key) {
            case 'ArrowDown':
              movePieceDown();
              break;
            case 'ArrowLeft':
              movePieceLeft();
              break;
            case 'ArrowRight':
              movePieceRight();
              break;
            case 'ArrowUp':
              rotatePiece();
              break;
          }

          draw();
        }
      }

      document.addEventListener('keydown', handleKeyPress);

      function gameLoop() {
        if (!gameOver) {
          movePieceDown();
          draw();
          setTimeout(gameLoop, gameSpeed);
        }
      }

      gameLoop();
    });