js实现别踩白块小游戏

最新推荐文章于 2021-06-22 14:19:25 发布

原创最新推荐文章于 2021-06-22 14:19:25 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

案例专栏收录该内容

9 篇文章

订阅专栏

存在问题：隔行也可以点击
解决方法：添加一个递归函数。


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .box{
            width: 400px;
            height: 512px;
            background-color: #fff;
            margin: 40px auto;
            position: relative;
            overflow: hidden;
        }
        .begin{
            width: 400px;
            height: 520px;
            color: black;
            position: absolute;
            z-index: 6666;
            font-size: 52px;
            text-align: center;
            background-color: rgba(0,0,0,.3);
            cursor: pointer;
        }
        .begin span{
            line-height: 520px;
            cursor: pointer;
        }
        .scroll{
            width: 400px;
            height: 130px;
            position: absolute;
            top: -130px;
        }
        .scroll>div{
            width: 400px;
        }
        .scroll>div>div{
            float: left;
            width: 99.5px;
            height: 128px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="scroll">
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>

        </div>
    </div>
    <div class="begin">
        <span>开始游戏</span>
    </div>
</div>
<script>
    //获取标签
    var box=document.querySelector(".box");
    var begin=document.querySelector(".begin");
    var scroll=document.querySelector(".scroll");
    var time=null;
    var num=[];
    //绑定事件
    begin.onclick=function(){
        this.style.display='none';
        box.style.border='1px solid black';
        box.style.backgroundColor='white';

        scroll.innerHTML="";
        beginGame();
    }
    //开始游戏
    function beginGame(num){
        //速度
        var speed=5;
        //得分
        var score=0;
        //设置定时器
        time=setInterval(function(){
            //向下滚动
            scroll.style.top=scroll.offsetTop+speed+"px";
            //滚动第一行创建新行
            if(scroll.offsetTop>=0){
                createNewRow();
                scroll.style.top='-130px';
            }
            //绑定事件target
            scroll.onclick=function(event){
                var target=event.target;
                if(target.className=="tag"){
                    target.style.backgroundColor="white";
                    target.className='';
                    score++;
                }
                else{
                    scroll.style.top=0;
                    begin.innerHTML='得分:'+score;
                    begin.style.color="red";
                    begin.style.paddingTop="150px";
                    clearInterval(time);
                    begin.style.display="block";
                }
                //加速
                if(score%30==0){
                    speed++;
                }
            }
            //删除第一行
            if(scroll.children.length==6) {
                for (var i = 0; i < 4; i++) {
                    if (scroll.children[scroll.children.length-1].children[i].className=="tag") {
                        scroll.style.top = "-130px";
                        begin.innerHTML = '得分：' + score;
                        begin.style.color="red";
                        begin.style.paddingTop="150px";
                        clearInterval(time);
                        begin.style.display = "block";

                    }
                }
                scroll.removeChild(scroll.children[scroll.children.length-1]);
            }
        },18)
    }
    //产生新行
    function createNewRow(){
        var row=document.createElement('div');
        scroll.appendChild(row);
        var index=randomNum(0,3);
        for(var i=0;i<4;i++){
            var li=document.createElement('div');
            row.appendChild(li);
        }
        if(scroll.children.length==0){
            scroll.appendChild(row);
        }
        else{
            scroll.insertBefore(row,scroll.children[0]);
        }
        row.children[index].style.backgroundColor="black";
        row.children[index].className="tag";
    }
    //产生随机函数
    function randomNum(m,n){
        return parseInt(Math.random()*(n-m+1))+m;
    }

</script>
</body>
</html>