JavaScript，jQuery合作，实现《别踩白块》

还记得是笔者上大学的时候，挺流行的一款单击游戏《别踩白块儿》，不知道你有没有玩过，突来兴致，就觉得尝试着自己写一个，因为笔者初学，总感觉思路上有一些缺陷，拿出来大家讨论，高手们可以告诉我如果修改，能做的更完美。谢过~

思路
1.在界面外搭建两个与游戏界面相同的游戏场景，然后不停切换
2.当界面在屏幕之外时，变换黑块的位置
3.当点击黑块的时候，随机播放音符
4.当点击白块时，结束游戏

搭建页面

<div id="score">您的得分是<span></span></div>
<div id="interFace">
    <div id="loop1">
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
    </div>
    <div id="loop2">
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
        <ul class="btn">
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
            <li><audio></audio></li>
        </ul>
    </div>
</div>

css样式

    <style type="text/css">
        .btn{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .btn:after{
            content: "";
            clear: both;
            display: block;
        }
        .btn li{
            width: 78px;
            height: 98px;
            /*background-color: red;*/
            float: left;
            border: 1px solid #ccc;
        }
        #interFace{
            height: 500px;
            width: 320px;
            background-color: #ffffff;
            margin: 0px auto;
            position: relative;
            overflow: hidden;
            border: 3px solid pink;
        }
        #loop1{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #loop2{
            position: absolute;
            top: -500px;
            left: 0px;
        }
        #score{
            height: 50px;
            width: 150px;
            background-color: skyblue;
            margin-left: auto;
            margin-right: auto;
        }
        #score span{
            font-weight: bold;
            font-size: 30px;
            color: red;
        }
    </style>

准备工作
获取我们需要的DOM节点

var loop1 = document.querySelector("#loop1");//背景1
var loop2 = document.querySelector("#loop2");//背景2
var jsLi = document.querySelectorAll("li");//js节点页面中所有li
var lis = $("li");//jq节点
var uls1 = $("#loop1 .btn");
var uls2 = $("#loop2 .btn");
//将音乐文件编入数组
var musicArr = ["1.ogg","2.ogg","3.ogg","4.ogg","5.ogg","6.ogg","7.ogg","8.ogg","9.ogg"]

设计游戏

在界面外搭建两个与游戏界面相同的游戏场景，然后不停切换，设置定时器，让我们的页面动起来。
为了方便大家观看，把loop1的背景设置成红色，loop2的背景设置成蓝色

alert("开始游戏");
    // 让loop动起来
    var date = new Date().getTime();
    var timer = setInterval(func,5);
    function func(){    
        loop1.style.top = loop1.offsetTop+1+"px";
        loop2.style.top = loop2.offsetTop+1+"px";
        if(loop2.offsetTop >= 500){
            loop2.style.top = "-500px";
        }else{
            if(loop1.offsetTop >= 500){
                loop1.style.top = "-500px";
            }
        }
    }

效果如下

当界面在屏幕之外时，随机变换黑块的位置，具体请看注释

//默认给初始化的背景排序。
    random(uls1);
    random(uls2);
    //检测背景loop的位置，当背景的位置在窗口以外的时候，随机改变黑块的位置；
    var timer1 = setInterval(sport,1);
    function sport(){
        if (loop2.offsetTop == -500) {
            random(uls2);
        }
        if(loop1.offsetTop == -500){
            random(uls1);
        }
    }
    //随机生成黑块位置的图片
    function random(obj){
        for(var j = 0; j<obj.length; j++){
            //生成一个随机数，用来随机li
            var num1 = parseInt(Math.random() * (4 - 0) + 0);
            //当前进入页面的li全部变成白色
            obj.eq(j).find("li").css("background-color","#ffffff");
            //每行随机一个li变成黑色
            obj.eq(j).find("li").eq(num1).css("background-color","#000000");
        }   
    }

给页面中所有的li添加点击事件，当我们点击的时候，先判断我们点击的小方块的颜色
如果是黑色，那么随机音乐音符播放。积分加1；
如果点击的白色，那么清楚定时器，游戏结束

// 找的得分的DOM节点
    var score = document.querySelector("#score span");
    // 计算得分的变量
    var number = 0;

    //当点击页面中的小方块时，页面颜色变化，并且随机出现音乐
    $("li").on("click",function(){
        //当点击的时候，检测我们点击的小方块的颜色
        //如果是黑色，那么随机出现音乐
        //如果是白色，清除定时器，那么结束游戏
        if ($(this).css("backgroundColor")=="rgb(0, 0, 0)") {
            $(this).find("audio").src="";
            // 随机取出音符
            var num2 = parseInt(Math.random() * (9 - 0) + 0);
            //创建一个audio标签，并随机取出音符
            var music = $(this).find("audio");
            music[0].src = "music/"+musicArr[num2];
            //黑块改变背景颜色
            this.style.backgroundColor="pink";
            //播放音乐
            music[0].play();
            //得分++;
            number++;
            //得分放入积分器中
            score.innerHTML = number;
        }else if(this.style.backgroundColor=="rgb(255, 255, 255)"){
            this.style.backgroundColor="red";
            clearInterval(timer);
            alert("游戏失败");
            window.location.reload();
        }else{
            console.log("程序出错");
        }
    })
})

**因为这里获取节点的时候如果单用js会有点麻烦，笔者偷个懒，用了jQuery **

_。

先写到这，总觉得思路和流程上会有问题，还有幸看到这篇文章的高手们指点一二，小女子这厢给您行礼咯~

喜欢就点赞咯~