#Building a Tetris game: item generation, movement and collision issues in JS
rancid onyx
i HAVE 4 PROBLEMS:
- The shape appears after three second pressing the "START" btn and it starts from the third cell instead of the first one. That's strange, so that's why I tried to put a timeout but it doesn't change a thing. I really don't know how to solve it.
- The shape moves down by 2 two cells instead of 1. I've made a row++so the movement have to be of 1 row at time. I can't understand why.
- The shape shows only in the column 0. That's strange since i've randomized the columns.
- I still don't know how to make the shape collide when near the margins or other shapes and how to store the shape in that cell.. I'll try to learn how to do that today.
sleek kayak
I just only spoted one point:
You're increasing row before you consume it. So placing the row++ at the end of that if-statement might help.
Btw it is very ugly to read code from a screenshot. It would be much more helpful to share your code as codeblock, fiddle or codepen so others could take a closer look and recreate the error
rancid onyx
Just copying and pasting here?
Is there a way to have an IDE to put the code in it here?
rancid onyx
I just only spoted one point:
You're increasing row before you consume it. So ...
Anyway this morning I've dubugged it and now it works a little better. No more double row moves and no more starts from row 3. But now starts from row 2 instead of row 1.
Thtat's the new code. I don't know how to make a preview or open and IDE here on Discord
Now if I don't press start the console give me this error every second. I think that it's the timeout in item or the interval in movements
rancid onyx
Hi, my code seems broke for some reason now. The block animation doesn't work anymore. Plus, I still have the problem of not generating the item in the first row and in a random column. Can someone help?
rancid onyx
can someone tell me why the shape don't stop at the LAST-ROW?
LAST_ROW i 19. Table starts from 0
let isMoving = false;
let isColliding = false;
function moveDown() {
// Se "isMoving" è "true", FERMA la funzione
if (isMoving) {
return;
}
else if (isColliding) {
return;
}
// IMPOSTA "isMoving" su "true" e AGGIUNGE un timout alla funzione
isMoving = true;
isColliding = true;
setTimeout(function () {
let nextCellId = "";
// CICLA gli ID di ogni cella dell'item, li DIVIDE per usare row++, li CONCATENA e li SALVA in "cellIdNextCheck"
for (let i = 0; i < itemShape.length; i++) {
let [row, col] = itemShape[i].split('_');
nextCellId = (+row + 1) + '_' + col;
console.log(nextCellId);
// VERIFICA se "nextCellId" è a "LAST_ROW" o se è "stopped-item-class". Se sì, CICLA "itemShape", lo DIVIDE, lo SALVA in "cellIdCurrent" come "stopped-item-class" gli ID e AVVIA "createNewItem".
if (row == LAST_ROW || document.getElementById(nextCellId).classList.contains("stopped-item-class")) {
for (let i = 0; i < itemShape.length; i++) {
let [row, col] = itemShape[i].split('_');
let nextCellId = row + '_' + col;
document.getElementById(nextCellId).classList.add("stopped-item-class");
}
createNewItem();
return;
// Altrimenti, RIMUOVE le classi, AGGIORNA itemShape[i]
} else {
document.getElementById(itemShape[i]).classList.remove(selectedColor);
document.getElementById(itemShape[i]).classList.remove(itemName);
console.log("remove da movements.js");
itemShape[i] = nextCellId;
}
}
// AGGIUNGE le classi sulla riga aggiornata di "itemShape"
for (let i = 0; i < itemShape.length; i++) {
document.getElementById(itemShape[i]).classList.add(selectedColor);
document.getElementById(itemShape[i]).classList.add(itemName);
}
// IMPOSTA "isMoving" su "false" e richiama la funzione con un timeout
isMoving = false;
isColliding = false;
moveDown();
}, 500);
}
rancid onyx
rancid onyx
This is my latet movements.js file:
// movements.js
function moveDown() {
console.log("Inizia la funzione")
setTimeout(function () {
let nextCellIds = [];
// CICLA gli ID di "itemShape", li DIVIDE, AGGIUNGE +1 a "row" e lo SALVA in "nextRow". Infine CONCATENA gli ID e li SALVA in "nextCellIds"
for (let i = 0; i < itemShape.length; i++) {
let [row, col] = itemShape[i].split('');
let nextRow = +row + 1;
nextCellIds.push((nextRow) + '' + col);
// Se "nextRow" è >= di "ROWS" o se ha "stopped-item-class", AGGIUNGE "stopped-item-class" all'item, AVVIA "createNewItem" e FERMA il ciclo.
if (nextRow === ROWS.length || document.getElementById(nextCellIds[i]).classList.contains("stopped-item-class")) {
document.getElementById(itemShape[i]).classList.add("stopped-item-class");
console.log("L'oggetto ha colliso!");
createNewItem();
return;
}
}
for (let i = 0; i < itemShape.length; i++) {
document.getElementById(itemShape[i]).classList.remove(selectedColor, itemName);
itemShape[i] = nextCellIds[i];
}
for (let i = 0; i < itemShape.length; i++) {
document.getElementById(itemShape[i]).classList.add(selectedColor, itemName);
}
moveDown();
}, 500);
}
The block now moves down and collide, but tehy moves 2 cells at a time instead of 1. Plus the collision don't work well.
Can someone help?
next sand
it wouldn't let me download your code.. Perhaps you can set up a codepen?
rancid onyx
That's strange. Idk, let me see...
rancid onyx
it wouldn't let me download your code.. Perhaps you can set up a codepen?
https://codepen.io/DavideRedivaD/pen/OJoGEGg can you see it?
