Реализация функциональности игрового процесса
Требования:
- Навык работы с циклами и условиями в JavaScript.
- Знание способов манипуляции с DOM с использованием JavaScript.
Функциональность:
- Создать ядро игровой динамики.
- Сконструировать сценарии окончания игры.
- Реализовать механизмы создания и движения блоков.
Шаги:
- Проверить, нажал ли игрок на черный или белый блок. Обновить статус игры в зависимости от нажатия игрока.
// Определить, нажат ли черный или белый блок
function judge(ev) {
if (
ev.target.className.indexOf("black") == -1 &&
ev.target.className.indexOf("cell") !== -1
) {
ev.target.parentNode.pass1 = 1; // Определяет атрибут pass, который показывает, что белый блок этой строки был нажат
}
if (ev.target.className.indexOf("black") !== -1) {
// Нажатие на элемент с классом, содержащим "black", означает черный блок
ev.target.className = "cell";
ev.target.parentNode.pass = 1; // Определяет атрибут pass, указывающий на то, что черный блок этой строки был нажат
score();
}
}
- Определить, когда игра окончена на основе взаимодействия игрока. Запустить действия по окончанию игры, когда игра заканчивается.
// Проверить, закончена ли игра
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// Конец игры
function fail() {
clearInterval(clock);
flag = false;
confirm("Итоговый счет: " + parseInt($("score").innerHTML));
var con = $("con");
con.innerHTML = "";
$("score").innerHTML = 0;
con.style.top = "-408px";
}
- Генерировать ряды блоков для игрового процесса. Случайным образом располагать "черный" блок среди других.
// Создать <div class="row"> с четырьмя дочерними <div class="cell">
function createrow() {
var con = $("con");
var row = creatediv("row"); // Создать div: className=row
var arr = createcell(); // Определить класс имени div cell, один из которых является cell black
con.appendChild(row); // Добавить дочерний узел с row в качестве con
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); // Добавить дочерние узлы row cell
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// Создать массив имен классов; один из них - "cell black", остальные - "cell"
function createcell() {
var temp = ["cell", "cell", "cell", "cell"];
var i = Math.floor(Math.random() * 4); // Случайным образом сгенерировать позицию черного блока Math.random() функция параметров 0~1 случайное число
temp[i] = "cell black";
return temp;
}
- Сделать блоки двигаться вниз непрерывно. Удалять старые ряды, когда они выходят из вида.
// Переместить черные блоки вниз
function move() {
var con = $("con");
var top = parseInt(window.getComputedStyle(con, null)["top"]);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + "px"; // Продолжать двигать значение top, чтобы оно двигалось
over();
if (top == 0) {
createrow();
con.style.top = "-102px";
delrow();
}
}
// Удалить строку
function delrow() {
var con = $("con");
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
