В данном уроке я покажу вам реализацию игры "найди случайное число в таблице". Игровое поле представляет собой таблицу с числами, расположенными в случайном порядке. Игрок должен находить числа в правильном порядке. После победы игровое поле расширяется на один ряд и одну колонку и игра продолжается далее.
Исходники кода
.game td {
padding: 20px;
border: 1px solid black;
}
.active {
background: red;
}
<div id="game1" class="game"></div>
<div id="game2" class="game"></div>
initGame(document.querySelector('#game1'));
initGame(document.querySelector('#game2'));
function initGame(game) {
var field = createGameField(game);
var size = 2;
newGame();
function newGame() {
clearGameField(field);
var cells = drawGameField(size, field);
addActivateHandler(cells);
}
function addActivateHandler(cells) {
var counter = 1;
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', function() {
if (this.innerHTML == counter) {
this.classList.add('active');
if (counter == size * size) {
size++;
newGame();
}
counter++;
}
});
}
}
}
function createGameField(game) {
var table = document.createElement('table');
game.appendChild(table);
return table;
}
function clearGameField(field) {
field.innerHTML = '';
}
function drawGameField(size, field) {
var from = 1;
var to = size * size;
var arr = [];
arr = createArr(from, to);
arr = shuffleArr(arr);
arr = chunkArr(size, arr);
return createCells(arr, field);
}
// [[1, 2], [3, 4]]
function createCells(arr, elem) {
var cells = [];
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < arr[i].length; j++) {
var td = document.createElement('td');
td.innerHTML = arr[i][j];
tr.appendChild(td);
cells.push(td);
}
elem.appendChild(tr);
}
return cells;
}
function createArr(from, to) {
var arr = [];
for (var i = from; i <= to; i++) {
arr.push(i);
}
return arr;
}
function shuffleArr(arr) {
var result = [];
var length = arr.length;
for (var i = 0; i < length; i++) {
var random = getRandomInt(0, arr.length - 1);
var elem = arr.splice(random, 1)[0];
result.push(elem);
}
return result;
}
// [1, 2, 3, 4, 5] -> [[1, 2], [3, 4], [5]]
function chunkArr(n, arr) {
var result = [];
var iterCount = Math.ceil(arr.length / n);
for (var i = 0; i < iterCount; i++) {
var elems = arr.splice(0, n);
result.push(elems);
}
return result;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}