Tetris project

archived.js

items.js
/*// CALCOLA la "lenght" degli elementi di "newItem.selectedShape"
for (let i = 0; i < newItem.selectedShape.itemCells.length; i++) {
  // CREA un nuovo elemento div per ogni cella dell'item
  let shapeCells = newItem.selectedShape.itemCells[i];
  // AGGIUNGE a "shapeCells" il le varie classi e stampa in HTML
  shapeCells[i].classList.add(newItem.selectedShape.itemClass);
  shapeCells[i].classList.add(newItem.selectedColor);
  shapeCells[i].classList.add(newItem.selectedColumn);
document.getElementById(".items_id").innerHTML = shapeCells[i];
}
moveNewItem();
}*/



movements.js
/*function moveNewItem() {
    let itemRows;
    let itemCols;
    [itemRows, itemCols] = newItem.selectedShape.shapeCells.split('_');

    setInterval(moveNewItem, 1000)
            // MUOVE l'elemento in giù di 1 cella
            itemRows = newItem.selectedShape.itemCells.itemRows++;
            return itemRows++;
    }


/*  CREA UN SOLO MOVE PER COMINCIARE

//  FUNZIONE + VARIABILE:   OTTIENE I CELLS ID DELL'ITEM CORRENTE + LI SALVA + LI RESTITUISCE
function getCurrentItemCells() {
    console.log(currentItemCells);
    return currentItemCells;
}

//  FUNZIONE + VARIABILE:   CALCOLA SPAZIO DI DISCESA PER L'ITEM
var canMoveDown = function canMoveDown(itemShapeCells, TABLE_CELLS) {
    //  Se le celle occupate sono minori di "ROWS", RITORNA "true". Altrimenti RITORNA "false".
    for (var i = 0; i < TABLE_CELLS; i++) {
        if (i >= TABLE_CELLS) {
                moveNewItem(itemShapeCells);
                console.log("canMoveDown");
                return true;
            } else {
                clearInterval(intervalId);
                console.log("canMoveDown");
                return false;
            }
        }
    }

        //  FUNZIONE + VARIABILE:   CALCOLA OCCUPAZIONE CELLE DEL CAMPO TRAMITE LA POSIZIONE DELL'ITEM + SE "TRUE", MUOVE L'ITEM + SE "FALSE", FERMA L'ITEM
        var gameTableFull = function isGameTableFull(canMoveDown, canMoveRight, canMoveLeft) {
            if (canMoveDown == true && canMoveRight == true && canMoveLeft == true) {
                return true;
                moveNewItem();
            } else {
                return false;
                gameStop();
            }
        };

        //  FUNZIONE:   SPOSTA ITEM CORRENTE
        function moveNewItem() {
            //  Se "canMoveDown" VERIFICA che l'item può muoversi in basso da 1...
            if (canMoveDown) {              //  (movements.js)
                getCurrentItemCells();
                // Imposta un intervallo a 500ms e ritorna il valore a "intervalId".
                let intervalId = setInterval(moveNewItem, 500);

            } else {
                //  Altrimenti, se "gameTableFull" è "true"...
                if (gameTableFull = true) { //  (movements.js)
                    //  ...FERMA l'item corrente e...
                    stopNewItem();      //  (movements.js)
                    //  ...CREA un nuovo item
                    createNewItem();        //  (items.js)
                }
            }
        }
        //  FUNZIONE:   FERMA ITEM CORRENTE
        function stopNewItem() {
            getCurrentItemCells();
            clearInterval(intervalId);
            currentItemCells.forEach(itemShapeCell); {
                currentItemCells.classList.remove("current-shape-class");   //  RIMUOVE la classe "current-shape" dalla itemShapeCellsa...
                currentItemCells.classList.add("stopped-shape-class");      //  ...AGGIUNGE la classe "item" alla itemShapeCellsa sostituendola a "current-shape"
            }
        } */

JS snipptes

‎‎​

movements.js

/*  movements.js*/

// Define variables
let currentDirection;
const itemCells = newItem.selectedShape.itemCells;
const selectedColor = newItem.selectedColor;
const selectedClass = newItem.selectedShape.itemClass;

function moveItem(direction) {
  for (let i = 0; i < itemCells.length; i++) {
    const cellId = itemCells[i];
    document.getElementById(cellId).classList.remove(selectedColor);
    document.getElementById(cellId).classList.remove(selectedClass);
  }

  //    CALCOLA la posizione delle celle, le DIVIDE e METTE delle condizioni di spostamento. Infine CONCATENA e SALVA il risultato
  const nextCells = [];
  for (let i = 0; i < itemCells.length; i++) {
    let [row, col] = itemCells[i].split('_');
    if (direction === 'down') {
      row++;
    } else if (direction === 'left') {
      col--;
    } else if (direction === 'right') {
      col++;
    }
    nextCells.push(`${row}_${col}`);
  }

  // CONTROLLA se almeno un'item collide, DIVIDE gli ID e VERIFICA se "row" >= di "ROWS -1" o se ci sono celle con "stopped-shape-class"
  const isCollision = nextCells.some(itemCells => {
    const [row, col] = itemCells.split('_');
    return row >= ROWS -1 || document.getElementById(itemCells).classList.contains('stopped-shape-class');
  });

  // Se isCollision è falso, AGGIORNA i dati di "itemCells" con "nextCells" per ogni sua cella. CICLA e SALVA il nuovo "itemCells" INSERENDO le classi stile
  if (!isCollision) {
    itemCells.splice(0, itemCells.length, ...nextCells);
    for (let i = 0; i < itemCells.length; i++) {
      const cellId = itemCells[i];
      document.getElementById(cellId).classList.add(selectedColor);
      document.getElementById(cellId).classList.add(selectedClass);
    }
  } else {
    // Altrimenti, CREA un nuovo item e ferma l'intervallo di spostamento
    createNewItem();
    clearInterval(intervalId);
  }
}

function moveDown() {
  currentDirection = 'down';
  moveItem(currentDirection);
}

function moveLeft() {
  currentDirection = 'left';
  moveItem(currentDirection);
}

function moveRight() {
  currentDirection = 'right';
  moveItem(currentDirection);
}

function moveRight() {
  //  CALCOLA e SALVA gli ID di ogni cella dell'item e ne RIMUOVE le classi della forma
  for (let i = 0; i < itemCells.length; i++) {
      let cellId = itemCells[i];
      document.getElementById(cellId).classList.remove(selectedColor);
      document.getElementById(cellId).classList.remove(itemClass);
  }
  //  CALCOLA, DIVIDE e SALVA gli ID di ogni cella dell'item. SPOSTA "col" e CONCATENA nuovamente ogni ID
  for (let i = 0; i < itemCells.length; i++) {
      let [row, col] = itemCells[i].split('_');
      col++;
      itemCells[i] = row + '_' + col;
  }
  //  CALCOLA e SALVA gli ID di ogni cella dell'item. AGGIUNGE le classi della forma per ogni cella
  for (let i = 0; i < itemCells.length; i++) {
      let cellId = itemCells[i];
      document.getElementById(cellId).classList.add(selectedColor);
      document.getElementById(cellId).classList.add(newItem.selectedShape.itemClass);
  }
}

function moveDownAuto() {
  intervalId = setInterval(moveDown, 1000);
}

tetris.js

/*There are several problems with the code:

In the createNewItem() function, the line let selectedColumn = COLS[randomColumn]; should be let selectedColumn = randomColumn;, as COLS is a constant array and not a number.

In the createNewItem() function, the line itemCellElement.classList.add(newItemCells); should be itemCellElement.classList.add(...newItemCells);, as newItemCells is an array and needs to be spread into individual arguments.

In the moveDown() function, the line if (row == LAST_ROW || document.getElementById(cellIdNext).classList.contains(".stopped-item-class")) { should be if (row == LAST_ROW || document.getElementById(cellIdNext).classList.contains("stopped-item-class")) {, as the dot before "stopped-item-class" is not needed.

In the moveDown() function, the line console.log(cellId); should be moved outside of the for loop, as cellId is not defined in that scope.

In the moveRight() function and moveLeft() function, the line console.log(cellId); should be moved outside of the for loop, as cellId is not defined in that scope.

In the moveRight() function and moveLeft() function, the lines let [row, col] = newItem.selectedShape.newItemCells[i].split('_'); should be let [row, col] = newItem.selectedShape.itemCells[i].split('_');, as newItem.selectedShape.newItemCells is not defined and should be newItem.selectedShape.itemCells.

In the moveDownAuto() function, the variable intervalId should be declared with let or const to avoid creating a global variable.

The code does not have proper error handling or comments to explain what each section of code is doing, which can make it difficult to understand and debug. It would be helpful to add more comments and error handling to improve the readability and maintainability of the code.*/

//  constants.js
//  CONTIENE un array di classi colore dichiarate in styles.css
const COLORS = ["gold-class", "green-class", "red-class", "blue-class", "brown-class", "purple-class"];
const ROWS = 20;
const COLS = 10;

//  MOLTIPLICA "ROWS" e "COLS" e SALVA il numero totale di celle della tabella
const TABLE_CELLS = ROWS * COLS;
//  CONTIENE la prima riga della tabella estratta da "const ROWS"
const FIRST_ROW = '0';

const LAST_ROW = '19'

//      1. CREA un array che contiene classe e celle della di ogni forma
const SHAPES = [
  {
    itemClass: "item-O",
    itemCells: ['0_0', '0_1', '1_0', '1_1']
  },
  {
    itemClass: "item-I",
    itemCells: ['0_0', '1_0', '2_0', '3_0']
  },
  {
    itemClass: "item-L",
    itemCells: ['0_0', '0_1', '0_2', '1_2']
  },
  {
    itemClass: "item-J",
    itemCells: ['0_0', '0_1', '0_2', '1_0']
  },
  {
    itemClass: "item-S",
    itemCells: ['0_1', '0_2', '1_0', '1_1']
  },
  {
    itemClass: "item-Z",
    itemCells: ['0_0', '0_1', '1_1', '1_2']
  }
];
//  items.js
let newItem;

function createNewItem() {
  // GENERA e SALVA proprietà casuali da "COLS", "SHAPES" e "COLORS"
  let randomColumn = Math.floor(Math.random() * COLS);
  let randomShape = Math.floor(Math.random() * SHAPES.length);
  let randomColor = Math.floor(Math.random() * COLORS.length);

  // SELEZIONA e SALVA le proprietà casuali selezionate sopra
  let selectedShape = SHAPES[randomShape];
  let selectedColor = COLORS[randomColor];
  let selectedColumn = COLS[randomColumn];
  // INIZIALIZZA la variabile con le proprietà di "FIRST_ROW" e CREA un indice CONCATENANDO riga e colonna selezionate
  let firstRow = FIRST_ROW;
  let itemIndex = [firstRow + '_' + selectedColumn];

  //  SALVA l'indice costruito, la classe colore e gli ID della forma selezionati
  newItem = {
    itemIndex,
    selectedColor,
    selectedShape,
  };
  //  RECUPERA e INSERISCE classe e celle dell'item selezionato da "constants.js"
  var newItemClass = newItem.selectedShape.itemClass;
  var newItemCells = newItem.selectedShape.itemCells;

  //  DICHIARA "itemCellElement" e vi INSERISCE un elemento "div"
  let itemCellElement = document.createElement("div");
  // AGGIUNGE a "itemCellElement" le varie classi
  itemCellElement.classList.add(itemIndex);
  itemCellElement.classList.add(newItemClass);
  itemCellElement.classList.add(selectedColor);
  itemCellElement.classList.add(newItemCells);

  }
  setTimeout(function () {
    moveDownAuto();
  }, 1000);
//  movements.js
function moveDown() {
  //  CALCOLA la riga più bassa dell'item
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let cellId = newItem.selectedShape.newItemCells[i];
    let [row, col] = cellId.split('_');
    let cellIdNext = row + 1 + '_' + col;

    if (row == LAST_ROW || document.getElementById(cellIdNext).classList.contains(".stopped-item-class")) {

      newItem.selectedShape.newItemCells[i] = row + '_' + col;
      document.getElementById(cellId).classList.add(".stopped-item-class");
      createNewItem();
      break;
    
    } else {

      //  CALCOLA e SALVA gli ID di ogni cella dell'item e ne RIMUOVE le classi della forma
      for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
        let cellId = newItem.selectedShape.newItemCells[i];
        document.getElementById(cellId).classList.remove(newItem.selectedColor);
        document.getElementById(cellId).classList.remove(newItem.selectedShape.newItemClass);
      }
      //  CALCOLA, DIVIDE e SALVA gli ID di ogni cella dell'item. SPOSTA "row" di +1 e CONCATENA nuovamente ogni ID
      for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
        let [row, col] = newItem.selectedShape.newItemCells[i].split('_');
        row++;
        newItem.selectedShape.newItemCells[i] = row + '_' + col;
      }
      //  CALCOLA e SALVA gli ID di ogni cella dell'item. AGGIUNGE le classi della forma per ogni cella
      for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
        let cellId = newItem.selectedShape.newItemCells[i];
        document.getElementById(cellId).classList.add(newItem.selectedColor);
        document.getElementById(cellId).classList.add(newItem.selectedShape.newItemClass);
      }
      console.log(cellId);
    }
  }
}
function moveDownAuto() {
  intervalId = setInterval(function () {
    moveDown();
  }, 1000);
}
//  CALCOLA e SALVA gli ID di ogni cella dell'item e ne RIMUOVE le classi della forma
function moveRight() {
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let cellId = newItem.selectedShape.newItemCells[i];
    document.getElementById(cellId).classList.remove(newItem.selectedColor);
    document.getElementById(cellId).classList.remove(newItem.selectedShape.newItemClass);
  }
  //  CALCOLA, DIVIDE e SALVA gli ID di ogni cella dell'item. SPOSTA "col" e CONCATENA nuovamente ogni ID
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let [row, col] = newItem.selectedShape.newItemCells[i].split('_');
    col++;
    newItem.selectedShape.newItemCells[i] = row + '_' + col;
  }
  //  CALCOLA e SALVA gli ID di ogni cella dell'item. AGGIUNGE le classi della forma per ogni cella
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let cellId = newItem.selectedShape.newItemCells[i];
    document.getElementById(cellId).classList.add(newItem.selectedColor);
    document.getElementById(cellId).classList.add(newItem.selectedShape.newItemClass);
  }
  console.log(cellId);
}
function moveLeft() {
  //  CALCOLA e SALVA gli ID di ogni cella dell'item e ne RIMUOVE le classi della forma
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let cellId = newItem.selectedShape.newItemCells[i];
    document.getElementById(cellId).classList.remove(newItem.selectedColor);
    document.getElementById(cellId).classList.remove(newItem.selectedShape.newItemClass);
  }
  //  CALCOLA, DIVIDE e SALVA gli ID di ogni cella dell'item. SPOSTA "col" e CONCATENA nuovamente ogni ID
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let [row, col] = newItem.selectedShape.newItemCells[i].split('_');
    col--;
    newItem.selectedShape.newItemCells[i] = row + '_' + col;
  }
  //  CALCOLA e SALVA gli ID di ogni cella dell'item. AGGIUNGE le classi della forma per ogni cella
  for (let i = 0; i < newItem.selectedShape.newItemCells.length; i++) {
    let cellId = newItem.selectedShape.newItemCells[i];
    document.getElementById(cellId).classList.add(newItem.selectedColor);
    document.getElementById(cellId).classList.add(newItem.selectedShape.newItemClass);
  }
  console.log(cellId);
}
//  main.js
//      SELEZIONA il bottone", lo INSERISCE in "startBtn" e CONTROLLA se avviene un click
const startBtn = document.getElementById("btn_start_id");
startBtn.addEventListener('click', function () {
        //      RICARICA la pagina se trova "RESET", sennò CHIAMA "gameStart"
    if (startBtn.innerText === "RESET") {
        location.reload();
    } else {
        startBtn.innerText = "RESET";
        stopBtn.innerText = "STOP";
        gameStart();
    }
});

function gameStart() {
        initializeGameTable();
        createNewItem();
}

//      GAME STOP
const stopBtn = document.getElementById("btn_stop_id");
stopBtn.addEventListener('click', function () {
        stopBtn.innerText = "STOPPED";
        startBtn.innerText = "CONTINUE";
        gameStop();
});

function gameStop() {
        clearInterval(intervalId);
}

//  CONTROLLI tastiera
document.addEventListener('keydown', function (event) {
        if (event.code === 'ArrowRight') {
            moveRight();
        } else if (event.code === 'ArrowLeft') {
            moveLeft();
        } else if (event.code === 'ArrowDown') {
            moveDown();
        }
    });
    //	table.js
//	FUNZIONE: CREA CAMPO DA GIOCO
function initializeGameTable() {
	//  CREA, CONTIENE il campo da gioco da INSERIRE in "table_id"
	var htmlTable = '';
	//  CALCOLA e OTTIENE il numero di righe di "ROWS"
	for (var r = 0; r < ROWS; r++) {
		//  CONCATENA "table-row-class" ad "htmlTable" per stilizzare le righe
		htmlTable += '<div class="table-row-class">';
		//  CALCOLA e OTTIENE il numero di colonne di "COLS"
		for (var c = 0; c < COLS; c++) {
			//  CONCATENA i risultati dei 2 "for" ("r" e "c") e li INSERISCE in "cellId" (r_c)
			var cellId = r + '_' + c;
			//  CONCATENA htmlTable alla al div con la stringa "cellId" (r_c) e AGGIUNGE stile "cell-class"
			htmlTable += '<div id="' + cellId + '" class="cell-class"></div>';
			//  CHIUDE il ciclo da inserire nel "div"
		} htmlTable += '</div>';
	}
	//	SELEZIONA "table_id" e AGGIUNGE la classe di stile "table-class"
	document.getElementById("table_id").classList.add("table-class");
	//  SELEZIONA l'ID "table_id" e INSERISCE nell'elemento il valore di "htmlTable" generato nel "for"
	document.getElementById("table_id").innerHTML = htmlTable;
}