Tetris by @Codewith.it - Codewith.it

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

Referenze

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
formmethodDefinisce il metodo di invio dei dati oltre a method
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<h6>Titolo di intestazione di sesto livello
<body>Tag primario di un documento HTML
formSpecifica a quale form appartiene un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Federica Bachini Lab

Stuff and Things

Mostra/nascondi password

Le Coccole di Angela

Costruzione di un form

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