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

d3133f8a-dbd5-4013-a4f0-679ccede23b7.png

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

一.了解游戏规则

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

image
image

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

游戏规则:

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

二.一步一步来实现

(一)搭建好骨架——HTML


    //在最外层的盒子
    
//上层游戏区域
点击开始
//显示得分的区域

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

  • 首先是最外层的包裹区——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');
})()

2.添加动态创建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样式声明对象。

4.全部的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块运动起来。

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


更多源代码:

Hacker233/JavaScript​github.com

图标

你可能感兴趣的:(原生js一步一步实现《别踩白块儿》小游戏)