js版别踩白块

作者: 李佳明先生 | 来源:发表于2018-02-08 14:20 被阅读157次

js版别踩白块
别踩白块滑稽版
iOS小项目之第二弹- 别踩白块
别踩白块
别踩白块
功夫版的别踩白块儿，你要试试吗？#iOS #Andriod
Vue.js 实现别踩白块游戏
音乐、娱乐两不误！敲好玩的钢琴游戏《钢琴块2》攻略
利用JS实现别踩白块，神级辅助！
Android自制游戏(别踩白块)

先上效果图

具体实现思路是：首先在每一行白块中渲染一个黑块，这个应该是随机的，用Math.random()函数，然后当用户点中一个黑块时，将黑块所在的那一列用jquery的slideDown先隐藏，后删除。并且每当用户正确点到一个黑块时，在append一列白块。
附代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="operate">
    <span class="score">分数:0</span>
    <ul id="ul">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</div>
<div class="hidden">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</div>
</body>
<script>
    var num=0;
    $.each($('#ul>li'),function (index,el) {
//        console.log(el);
        console.log($(el).find('li'));
        $.each($(el).find('li'),function (index2,el2) {
            if(Math.random()>0.5){
                $(el2).addClass('black')
                return false;
            }
            if(index2===3){
                $(el2).addClass('black')
            }
        })
    })
    var temp=$('.hidden').children()
    var flag=true;
    $('#ul').on('click','li li',function () {
        if($(this).hasClass('black')){
            console.log($(this).parents('li').index());
            //检查是否忽略了黑格子
            for(var i=$(this).parents('li').index()+1;i<$('#ul>li').length;i++){
                $.each($('#ul>li').eq(i).find('li'),function (index3,el3) {
                    if($(el3).hasClass('black')){
                        flag=false;
                        alert('lost')
                    }

                })
            }
            if(flag){
                $(this).removeClass('black').addClass('finshed')
                //排他
                $.each($('.hidden li li'),function (index,el) {
                    $(el).removeClass('finshed black')
                })
                //由下往上推出新的格子
                $.each($('.hidden li li'),function (index,el) {
                    if(Math.random()>0.5){
                        $(el).addClass('black')
                        return false;
                    }
                    if(index===3){
                        $(el).addClass('black')
                    }
                })
                //收起第一个格子
                $('#ul>li').eq($('#ul>li').length-1).slideDown(300,function () {
                    $('#ul>li').eq($('#ul>li').length-1).remove()
                })
                num++;
                //最新的格子添加到容器里
                $('#ul').prepend($('.hidden').html())
                $('.score').text('分数:'+num*100)
            }
        }else{
            flag=false;
            alert('lost')
        }
    })
</script>
</html>

sass

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.operate{
  max-width: 720px;
  min-width: 320px;
  width: 100%;
  margin: 0 auto;
}
li{
  list-style: none;
}
.score{
  position: absolute;
  left: 2%;
  top: 2%;
  font-size: 30px;
  color: green;
}
.operate{
  >ul{
    height: 100vh;
    overflow-y: auto;
    >li{
      width: 100%;
      >ul{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        >li{
          width: 25%;
          height: 25vh;
          background-color: #fff;
          border-top:1px solid #333;
          border-bottom:1px solid #333;
          border-right: 1px solid #333;
        }
        li:last-child{
          border-right: none;
        }
        .black{
          background-color: #000000;
        }
        .finshed{
          background-color: #cccccc;
        }
      }
    }
  }
}

最后附上demo的体验地址，点击查看

demo下载地址