DarkGoodWIN: JavaScript. Учебник начального уровня

vars = mines.checkCell(i, j);

cell.innerHTML = s;

if(s == "*")

cell.bgColor = 'red';

}

}

}

script>

table>

body>

html>

Давайте начнём обсуждение с изменений в функции initTable. По сути сейчас, как вы, наверное, помните, состоит из этой функции и класса minesClass, который она использует.

Для решения нашей задачи, я завёл в нашем классе новый метод checkCell, который принимает номер строки и номер столбца в качестве параметров и возвращает символ "*", если в соответствующей ячейке есть бомба или число соседних ячеек с бомбами, если бомбы в ней нет.

Теперь мы заполняем нашу табличку не звёздочками и точками, а результатом этой функции. Другими словами, метод checkCell возвращает то, что мы должны будем нарисовать в ячейке после того, как игрок на ней кликнет (пока для простоты мы это всё показываем сразу).

Так вот, для каждой ячейки мы сперва кладём результат функции checkCell для неё во временную переменную, а потом присваиваем значение этой переменной полю innerHTML этой ячейки.

После этого я решил сделать ещё небольшое улучшение. Посмотрим это сперва в коде:

if(s == "*")

cell.bgColor = 'red';

Ничего сложного, просто в случае если значение нашей временной переменной соответствует тому, что в текущей ячейке бомба, мы выставляем в поле bgColor ячейки значение 'red'. Теперь, при отрисовке, фон ячеек с бомбами будет заливаться красным. В дальнейшем, когда мы не будем сразу показывать где что находится, а будем давать возможность пользователю открывать ячейки, благодаря этому, станет более очевидно, что наш игрок открыл бомбу и проиграл.

В этой главе нам осталось поговорить о новом методе, который нам понадобился. Для его работы я ввёл небольшой вспомогательный метод hasMine:

this.hasMine = function(i, j)

{

if((i < 0) || (j < 0) || (i >= this.rowCount) || (j >= this.colCount))

return0;

if( this.mines[i * this.rowCount + j] == 1)

return1;

return0;

}

Этот метод принимает индекс строки и столбца для ячейки и возвращает ноль, если хотя бы один из индексов за пределами нашей таблицы (это проверяется в первой строке). Напомню, на всякий случай, что "||" соответствует логической операции «ИЛИ». Третья строка непосредственно проверяет, есть–ли в ячейке бомба и если она есть, мы возвращаем единичку. И, наконец в конце, если мы всё ещё не вышли из функции (ничего не вернули, так как ни одно из условий не выполнилось), мы тоже возвращаем ноль.

Ну и наконец последнее, сам метод checkCell. Он тоже принимает на вход номер строки и столбца. Давайте сперва посмотрим на его реализацию.

this.checkCell = function(i, j)

{

if( this.hasMine(i, j))

return'*';

return this.hasMine(i - 1, j - 1) + this.hasMine(i - 1, j) + this.hasMine(i - 1, j + 1) +

this.hasMine(i, j - 1) + this.hasMine(i, j + 1) +

this.hasMine(i + 1, j - 1) + this.hasMine(i + 1, j) + this.hasMine(i + 1, j + 1);

}

На самом деле он сдеан довольно–таки топорно и куда элегантней, да и правильней, наверное, было бы сделать вложенный цикл, но так мне показалось нагляднее. Можете поэкспериментировать если будет желание. Помните, от row, равной i - 1, до row <= i + 1 выполним от col = j - 1 до col <= j + 1, res += this.hasMine(row, col).

Ладно, вернёмся к тому, как это сделал я. Сначала мы проверяем наличие бомбы непосредственно для ячейки со строкой i и столбцом j, если она там есть, мы возвращаем "*". Если бомбы нет, мы возвращаем сумму результатов функции hasMine для всех соседей. Как вы помните, hasMine возвращает ноль, если бомбы нет и единицу, если она там есть, таким образом, мы вернём именно то, что хотели.

Продолжу серию статей про программирование для JavaScript. Сегодняшняя статья рискует закончить что–то вроде учебника по этому языку. В вашего сапёра после этой главы уже можно будет играть. Конечно, останется ещё ряд недоделок, например, стоит добавить сообщения при выигрыше и при проигрыше, нужно также сделать так, чтобы при открытие ячейки, рядом с которой нет бомб автоматически открывались также все её соседи. Ещё было бы не плохо сделать возможность выбирать размер поля и количество бомб на нём, добавить возможность помечать ячейки как ячейки с бомбами.