JavaScript. Учебник начального уровня - страница 10
Перейдём к функции minesClass. Это по сути и есть наш новый класс. В JavaScript класс — это просто функция, а чтобы создать новый экземпляр классна нужно перед вызовом функции написать слово new.
В этой функции мы инициализируем методы intRand, fillMines, colCount, rowCount, minesCount и mines. В JavaScript методы также могут быть полями. Например, так мы описываем новый метод intRand. По сути переносим его в класс minesClass.
> this.intRand = function(maxVal)
> {
> return Math.floor((maxVal‑1) * Math.random() + 0.5) — 1;
>}
Я бы прочитал это так: поле «intRand» соответствует (равно) функции, которая принимает максимальное значение в качестве единственного параметра и возвращает случайное целое число от нуля до этого числа.
Аналогичным образом мы переносим функцию fillMines, делая её методом класса minesClass. Параметры этой функции уже не нужны, так как у метода класса есть доступ к его полям. Следует только не забывать перед обращением к полям класса писать «this.». Например, this.rowCount, this.mines и так далее.
Надеюсь мне хотя бы примерно удалось рассказать про то, как можно создавать и использовать классы в JavaScript и даже показать, что это может сделать программу понятнее. Если не вышло — значит я плохо старался… Однако у меня ещё остаётся надежда, что дальше всё станет понятнее. Тут затрагивались довольно трудные для понимания вещи и если что–то осталось непонятным — ничего удивительного и ничего страшного.
Считаем бомбы
На самом деле в этой главе тоже не будет ничего нового. Всё основное, чтобы реализовать функциональность этой главы я уже рассказал. Но что поделать, надо довести начатое до конца, да и потом, даже если где–то в чём–то я повторюсь, так ведь повторение — мать учения.
В прошлой главе мы остановились на том, что у нас была табличка, в которой рисовались бомбы в виде символа "*" или клетки без бомб в виде точки. Но это не очень–то похоже на сапёр в который мы все привыкли играть. Там вроде как в каждой клетке пишется количество соседних с ней клеток в которых есть бомба.
Ну что же, давайте сделаем это и в нашей программе. Ниже я приведу код, а потом, как обычно, его прокомментирую.
>
>
>head>
>
>function minesClass(aRowCount, aColCount, aMinesCount)
>{
>this.intRand = function(maxVal)
>{
>return Math.floor((maxVal‑1) * Math.random() + 0.5) — 1;
>}
>this.fillMines = function()
>{
>var res = new Array(this.rowCount * this.colCount);
>var mines = this.minesCount;
>while (mines > 0)
>{
>var n = this.intRand(this.rowCount * this.colCount‑1);
>if (res[n] != 1)
>{
>res[n] = 1;
>mines--;
>}
>}
>return res;
>}
>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;
>}
>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);
>}
>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>
>
Давайте начнём обсуждение с изменений в функции initTable. По сути сейчас, как вы, наверное, помните, состоит из этой функции и класса minesClass, который она использует. Для решения нашей задачи, я завёл в нашем классе новый метод checkCell, который принимает номер строки и номер столбца в качестве параметров и возвращает символ "*", если в соответствующей ячейке есть бомба или число соседних ячеек с бомбами, если бомбы в ней нет. Теперь мы заполняем нашу табличку не звёздочками и точками, а результатом этой функции. Другими словами, метод checkCell возвращает то, что мы должны будем нарисовать в ячейке после того, как игрок на ней кликнет (пока для простоты мы это всё показываем сразу).>
>table>
>body>
>html>