Tetris by @Codewith.it - Codewith.it

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

Referenze

<html>Tag primario di un documento HTML
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<em>Formatta il testo in corsivo/italico enfatizzato
formnovalidateImpedisce la convalida di un singolo elemento input
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La mia prima pagina HTML

Research Profiles

esercizio:sito web

Questionario Serie A

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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();
    });