Панда тетрис. Javascript - пишем игру (часть 3)

Делаем сайт с нуля, от верстки до выкладывания на хостинг. Создаем игру на javascript

[crsymym]

upd_3: Если нажимать кнопку Run до того, как игра завершится, то переменная timer не будет очищаться и соответственно таймер начнёт ускоряться. Причём, чем больше кликов, тем быстрее падение шариков. Поэтому, первой строкой кода в функции run() нужно прописать clearTimeout(timer);
P.S. Александр, спасибо за уроки.

[Ekscen]

Вы даже сами попросили вам подсказать как делать проверку в функции финиш без тройного цикла поэтому я решил написать это сообщение.
function finish() {
let stop = true;
for (let j = 0; j < lengthX; j++){
// lengthX - переменная которую вы задавали при построении игрового поля у вас она называется Х
for (let i = 0; i < lengthY; i++){
//Аналог выше
if (tetris[i][j] == 0) {
stop = false;
break;
}
stop = true;
}
if (stop) {
clearInterval(timer);
alert ("over");
}
}
}
Как вы и сами прекрасно видите достаточно перебирать сначала j а в нем i, таким образом мы перебираем столбики а не строки.(надеюсь вы поняли о чем я, на словах сложно понимать)

[elena_sva]

Спасибо за урок. Наверное не обратили внимания, но рандом цвета выдает числа от нуля до 5ти, т.о. выпавший кубик может быть и белого цвета. В целом на игру не влияет, но ведь нелогично)

[crsymym]

upd_2: А если нужно проверять весь первый ряд, то код чуть увеличится:
function finish() {
for(let i = 0; i < tetris[1].length; i++) {
if(tetris[1][i] >= 10) {
clearTimeout(timer);
break;
}
}
}

[crsymym]

Функцию finish() можно упростить до одной стоки кода и всё будет работать так же безупречно. Ну зачем нужны несколько циклов? Ведь, по сути проверяется только нулевая ячейка первого ряда на то, что она >= 10. А она будет иметь такое значение, только если нижестоящие ячейки все заполнены и имеют такое же значение. Поэтому вот код функции:
function finish() {
if(tetris[1][0] >= 10) clearTimeout(timer);
}
Да можно обойтись и без этой функции, просто добавив эту строку с очисткой setTimeout в функцию run();

[sergiykolesnyk]

после перехода с 2й части на 3ю часть, функция run() переписалась за кадром. От этого выходит баг смещения кружков Left / Right
верная функция:


function run() {
console.log(tetris);
timer = setTimeout(function () {
draw();
flag = true;
for (let i = tetris.length - 1; i >= 0; i--) {
for (let j = 0; j < tetris[i].length; j++) {
if (tetris[i][j] < 10) {
if (i == tetris.length - 1 && tetris[i][j] != 0) {
tetris[i][j] = tetris[i][j] + 10;
} else if (tetris[i][j] != 0) {
if (tetris[i + 1][j] == 0) {
tetris[i + 1][j] = tetris[i][j];
tetris[i][j] = 0;
flag = false;
if (i + 1 == tetris.length - 1) {
tetris[i + 1][j] = tetris[i + 1][j] + 10;
}
} else if (tetris[i + 1][j] >= 10) {
tetris[i][j] = tetris[i][j] + 10;
}
}
}
}
}
if (flag) square();
run();
}, 400);
}

[crsymym]

upd_4: Извиняюсь за занудство - просто тестирую код. Если после окончания игры нажимать право/лево - то появляется шар, а не должен бы. Конечно он никуда не падает, но сдвигать в стороны можно. Исправил, переписав анонимную функцию, где вместо switch/case использовал if/if else :
document.onkeydown = function(event) {
/*switch(event.code) {
case 'ArrowRight':
goRicht();
break;
case 'ArrowLeft':
goLeft();
break;
}*/
if(event.code == 'ArrowRight' && tetris[1][0] < 10) {
goRicht();
} else if(event.code == 'ArrowLeft' && tetris[1][0] < 10) {
goLeft();
}
return false;
}

[RiO-kyki]

При перемещении блока (шарика) влево, вправо, перемещаются и другие во 2-ой и т.д. строках, почему так происходит? Подскажите, если не тяжело. Спасибо за уроки!