别踩白块（js）

最新推荐文章于 2022-07-06 17:10:39 发布

小新大人y

最新推荐文章于 2022-07-06 17:10:39 发布

阅读量335

点赞数

分类专栏： js 文章标签：别踩白块代码及思路js 别踩白块别踩白块代码别踩白块思路别踩白块代码及解析

本文链接：https://blog.csdn.net/qq_44885374/article/details/91961097

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .block{
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .parchild{
            flex: 1;
            display: flex;
            flex-direction: row;
        }
        .child{
            flex: 1;
            box-sizing: border-box;
            border: 1px solid black;
            color: white;
            text-align: center;
        }
        .score{
            position: absolute;
            z-index: 99;
            width: 100%;
            height: 25px;
            line-height: 25px;
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="score">score:<span class="scoretext">0</span></div>
<audio id="music" src=""></audio>
<div class="block"></div>
<script>
    var white={
        H:5,
        l:5,
        arraylist:[],
        blacklist:[],
        isstart:false,
        score:0,
        time:1600,
        oldtime:new  Date().getTime(),
        block:document.getElementsByClassName("block")[0],
        audioo:document.querySelector("#music"),
        scoretext:document.querySelector(".scoretext"),
        music:["1.mp3","2.mp3","3.mp3","4.mp3","5.mp3","6.mp3","7.mp3"],
        clithight:document.documentElement.clientHeight,
        whiteblock:function(){
            for(var i=0;i<this.H;i++){
                var r=this.randomnum();
                this.arraylist.push([]);
                for(var j=0;j<this.l;j++){
                    var child=document.createElement("div");
                    child.style.lineHeight=this.clithight/this.H+"px";
                    child.className="child";
                    if(j==r&&i<4){
                        child.style.background="black";
                        this.blacklist.unshift(child);
                    }
                    else{
                        child.style.background="white";
                    }
                    this.arraylist[i].push(child);
                }
            }
           // console.log(this.arraylist);
        },
        showele:function(){

            var that=this;
            that.block.innerHTML="";
            that.arraylist.forEach(function(val,index){
                var parchild=document.createElement("div");
                parchild.className="parchild";
                val.forEach(function(vall,indexx){
                    parchild.appendChild(vall);
                });
                that.block.appendChild(parchild);
            });

        },
        randomnum:function(){
            return Math.floor(Math.random()*this.l);
        },
        click:function(){
            var that=this;
            //console.log(that.blacklist);
            if(!that.isstart){
                that.blacklist[0].innerHTML="开始";
            }


            if(!that.blacklist.length)return;
                that.blacklist[0].onclick=function(){
                    that.isstart=true;
                    if(this.style.backgroundColor=="black"){

                        that.score++;
                        that.scoretext.innerHTML=that.score;
                        that.audioo.src="./mp3/" + that.music[Math.floor(Math.random() * that.music.length)];
                       that.audioo.play();
                        that.time-=10;
                        if(that.time<=100){
                            that.time=100;
                        }
                    }
                    this.style.background="white";
                    that.blacklist.shift();
                    //console.log(that.blacklist);
                    that.click();
                };
        },
        anmite:function(){
            for(var i=this.arraylist.length-1;i>0;i--){
                this.arraylist[i]=this.arraylist[i-1];
            }

            white.randonfirstH();
            this.showele();
        },
        randonfirstH:function(){
            var that=this;
            this.arraylist[0]=[];
            var r=that.randomnum();
            for(var i=0;i<that.l;i++){
                var child=document.createElement("div");
                child.className="child";
                child.style.lineHeight=that.clithight/that.H+"px";
                that.arraylist[0].unshift(child);
                if(i==r){
                    child.style.background="black";
                    that.blacklist.push(child);
                }
                else{
                    child.style.background="white";
                }
            }
        },
        lastblack:function(){
            for(var i=0;i<this.arraylist[4].length;i++){
                if(this.arraylist[4][i].style.backgroundColor=="black"){
                    this.isstart=false;
                }
            }
        },
        clickwhiteblock:function(){
            var that=this;
          for(var i=0;i<that.H;i++){
              for(var j=0;j<that.l;j++){
                  if(that.arraylist[i][j].style.backgroundColor=="white"){
                      that.arraylist[i][j].onclick=function(){
                          this.style.background="red";
                          that.audioo.src="./mp3/mm.mp3";
                          that.audioo.play();
                          that.isstart=false;
                      }
                  }
              }
          }
        },
        gamestart:function(){
            //console.log(white.isstart)
            if(white.isstart){
            var newtime=new Date().getTime();
            if(newtime-white.oldtime>=white.time){
                white.anmite();
                white.lastblack();
                white.clickwhiteblock();
                //console.log(1);
                white.oldtime=newtime;
                newtime = null;
            }
            }
            window.requestAnimationFrame(white.gamestart);

        }
    };
    white.whiteblock();
    white.showele();
    white.click();
    white.gamestart();
</script>
</body>
</html>

思路：用枚举写：第一步（画页面）：在页面上画一个div（block），写一个方法建一个二维数组在二维数组里造5个div(child)（因为我写的是5列），写一个取随机值的方法，随机每行的某一列，让这个divbackground=“black；再写一个方法，每行造一个div（parchild），将二维数组中的列div加到每行去，最后将行div（parchild）加到block中，对parchild和child和block写样式，这样页面就画好了，画页面的时候特别注意：如果用弹性布局，写样式时一定要写html，body{width:100%,height:100%}!
第二步（对页面元素进行操作）：建一个空的数组，用来存放所有的黑块（这里要注意黑块存放的顺序，页面最下面的黑块存数组第0号索引，以此类推，这里用到的是往前追加unshift）；写一个点击黑块数组的第0号索引的方法，点击让它的background=“white”，并且删除这个黑块，也就是第0号索引，再写一个让块整体下落的方法，数组里面的对象传递，从下往上，让下面倒数第二行传递给倒数第一行，往上以此类推，，写一个让第0行重新产生块，并随机产生一个黑块。让块一直下落加一个计时器方法，然后调用块整体下落的方法就好了。
第三步（游戏开始）：声明一个变量isstart给它赋值为false，游戏开始isstart赋值为true；游戏结束赋值为false，在点击黑块事件中加当游戏还未开始时给黑块数组第0号索引快上显示”开始",当点击了这个黑块后把显示”开始“去掉，调用块整体下落的方法，这样游戏就开始了
第三步（点白块游戏结束和黑块没点到下落到最后一行时游戏结束）：写一个检测页面最后一行是否有某一个块的background=“black”；如果有就给isstart赋值为false；写一个点到白色块让那个白色块变红并且游戏结束的方法，遍历二维数组，如果每一行每一个块的background=“white”；给它添加点击事件，让它的background=“red”并且isstart=“false”；
第四步（点黑块加分，随着分数的上升块下降的越来越快）：画一个显示分数的div，声明一个变量score=0；点击黑块事件中让每点一次score++（分数+1）当然你也可以加10加100等；然后将值显示在界面上，计时器的第二个参数写成一个变量，声明称这个变量time=1600，每点一次让time-=10
当time到一定的值如100时，让延迟时间一支等于100
第五步（加音乐）：写一个标签< audio id=“music” src="">< /audio>将点黑块的音乐名字放在一个数组music中，在点击黑块事件中，让这个audio的src随机数组的某一个索引；加一个属性play();
音乐就执行了；点白块添加音乐同上，只是src不同而已

小新大人y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
别踩白块（js）

<!DOCTYPE html><html><head lang="en"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0,user-scalable=no">...
复制链接

扫一扫

专栏目录