cell.bgColor = 'red';
Ничего сложного, просто в случае если значение нашей временной переменной соответствует тому, что в текущей ячейке бомба, мы выставляем в поле bgColor ячейки значение 'red'. Теперь, при отрисовке, фон ячеек с бомбами будет заливаться красным. В дальнейшем, когда мы не будем сразу показывать где что находится, а будем давать возможность пользователю открывать ячейки, благодаря этому, станет более очевидно, что наш игрок открыл бомбу и проиграл.
В этой главе нам осталось поговорить о новом методе, который нам понадобился. Для его работы я ввёл небольшой вспомогательный метод hasMine:
this.hasMine = function(i, j)
{
if ((i < 0) || (j < 0) || (i >= this.rowCount) || (j >= this.colCount))
return 0;
if (this.mines[i * this.rowCount + j] == 1)
return 1;
return 0;
}
Этот метод принимает индекс строки и столбца для ячейки и возвращает ноль, если хотя бы один из индексов за пределами нашей таблицы (это проверяется в первой строке). Напомню, на всякий случай, что "||" соответствует логической операции «ИЛИ». Третья строка непосредственно проверяет, есть–ли в ячейке бомба и если она есть, мы возвращаем единичку. И, наконец в конце, если мы всё ещё не вышли из функции (ничего не вернули, так как ни одно из условий не выполнилось), мы тоже возвращаем ноль.
Ну и наконец последнее, сам метод 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. Сегодняшняя статья рискует закончить что–то вроде учебника по этому языку. В вашего сапёра после этой главы уже можно будет играть. Конечно, останется ещё ряд недоделок, например, стоит добавить сообщения при выигрыше и при проигрыше, нужно также сделать так, чтобы при открытие ячейки, рядом с которой нет бомб автоматически открывались также все её соседи. Ещё было бы не плохо сделать возможность выбирать размер поля и количество бомб на нём, добавить возможность помечать ячейки как ячейки с бомбами.
В общем при большом желании можно ещё писать и писать. Однако, дело в том, что ничего принципиально нового мы при этом не пройдём, с теми знаниями, что мы уже прошли всё это и так можно сделать. Возможно стоит только сделать ряд опций, посмотрим.
Сегодня впервые я решил не приводить весь код программы, так как изменения коснулись только функции initTable. Вот во что она превратилась:
var mines = new minesClass(10, 10, 10);
function checkCell(i, j)
{var tbl = document.getElementById(«tbl»);
var cell = tbl.rows[i].cells[j];
var s = mines.checkCell(i, j);
cell.innerHTML = s;
if (s == "*")
cell.bgColor = 'red';}
function initTable()
{var tbl = document.getElementById(«tbl»);
for (var i = 0; i < mines.rowCount; i++)
{var row = tbl.insertRow(i);
for(var j = 0; j < mines.colCount; j++)
{var cell = row.insertCell(j);
cell.innerHTML = '?';
function SetCellClick(i, j)
{cell.onclick= function() {checkCell(i, j)};};
SetCellClick(i, j);}}}