Let's make a game with a square table that will
randomly contain numbers from 1 to N,
where N is the number of cells in the table.
The essence of the game will be that you will
need to click on the cells in the correct
order: first on 1, then on 2,
then on 3 and etc.
If the player clicks on the correct cell - let it be activated and make a red background. If player clicks on the wrong cell, nothing happens.
When the player finds the last number - let the game start again, but the table increases by one row and one column. For a better understanding of your task, I have prepared a sample of what should be as result:
Preparation
First, let's prepare the layout:
<div id="parent">
<table id="field"></table>
</div>
#parent {
text-align: center;
}
#field {
display: inline-block;
}
#field td {
padding: 20px;
border: 1px solid black;
cursor: pointer;
}
.active {
background: red;
}
We will also get a reference to the table representing the playing field:
let field = document.querySelector('#field');
Copy your preparation code.