<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>JS Игра</title>
<style>
#game td {
width: 50px;
height: 50px;
border: 1px solid rgb(0, 0, 0);
text-align: center;
cursor: pointer;
}
.active {
background-color: lightgreen;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="game">
<table class="field">
</table>
</div>
<script>
function drawGameFields(size) {
var field = $('.field');
var from = 1;
var to = Math.pow(size, 2);
var arr = [];;
arr = createArr(from, to);
createCells(arr, size, field);
}
function createArr(from, to) {
var arr = [];
for (var i = from; i <= to; i++) {
arr.push(i);
}
arr.sort(function compareRandom(a, b) {
return Math.random() - 0.5;
});
return arr;
}
function createCells(arr, size, field) {
field.html(function(index, element) {
var content = '';
var e = 0;
for (var i = 0; i < size; i++) {
content += '<tr>';
for (var j = 0; j < size; j++) {
content += '<td>' + arr[e] + '</td>';
e++;
}
content += '</tr>';
}
return content;
});
}
var startSize = 3;
newGame(startSize)
function newGame(size) {
drawGameFields(size);
var counter = 1;
$('td').click(function(eventObject) {
if ($(this).text() == counter) {
$(this).addClass("active");
if (counter == size * size) {
alert("Поздравляю! Следующий уровень?");
size++;
newGame(size);
} else {
counter++;
}
} else {
alert("Ошибка! Начать сначала?");
size = startSize;
newGame(size);
}
});
}
</script>
</body>
</html>
<script>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function setRandomColor() {
$("td").css("color", getRandomColor());
}
</script>
Простой
