I am trying to build a Tetris game in javaScript and HTML. I ran into problems with my function for removing the full lines. It sort of works, but not every time and not as I expected. I am not a professional programmer, I am learning to code just for fun. My knowledge of javaScript is limited and my methods are primitive. My board is made of div tags. Each of them represents one square and has an id with unique number. Currently falling shape is stored by an array called “brick”. It contains four numbers, which corresponds to the div ids.
For example brick = [2, 2, 3, 5] means Tetris “l” piece positioned horizontally. There are 12 squares in a row. The first and last has the class “fender,” which means, that they cannot became part of the brick, and so the shape could not leave the board.
The fender squares are made invisible by CSS. The brick is falling by adding 12. From [2, 3, 4, 5] it is [14, 15, 16, 17], etc. The first four rows have display set to “none,” so the visible board starts by square number 63.
On the beginning, every square of the board (except the fender squares) has a class “free,” which means that it is permeable for falling shape. When it does not have the class, the shape can’t move through it. When the brick hits the bottom or another fallen shape, it is added to another variable, called pile.
This is done by a function called touchdown(). It does several other things. The color of the brick is stored in another variable called colorPile. For example when the blue brick [2, 3, 4, 5] lands, it adds to colorPile variable four times “blue”. Touchdown() also removes the class “free” from all the squares of the brick, so the next brick can’t fall through the occupied space. Then it calls for the creation of a new brick.
The deleting process starts with function called testLines():
// Look through all board lines
for (var i = 62; i < 300; i += 12) {
// Prepare empty array
line = [];
// Put numbers of occupied squares in the array.
for (var j = i; j < i + 10; j++) {
if (document.getElementById("sq" + j).classList.contains("free") === false) {
line.push(j);
}
}
// When the line is full, put its number in “numb” variable and call for deleting function
if (line.length == 10) {
numb = i;
clearLine(numb);
}
}
}
}
It goes through all lines of the board and look for the full ones. If there is a full line, it stores its number in a variable called “numb” and calls another function named clearLine():
function clearLine() {
// Put the indexes of the squares in the full line in a special array
indexes = [];
for (var i = numb; i < numb + 10; i++) {
indexes.push(pile.indexOf(i));
}
// Remove numbers on the indexes
pileindexor = indexes.length;
while (pileindexor--) {
pile.splice(indexes[pileindexor], 1);
}
// Add 12 to all numbers greater than the line number (= move them on row down)
for (var j = 0; j < pile.length; j++) {
if (pile[j] < numb) {
pile[j] = (pile[j] + 12);
}
}
clearColorPile();
paintPile();
clearBoard();
lines++;
testLines();
}
It also calls function called clearColorPile(), which removes colors on same indexes from the "colorPile" variable. Next it calls another function called paintPile(). The paintPile() function changes color of all squares in the "pile" variable according to the modified "colorPile" variable and removes “free” class from them.
Than the clearLine() calls another function called clearBoard(). It paints all squares not belonging to the pile white and ads the “free” class to them. Finally, the clearLine() function calls again the testLines() to look for more full rows.
This procedure is behaving as I expected for most of the time. But sometimes, the full line is not cleared completely. My game is here. You can see for yourselves. What have I done wrong? How to delete the full line?
