Короче и понятнее, ничего лишнего. Сразу видно, что к чему относится. Представте, что у вас в программе есть таблица для игры mines и одновременно есть таблица для игры в точки. Довольно трудно будет сказать в этом случае, что значит переменная rowCount. А вот если написано mines.rowCount, сразу всё понятно.
Перейдём к функции minesClass. Это по сути и есть наш новый класс. В JavaScript класс — это просто функция, а чтобы создать новый экземпляр классна нужно перед вызовом функции написать слово new.
В этой функции мы инициализируем методы intRand, fillMines, colCount, rowCount, minesCount и mines. В JavaScript методы также могут быть полями. Например, так мы описываем новый метод intRand. По сути переносим его в класс minesClass.
Я бы прочитал это так: поле «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>
>
>>table>
>body>
>html>
Давайте начнём обсуждение с изменений в функции initTable. По сути сейчас, как вы, наверное, помните, состоит из этой функции и класса minesClass, который она использует.
Для решения нашей задачи, я завёл в нашем классе новый метод checkCell, который принимает номер строки и номер столбца в качестве параметров и возвращает символ "*", если в соответствующей ячейке есть бомба или число соседних ячеек с бомбами, если бомбы в ней нет.
Теперь мы заполняем нашу табличку не звёздочками и точками, а результатом этой функции. Другими словами, метод checkCell возвращает то, что мы должны будем нарисовать в ячейке после того, как игрок на ней кликнет (пока для простоты мы это всё показываем сразу).
Так вот, для каждой ячейки мы сперва кладём результат функции checkCell для неё во временную переменную, а потом присваиваем значение этой переменной полю innerHTML этой ячейки.
После этого я решил сделать ещё небольшое улучшение. Посмотрим это сперва в коде:
>if (s == "*")
>cell.bgColor = 'red';
Ничего сложного, просто в случае если значение нашей временной переменной соответствует тому, что в текущей ячейке бомба, мы выставляем в поле bgColor ячейки значение 'red'. Теперь, при отрисовке, фон ячеек с бомбами будет заливаться красным. В дальнейшем, когда мы не будем сразу показывать где что находится, а будем давать возможность пользователю открывать ячейки, благодаря этому, станет более очевидно, что наш игрок открыл бомбу и проиграл.
Еще от автора DarkGoodWIN
Наш сайт использует куки для сбора анонимной статистики.