Читать интересную книгу JavaScript. Учебник начального уровня - DarkGoodWIN

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 2 3 4 5 6 7

Для реализации этой функции мы будем использовать ещё один предопределённый объект JavaScript‑Math, а именно, два метода этого объекта: round() и random(). Метод round() округляет число, переданное в качестве параметра до ближайшего целого. Например, raund(2.93) вернёт число 3, а raund(2.45) — число 2. Метод  random() возвращает случайное дробное число от 0 до 1.

Предположим, мы вызвали функцию intRand() от 2, тогда (maxVal + 1) * Math.random() будет случайным дробным числом от 0 до 3. Каждое значение равновероятно, причём, при последующем округлении (если мы сразу применим функцию random к этому числу), нам вернётся 0 в случае, если число от 0 до 0.5; 1 если число от 0.5 до 1.5; 2 если число от 1.5 до 2.5 и 3 для числа от 2.5 до 3. Как видно из рассчётов, вероятность того, что вернётся 0 или 3 в два раза ниже, чем вероятность того, что вернётся 1 или 2. При том, что тройка нам не нужна совсем, а вероятность возврата 0 хотелось бы иметь равной вероятности возврата 1 и 2. Можно, конечно, написать условие, что если результат maxVal + 1, то вернуть 0 и это тоже будет формально правильно, однако я перед округлением вычел из дробного числа 0.5, что привело к по сути такому же результату.

Первый класс

Долго думал, стоит ли в рамках этого опуса использовать классы. На практике я часто сталкивался с тем, что очень не просто бывает объяснить зачем они нужны. На первый взгляд, после переделки какой–то простой процедурно–ориентированной программы в объектно ориентированную, ну или попросту после выделения одного–двух классов, программа, как правило, начинает выглядеть даже сложнее. Я всё же попробую. Причём как обычно буду стараться говорить человеческим языком, а если и буду вводить какие–то термины, постараюсь их объяснять.

Собственно преимущества выделения классов должны всплывать и в следующих главах по ходу повествования. Тут я лишь вскользь об этом упомяну.

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

Что же я поменял? Я выделил новый класс «minesClass» и перенёс туда часть переменных и функций. Для чего мне это понадобилось? Я решил отделить логику программы от её интерфейса. То есть класс «minesClass» ничего не будет знать о нашей таблице, однако он сам расставит бомбы при своём создании, а затем останется лишь их нарисовать.

Предлагаю читателю посмотреть на то, что получилось, а затем я всё–таки попытаюсь объяснить ему, что стало лучше.

<html>

<head>

head>

<script>

    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.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);

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

           cell.innerHTML = '*'

         else

           cell.innerHTML = '.';

}

}

}

  script>

  <body onLoad = initTable();>

    <table ID = «tbl» BORDER = 2 width = 80% height = 80%>

    table>

body>

html>

Короче и понятнее, ничего лишнего. Сразу видно, что к чему относится. Представте, что у вас в программе есть таблица для игры mines и одновременно есть таблица для игры в точки. Довольно трудно будет сказать в этом случае, что значит переменная rowCount. А вот если написано mines.rowCount, сразу всё понятно.

Перейдём к функции 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 и даже показать, что это может сделать программу понятнее. Если не вышло — значит я плохо старался… Однако у меня ещё остаётся надежда, что дальше всё станет понятнее. Тут затрагивались довольно трудные для понимания вещи и если что–то осталось непонятным — ничего удивительного и ничего страшного.

Считаем бомбы

На самом деле в этой главе тоже не будет ничего нового. Всё основное, чтобы реализовать функциональность этой главы я уже рассказал. Но что поделать, надо довести начатое до конца, да и потом, даже если где–то в чём–то я повторюсь, так ведь повторение — мать учения.

В прошлой главе мы остановились на том, что у нас была табличка, в которой рисовались бомбы в виде символа "*" или клетки без бомб в виде точки. Но это не очень–то похоже на сапёр в который мы все привыкли играть. Там вроде как в каждой клетке пишется количество соседних с ней клеток в которых есть бомба.

Ну что же, давайте сделаем это и в нашей программе. Ниже я приведу код, а потом, как обычно, его прокомментирую.

<html>

<head>

head>

<script>

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);

1 2 3 4 5 6 7
На этом сайте Вы можете читать книги онлайн бесплатно русская версия JavaScript. Учебник начального уровня - DarkGoodWIN.
Книги, аналогичгные JavaScript. Учебник начального уровня - DarkGoodWIN

Оставить комментарий