Native JS implements the don't step on white block game (2)-HTML Knowledge-php.cn

Native JS implements the don't step on white block game (2)

藏色散人

Release： 2021-01-11 11:06:34

Original

7054 people have browsed it

We have briefly shared and introduced the method of implementing the Don’t Step on White Blocks mini game with native JS in the previous article. So some friends may not be clear about the specific implementation ideas of this game.

Native JS implements the don't step on white block game (2)

Now we will give you a step-by-step detailed introduction to the specific implementation method based on the source code of the Don’t Step on White Blocks game.

Source code reference: "Native JS implementation of the don’t step on white block game (1)"

First of all, let’s take you to understand the in the game source code The overall framework structure of HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>别踩白块小游戏</title>
</head>
<style...>
<body>
<div class="box">
    <div id="cont">
        <div id="go">
            <span>点击开始</span>
        </div>
        <div id="main"></div>

    </div>
    <div id="count"></div>
</div>
</body>
<script...>
</html>

Copy after login

In the above code, a large div (box) is created in the body. This div contains two small divs (id is cont and id is count). The "cont" part contains The content of the game animation, the "count" part is used to display the game count.

The "count" part looks like this:

Native JS implements the dont step on white block game (2)

Then in cont, there are two more divs (id is go and main).

Native JS implements the dont step on white block game (2)

##The game content area is actually in the div with the id of main. When we click to start the game, the entire content area is moved, not a single row.

From the above picture we can find that the "go" and "main" areas are the same size. Here we will initialize main so that "go" and "main" exist at the same time, that is, add a top attribute to main. By changing the top attribute, the effect of the entire game area falling continuously is achieved.

Native JS implements the dont step on white block game (2)

Then the simultaneous setting of "go" and "main" is also to determine the success or failure of the game (whether the white block is clicked).

Native JS implements the dont step on white block game (2)

Due to length reasons, this article will first introduce you to the HTML code part of the Don’t Step on White Blocks game, which is also very easy to understand. So in later articles, we will continue to analyze the specific code of the Don’t Step on White Blocks game for everyone.

The above is the detailed content of Native JS implements the don't step on white block game (2). For more information, please follow other related articles on the PHP Chinese website!