search
HomeDaily ProgrammingHTML KnowledgeNative JS implements the don't step on white block game (4)


The overall idea of ​​implementing the Don’t Step on White Blocks game using native JS has been briefly introduced to you in the previous article. You can refer to: "Native JS Implementation of the Don't Step on White Blocks Game (3)"

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

Let's continue to combine the js code part of the source code. I will introduce its js methods to you one by one.

Part of the js code is as follows:

<script>
    var main = document.getElementById(&#39;main&#39;)
    go = document.getElementById(&#39;go&#39;)
    count = document.getElementById(&#39;count&#39;);
//设置四种颜色
    cols = [&#39;#1AAB8A&#39;, &#39;#E15650&#39;, &#39;#121B39&#39;, &#39;#80A84E&#39;];
//动态创建div
    function CDiv(classname) {
        var Div = document.createElement(&#39;div&#39;)
        //生成随机数
        index = Math.floor(Math.random() * 4)
        Div.className = classname
        for (var i = 0; i < 4; i++) {
            var iDiv = document.createElement(&#39;div&#39;)
            Div.appendChild(iDiv)
        }
        if (main.children.length == 0) {
            main.appendChild(Div);
        } else {
            main.insertBefore(Div, main.children[0]);
        }

        Div.children[index].style.backgroundColor = cols[index];
        Div.children[index].className = "i";
    }
</script>

In this code, the CDiv method is used to dynamically create divs. In this method, we define a variable Div and index.

createElement() Method creates an element by specifying a name. (Note: All major browsers support the createElement() method)

floor() method Returns the largest integer less than or equal to x [here: Math.random() * 4]. If the passed parameter is an integer, the value is unchanged.

random() method can return a random number between 0 ~ 1. The Math.random() function returns a floating point pseudo-random number in the range 0-1 (including 0, but excluding 1) with an approximately uniform distribution in that range, which you can then scale to the desired range, It cannot be selected or reset by the user.

The random value index generated here represents the colored squares that appear randomly in a row in the Don’t Step on White Blocks mini-game.

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

Div.className means setting or returning the value of class, which is the classname parameter passed in the CDiv method.

Due to space issues, the js method will be introduced here first. In later articles, we will continue to introduce the implementation methods of the remaining js parts.


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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool