原生js一步一步实现《别踩白块儿》小游戏

作者: 天之蓝源69 | 来源:发表于2019-02-02 14:38 被阅读0次

d3133f8a-dbd5-4013-a4f0-679ccede23b7.png
前言：今天我们就一起来实现一个小游戏——《别踩白块儿》。这篇文章不管是新手老手都适合，新手可以利用这篇文章刚好练习一下刚学的知识，老手可以就此文章查漏补缺，看看自己是否与刚开始学的时候有进步。本游戏由简简单单一百多行js代码就实现了，只要跟着文章一步一步动手操作，我相信到最后一定会有所收获的。

一.了解游戏规则

既然我们的目的是要简单的实现这个游戏，那么我们就要先知道这个游戏是怎么玩的，没有玩过的小伙伴可以下下来玩一下，会上瘾的哦！先来简单看几张游戏截图：

image

看了这两张游戏截图应该就很容易知道这个游戏咋玩的了。

游戏规则：

《别踩白块儿 Don't Tap The White Tile》，这就是这个游戏的一个规则，我们只需要不断踩着黑色方块前进即可，很简单吧！

二.一步一步来实现

（一）搭建好骨架——HTML

<body>
    //在最外层的盒子
    <div class="box">
        //上层游戏区域
        <div id="cont">
            <div id="go">
                <span>点击开始</span>
            </div>
        </div>
        //显示得分的区域
        <div id="count"></div>
    </div>
</body>

这样看起来我们的页面结构是不是超级简单，简简单单的几个盒子就搞定了，我们来分析一些这个结构是咋回事：

首先是最外层的包裹区——box
然后里面分为了一个内容区和一个计数区——cont、count
我们可以看到cont区域里面有两个div，一个#go，一个#main，游戏内容区域实际上是在id为main的div中。当我们点击开始游戏时，移动的是整个内容区域，而并非单独一行。具体是怎样的后面详细解释。
内容区就是游戏的部分，计数区就是显示游戏分数的地方，我们可以参照一下游戏最后成果的截图：

image

（二）穿上华丽的外衣——CSS

* {
    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区域 */
#go {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;
    font: 700 60px '微软雅黑';
    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 '微软雅黑';
    text-align: center;
}

我们的CSS写得很简单，都是一些简单的样式，我们新增了一个类row，这是游戏区域里面也就是#main里面的每一行，高度我们设置的为600px，设置了四行，所以每一个row的高度我们设为的150px。

注意：我们在#cont里面设置了两个大小一样的div：#go和#main，并且给#main设置了一个top值-150px，向上移150px原因也很简单，因为要制造从上往下掉的效果，所以第一行最开始是看不见的，得慢慢移入可视区里面来，正是我们不断改变top值，从而产生下落的效果，那么#go和#main的同时设置，也是为了判断游戏进行地成功或失败（是否点击了白块）。

此时我们的效果大概是这样的：

image

（三）捏造它的灵魂——JavaScript

1.我们先来获取一下我们得DOM节点：

(function() {
    //获取内容区里面得#main和#go，以及获取计数区。
    var main = document.getElementById('main');
    var go = document.getElementById('go');
    var count = document.getElementById('count');
})()

２.添加动态创建div节点的方法：

仔细想一想，当我们点击开始游戏的时候，就有方块从上往下移动，这些方块是包含在#main元素里面的，而这些方块是冬天添加的，所以，点击开始我们就要创建div元素，所以我们再来写一个创建div的函数：

    //动态创建div
    function CDiv(classname) {
        //创建div节点，为一行
        var Div = document.createElement('div')
        //生成随机数，Math.floor()是四舍五入的作用，产生的数永远不会大于4，产生的随机数表示那个有颜色的那一个
        index = Math.floor(Math.random() * 4)
        //设置class
        Div.className = classname

        //在一行里面动态添加四个div，一行里面的四块
        for (var i = 0; i < 4; i++) {
            var iDiv = document.createElement('div')
            Div.appendChild(iDiv)
        }

        //判断#main里面是否有元素
        if (main.children.length == 0) {
            main.appendChild(Div);
        } else {
            //如果有元素，则在该元素之前插入
            main.insertBefore(Div, main.children[0]);
        }
        //随机的设置四个div块的背景颜色
        Div.children[index].style.backgroundColor = cols[index];
        Div.children[index].className = "i";
    }

解释：

random() 方法可返回介于 0 ~ 1 之间的一个随机数。该Math.random()函数返回0-1范围内的浮点伪随机数（包括0，但不包括1），在该范围内具有近似均匀的分布，然后你可以将其缩放到所需范围，它不能被用户选择或重置。
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

注意：这里动态创建的Div则表示游戏中的行，添加的iDiv则表示一行中的四个方块。最后通过产生随机数，给一行中的方块随机添加背景颜色并添加class为"i"。

3.添加移动效果的方法：

此段代码就是用于实现游戏区域移动的功能效果。这里我们定义了两个变量，速度speed和分数num，并设置初始值分别为5和0。然后又通过setInterval() 方法设置了一个定时器。在setInterval() 方法中，存在两个参数，第一个参数则是要执行的函数循环体，第二个参数则表示间隔多少毫秒来调用此函数（这里是20毫秒）。

在第一个参数的函数中，getComputedStyle(obj, null)['top']方法就是用来实现给main获取设置top属性。

    function move(obj) {
        //默认速度与计分
        var speed = 5, num = 0;
        //定义一个定时器
        obj.timer = setInterval(function () {
            //速度
            var step = parseInt(getComputedStyle(obj, null)['top']) + speed;
            obj.style.top = step + 'px'
            if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {
                CDiv('row');
                obj.style.top = -150 + 'px';
            }
            if (obj.children.length == 6) {
                for (var i = 0; i < 4; i++) {
                    if (obj.children[obj.children.length - 1].children[i].className == 'i') {
                        //游戏结束
                        obj.style.top = '-150px';
                        count.innerHTML = '游戏结束,最高得分: ' + num;
                        //关闭定时器
                        clearInterval(obj.timer);
                        //显示开始游戏
                        go.children[0].innerHTML = '游戏结束';
                        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 == 'i') {
                    //点击后的盒子颜色
                    (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
                    //清除盒子标记
                    (event.target ? event.target : event.srcElement).className = '';
                    //计分
                    num++;
                    //显示得分
                    count.innerHTML = '当前得分: ' + num;
                }
                else {
                    //游戏结束
                    obj.style.top = 0;
                    count.innerHTML = '游戏结束,最高得分: ' + num;
                    //关闭定时器
                    clearInterval(obj.timer);
                    //显示开始游戏
                    go.children[0].innerHTML = '游戏结束';
                    go.style.display = "block";
                }
                //盒子加速
                if (num % 10 == 0) {
                    speed++;
                }
            }
            //松开触发停止
            obj.onmouseup = function (event) {
            }
        }, 20)
    }

解释：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
getComputedStyle()方法返回的是一个CSS样式声明对象。

４.全部的js代码：

window.onload =function(){
    //获取内容区里面得#main和#go，以及获取计数区。
    var main = document.getElementById('main');
    var go = document.getElementById('go');
    var count = document.getElementById('count');
    //设置四种颜色
    cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];
    //动态创建div
    function CDiv(classname) {
        //创建div节点，为一行
        var Div = document.createElement('div')
        //生成随机数，Math.floor()是四舍五入的作用，产生的数永远不会大于4，产生的随机数表示那个有颜色的那一个
        index = Math.floor(Math.random() * 4)
        //设置class
        Div.className = classname

        //在一行里面动态添加四个div，一行里面的四块
        for (var i = 0; i < 4; i++) {
            var iDiv = document.createElement('div')
            Div.appendChild(iDiv)
        }

        //判断#main里面是否有元素
        if (main.children.length == 0) {
            main.appendChild(Div);
        } else {
            //如果有元素，则在该元素之前插入
            main.insertBefore(Div, main.children[0]);
        }
        //随机的设置四个div块的背景颜色
        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)['top']) + speed;
            obj.style.top = step + 'px'
            if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {
                CDiv('row');
                obj.style.top = -150 + 'px';
            }
            if (obj.children.length == 6) {
                for (var i = 0; i < 4; i++) {
                    if (obj.children[obj.children.length - 1].children[i].className == 'i') {
                        //游戏结束
                        obj.style.top = '-150px';
                        count.innerHTML = '游戏结束,最高得分: ' + num;
                        //关闭定时器
                        clearInterval(obj.timer);
                        //显示开始游戏
                        go.children[0].innerHTML = '游戏结束';
                        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 == 'i') {
                    //点击后的盒子颜色
                    (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
                    //清除盒子标记
                    (event.target ? event.target : event.srcElement).className = '';
                    //计分
                    num++;
                    //显示得分
                    count.innerHTML = '当前得分: ' + num;
                }
                else {
                    //游戏结束
                    obj.style.top = 0;
                    count.innerHTML = '游戏结束,最高得分: ' + num;
                    //关闭定时器
                    clearInterval(obj.timer);
                    //显示开始游戏
                    go.children[0].innerHTML = '游戏结束';
                    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 = '';
        }
        //清空计分
        count.innerHTML = '游戏开始';
        //隐藏开始盒子
        this.parentNode.style.display = "none";
        move(main);
    }
}

总结：

通过网上搜寻以及个人的理解和总结，也对整个代码有了更加深入的理解，下面我们就来理一理整个实现思路：

首先创建了一个外层盒子#box，然后在里面创建了上下两个盒子#cont和#count，然后在#cont里面创建了两个相同的盒子#go和#main。
我们已进入程序首先是赋予了#go一个点击事件，用来清除#main里面的所有元素，然后启动move()方法。
我们通过move()方法调用CDiv方法，以此来动态创建块，然后通过定时器来让里面的小的div块运动起来。

更详细的解释可以看代码里面的注释

原生js一步一步实现《别踩白块儿》小游戏

一.了解游戏规则

二.一步一步来实现

总结：

更多源代码：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我是前端切图仔