search

Home  >  Article  >  Daily Programming  >  Native JS implements the don’t step on white block game (1)

Native JS implements the don’t step on white block game (1)

藏色散人
藏色散人Original
2018-12-25 11:58:028913browse

For front-end developers, developing a small game to pass the time in their spare time is also a test of their basic skills. So don’t step on the white block game, I believe everyone is familiar with it. We can implement this game through native js, and even front-end beginners can easily complete it.

Native JS implements the don’t step on white block game (1)

Now we will share with you a native js method to implement the don’t step on the white block game.

The code example is as follows: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
 * {
        margin: 0;
 padding: 0;
 }

    .box {
        margin: 50px auto 0 auto;
 width: 400px;
 height: auto;
 border: solid 1px #222;
 }

    #cont {
        width: 400px;
 height: 600px;
 position: relative;
 overflow: hidden;
 }

    #go {
        width: 100%;
 height: 600px;
 position: absolute;
 top: 0;
 font: 700 60px &#39;微软雅黑&#39;;
 text-align: center;
 z-index: 99;
 }

    #go span {
        cursor: pointer;
 background-color: #fff;
 border-bottom: solid 1px #222;
 }

    #main {
        width: 400px;
 height: 600px;
 position: relative;
 top: -150px;
 }

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

    .row div {
        width: 99px;
 height: 149px;
 border: solid 1px #222;
 float: left;
 border-top-width: 0;
 border-left-width: 0;
 cursor: pointer;
 }
    #count {
        border-top: solid 1px #222;
 width: 400px;
 height: 50px;
 font: 700 36px/50px &#39;微软雅黑&#39;;
 text-align: center;
 }

</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>
 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;];

 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";
 }

    function move(obj) {
        //默认速度与计分
 var speed = 5, num = 0;
 obj.timer = setInterval(function () {
            //速度
 var step = parseInt(getComputedStyle(obj, null)[&#39;top&#39;]) + speed;
 obj.style.top = step + &#39;px&#39;
 if (parseInt(getComputedStyle(obj, null)[&#39;top&#39;]) >= 0) {
                CDiv(&#39;row&#39;);
 obj.style.top = -150 + &#39;px&#39;;
 }
            if (obj.children.length == 6) {
                for (var i = 0; i < 4; i++) {
                    if (obj.children[obj.children.length - 1].children[i].className == &#39;i&#39;) {
                        //游戏结束
 obj.style.top = &#39;-150px&#39;;
 count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;
 //关闭定时器
 clearInterval(obj.timer);
 //显示开始游戏
 go.children[0].innerHTML = &#39;游戏结束&#39;;
 go.style.display = "block";
 }
                }
                obj.removeChild(obj.children[obj.children.length - 1]);
 }
            //点击与计分
 obj.onmousedown = function (event) {
                //点击的不是白盒子
 // 兼容IE
 event = event || window.event;
 if ((event.target ? event.target : event.srcElement).className == &#39;i&#39;) {
                    //点击后的盒子颜色
 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
 //清除盒子标记
 (event.target ? event.target : event.srcElement).className = &#39;&#39;;
 //计分
 num++;
 //显示得分
 count.innerHTML = &#39;当前得分: &#39; + num;

 }
                else {
                    //游戏结束
 obj.style.top = 0;
 count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;
 //关闭定时器
 clearInterval(obj.timer);
 //显示开始游戏
 go.children[0].innerHTML = &#39;游戏结束&#39;;
 go.style.display = "block";
 }
                //盒子加速
 if (num % 10 == 0) {
                    speed++;
 }
            }
            //松开触发停止
 obj.onmouseup = function (event) {

            }

        }, 20)


    }
    go.children[0].onclick = function () {
        if (main.children.length) {
            //暴力清楚main里面所有盒子
 main.innerHTML = &#39;&#39;;
 }
        //清空计分
 count.innerHTML = &#39;游戏开始&#39;;
 //隐藏开始盒子
 this.parentNode.style.display = "none";
 move(main);
 }
</script>
</html>

The front desk effect is as follows:

Native JS implements the don’t step on white block game (1)

When we click start, the game starts. Click on the colored squares to score points, and as the score increases, the page squares move faster.

Native JS implements the don’t step on white block game (1)

When you click on the white block, the game ends.

Native JS implements the don’t step on white block game (1)

This article is about sharing and introducing the method of implementing the Don’t Step on White Blocks game in native js. Interested friends can directly copy the above code and test it locally. Then in the later articles, I will continue to introduce you to the specific implementation method of the Don’t Step on White Blocks game.

The above is the detailed content of Native JS implements the don’t step on white block game (1). 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
Previous article：How to get the mouse position coordinates with jQueryNext article：How to get the mouse position coordinates with jQuery

Related articles

See more