DarkGoodWIN - JavaScript. Учебник начального уровня
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);
}
this.colCount = aColCount;
this.rowCount = aRowCount;
this.minesCount = aMinesCount;
this.mines = this.fillMines();
}
function initTable()
{
var mines = new minesClass(10, 10, 10);
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);
var s = mines.checkCell(i, j);
cell.innerHTML = s;
if (s == "*")
cell.bgColor = 'red';
}
}
}
script>
<body onLoad = initTable();>
<table ID = «tbl» BORDER = 2 width = 80% height = 80%>
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))
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);}}}
Давайте по порядку. Строчку «var mines = new minesClass(10, 10, 10);" я перенёс наверх, чтобы переменная mines стала доступна из других функций (напомню, что переменная, объявленная внутри функции доступна только внутри этой функции, а «внешние» переменные доступны также в других функциях). Нам потребуется использовать эту переменную в функции checkCell, которую мы выделили из функции initTable.
По сути, в функции checkCell мы получаем из таблицы ячейку с i-ой строкой и j-ым столбцом и присваиваем ей текст, соответствующий количеству бомб рядом (раньше мы это делали непосредственно при инициализации таблицы). Для получения ссылки на ячейку, мы получаем ссылку на таблицу с помощью метода getElementById заранее предопределённой переменной document. Далее мы получаем ссылку на нужную строку, обращаясь к полю rows таблицы (это массив, поэтому после имени поля в квадратных скобках указываем индекс) и сразу же обращаемся к полю cells строки (это тоже массив) для получения искомой ссылки на ячейку.
Последующие строки функции checkCell мы перенесли из функции initTable без изменений.
Ну и последнее о чём осталось рассказать — функция initTable. Несколько строчек мы оттуда унесли и появилась, несколько добавили:
cell.innerHTML = '?';
function SetCellClick(i, j)
{cell.onclick= function() {checkCell(i, j)};};
SetCellClick(i, j);
С первой строкой, думаю, проблем не будет, а вот дальше придётся применить один интересный приём под названием замыкание. Этот метод нашёл широкое применение в JavaScript, не знаю используется–ли он в других языках, не сталкивался, а тут без него ряд задач сделать крайне сложно.
Так вот, зачем же мы пишем так:
function SetCellClick(i, j)
{cell.onclick= function() {checkCell(i, j)};};
SetCellClick(i, j);
и почему нельзя написать просто так:
cell.onclick= function() {checkCell(i, j)};
Чтобы ответить на этот вопрос, давайте попробуем поставить себя на место интерпретатора. Как ему определить, что вам в качестве параметра функции checkCell нужны именно конкретные значения переменных i и j в данный момент, а не значения этих переменных в момент вызова функции. Не буду сейчас загромождать вам мозг понятием ссылок и указателей, с помощью которых зачастую подобные проблемы решаются в других языках, в JavaScript, насколько мне известно таких понятий нет.
