Книга: 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);
}
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 возвращает ноль, если бомбы нет и единицу, если она там есть, таким образом, мы вернём именно то, что хотели.
Оглавление книги
- Глава 18. Пишем и считаем
- «БОМБЫ» ПРОТИВ «ЭНИГМЫ»
- Расставим бомбы.
- 18. Читаем, пишем, считаем, или Конструирование интерпретатора форматов
- 6.1.15. Считаем в таблицах
- Считаем бобы
- Мы осознаем только те альтернативы, которые считаем достаточно хорошими
- Считаем калории
- Считаем биткойн — комиccuu
- Считаем эффективность рекламы