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

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

别踩白块.jpg

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

搭建页面

您的得分是

    

        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
    
    

        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
        

            

            

            

            

        
    

css样式

准备工作
获取我们需要的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";
            }
        }
    }

效果如下

GIF.gif

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

//默认给初始化的背景排序。
    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

GIF.gif

给页面中所有的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("程序出错");
        }
    })
})

GIF.gif

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

_。

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

喜欢就点赞咯~