Tetris by @Codewith.it - Codewith.it

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

Referenze

formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
requiredRende obbligatorio un campo di input
application-x-www-form-urlencodedCodifica dei caratteri di un form
<canvas>Tag per disegnare grafica dinamica su pagine web.
<label>Mostrare un testo di etichetta per un elemento di input.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione n. 1

"esercitazione 6.html"

spotify dashboard

Form per il torneo misto dis

Informazioni Cliente - Quiz a Rami

Selezione sorgente video

black - social bar

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