HTML+CSS+JS to implement the Don't Step on the Whiteboard game

<div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">Game Start</a>
        </div>
        <div id="main">
</div></div>

*{
    margin:0;
    padding:0;
}

.wrapper{
    margin:150px auto;
    width:400px;
    height:600px;
    border:1px solid #ccc;
    position: relative;
    overflow: hidden;
}

#go{
    width:100%;
    position: absolute;
    top:0;
    text-align: center;
    z-index:99;
}

#go a{
    display:block;
    height:100px;
    width:400px;
    color:cyan;
    background-color: #000000;
    text-decoration: none;
    border-bottom:3px dashed #eee;
    font-size:60px;
    font-weight:600;
}

#main{
    width:400px;
    height:600px;
    position: relative;
    top:-150px;
    /* border:1px solid black; */
}

.row{
    width:400px;
    height:150px;
}

.row div{
   width:99px;
   height:149px;
   border-left:1px solid #222;
   border-bottom:1px solid #222;
   float: left;
   cursor: pointer;
}

var main = document.getElementById('main'); // Get DOM element var go = document.getElementById('go'); 
var speed = 5, num = 0, timer, flag = true; // Set initial variables var colors = ['red', 'green', 'black', 'blue']; // Set the array to store colors

function cDiv() {
    var oDiv = document.createElement('div'); // Get a random number and find a random div for each row and set its color var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // Set the row class name for (var j = 0; j < 4; j++) { // for loop generates a row of four divs
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); //Insert each small div into each row}
    
    if (main.childNodes.length == 0) { // Insert the newly generated row based on whether there are child elements in the parent main.appendChild(oDiv); // If the parent is empty, insert directly } else {
        main.insertBefore(oDiv, main.childNodes[0]); // If the parent has elements, insert the newly generated row to the front of the existing number of rows} 
    var clickDiv = main.childNodes[0].childNodes[index]; // Set the colored div in a row according to the random number
    clickDiv.setAttribute('class', 'i'); // Set the class name of this element as the mark to be clicked clickDiv.style.backgroundColor = colors[index]; // Set the background color at the same time}

function bindEvent() {
    main.addEventListener('click', function (event) { // Add a click event to mainif (flag) { // Determine whether it is clickable based on the flag valuevar tar = event.target; // Get the source event of the clickif (tar.className == 'i') { // Determine whether the clicked block is coloredtar.style.backgroundColor = '#bbb'; // Change the background colortar.classList.remove('i'); // Remove the class namenum++; // Count++
            } else {                
                alert('Game over, score: ' + num); // If you click on the white block, the game is over clearInterval(timer);
                flag = false;
            }            
            if (num % 10 == 0) { // If the current score is a multiple of 10, speed++
                speed++;
            }
        }
    })
}

function move() {
    clearInterval(timer); 
    timer = setInterval(function () { // Set the timer var step = parseInt(main.offsetTop) + speed; // Use the top value to move the main area main.style.top = step + 'px';
        if (parseInt(main.offsetTop) >= 0) { // If the main area moves to the visible area, create a new row of elements cDiv();
            main.style.top = '-150px'; // Also move the main area above the visible area}
        var len = main.childNodes.length; // Get the number of rows in the main area if (len == 6) { // If the number of rows in the main area is 6, a new row is generated above and below the four rows in the display area for (var i = 0; i < 4; i++) { // Traverse each div in the last row
                
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // If there is one that contains the game over that has not been clicked alert('Game over, score: ' + num);
                    clearInterval(timer);
                    flag = false; // You can't click again after the game ends}
            }
            
            main.removeChild(main.childNodes[len - 1]); // Remove each row after display}
    }, 20)
    bindEvent(); // click event}

// Click the start button to start moving and creating each row of elements function clickStart() {
    go.addEventListener('click', function () {
        go.style.display = 'none';
        move();
    });
}
clickStart();