Background introduction

Don't step on the whiteboard. I believe everyone has played this game. This is a simple game based on HTML5. It can run on both PC and mobile terminals and adapt to a variety of platforms. Today, we use native JS and JQuery to build this game -- don't step on the whiteboard.

1, Train of thought analysis

The overall page is a large rectangle with a length width ratio of about 3:2. Then the game starts, and white boards continue to land. Then there are four boards in a row, one black board, and the other three white boards. They are bound through the click event of the board, and then determine what color it is. If it is white, the game is over, otherwise the player's points are added by 1;

2, Page construction

2.1 HTML layer

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

2.2 CSS layer

Understand the general structure before style setting, as shown below:

Global style

*{
    margin:0;
    padding:0;
}

wrapper style setting style

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

The setting style of go under wrapper

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

Start game button style

#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 sets the style

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

Style each line of squares created

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

Style the four small squares in a row

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

After setting the style, the general interface is as follows:

We can see that the interface style is relatively simple. Our idea is that the box will automatically land after clicking the Start Game button, so the screen is relatively empty (temporarily).

2.3 JS layer

js layer is mainly used to control the page to produce dynamic effects, such as generating blocks, moving blocks, etc;

2.3.1 getting elements

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

The array of colors stored here does not need white. Each initialized box does not set the background color. It defaults to white;

2.3.1 create div elements for each row

As we said earlier, there are four squares in a row, with the same proportion as the large squares (3:2). Its length and width are: {width: 100px; height: 150px};

function cDiv() {
    var oDiv = document.createElement('div');// Get a random number, find a random div for each row, and set the color
    var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // Set row class name
    for (var j = 0; j < 4; j++) { // The for loop generates four div's in a row
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); // Insert each small div into each row
    }
    
    if (main.childNodes.length == 0) { // Inserts 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 an element, insert the newly generated row to the front of the existing row number
    } 
    var clickDiv = main.childNodes[0].childNodes[index]; // Set the div with color in a row according to the random number
    clickDiv.setAttribute('class', 'i'); // Set this element to the class name as the tag to click
    clickDiv.style.backgroundColor = colors[index]; // Also set the upper background color
}

2.3.2 click event function encapsulation

function bindEvent() {
    main.addEventListener('click', function (event) { // Add click event to main
        if (flag) {  // Judge whether it can be clicked according to the flag value
            var tar = event.target;  // Get the source event of the click
            if (tar.className == 'i') { // Judge whether the clicked block is colored 
                tar.style.backgroundColor = '#bbb '; / / change the background color 
                tar.classList.remove('i'); // Remove class name               
                num++;   // Count++
            } else {                
                alert('End of game, score:' + num); // If you point to the white block, the game is over
                clearInterval(timer);
                flag = false;
            }            
            if (num % 10 == 0) { // If the current score is a multiple speed of 10++
                speed++;
            }
        }
    })
}

2.3.4 block movement function encapsulation

function move() {
    clearInterval(timer); 
    timer = setInterval(function () { // set 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 is moved to the visible area, a new line of elements is created
            cDiv();
            main.style.top = '-150px'; // At the same time, move the main area above the visual area
        }
        var len = main.childNodes.length; // Gets the number of rows in the mian area
        if (len == 6) {  // If the number of rows in the main area is 6, a new row will be generated above the four rows in the display area and a row below
            
            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 one of them contains a game that has not been clicked, it ends
                    alert('End of game, score:' + num);
                    clearInterval(timer);
                    flag = false; // You can't continue clicking after the game
                }
            }
            
            main.removeChild(main.childNodes[len - 1]); // Remove each line after presentation
        }
    }, 20)
    bindEvent(); // Click event
}

The first sentence in the function is clearInterval(timer); prevent the timer from opening more;

2.3.5 game start

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

The general effect is shown in the figure:

This is the interface of the built-in browser in HbuilderX. The end effect of the game is shown in the figure above;

3, Summary

In this article, we use the native js to create a simple touch-screen game - don't step on the whiteboard. There are simple changes to the game. Generally speaking, first we need to set the general structure and style of the game interface, and then control the generation, movement and click of the box through the native js, so as to finally present an appropriate and complete interface effect; interested partners can try it