js别踩白块儿小游戏

最新推荐文章于 2022-08-12 19:14:03 发布

杨家八公子

最新推荐文章于 2022-08-12 19:14:03 发布

阅读量553

点赞数

分类专栏： js css css3

本文链接：https://blog.csdn.net/jerryyang_2017/article/details/80564445

版权

js 同时被 3 个专栏收录

47 篇文章 3 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">Game Start</a>
        </div>
        <div id="main"></div>
    </div>
    <script src="jquery.js"></script>
    <script src="demo.js"></script>
</body>
</html>

css样式代码

*{
    margin:0;
    padding:0;
}
.wrapper{
    margin:150px auto;
    width:400px;
    height:600px;
    border:1px solid #222;
    position: relative;
    /* overflow: hidden; */
}
#go{
    width:100%;
    position: absolute;
    top:0;
    text-align: center;
    z-index:99;
}

#go a{
    display:block;
    height:100px;
    width:400px;
    color:cyan;
    background-color: #fff;
    text-decoration: none;
    border-bottom:3px dashed #eee;
    font-size:60px;
    font-weight:300;
}
#main{
    width:400px;
    height:600px;
    position: relative;
    top:-150px;
    border:1px solid black;
}
.row{
    width:400px;
    height:150px;
}
.row div{
    width:99px;
    height:149px;
    border-left:1px solid #222;
    border-bottom:1px solid #222;
    float: left;
    cursor: pointer;
}

js代码

var main = $('#main'),
    go = $('#go'),
    speed = 5,
    num = 0,
    timer,
    flag = true,
    colors = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];

function cDiv() {
    var oDiv = $('<div></div>');
    var index = Math.floor(Math.random() * 4);
    oDiv.attr('class', 'row');
    for (var j = 0; j < 4; j++) {
        var iDiv = $('<div></div>');
        oDiv.append(iDiv);
    }
    if (main.children().length == 0) {
        main.append(oDiv);
    } else {
        oDiv.insertBefore(main.children()[0]);
    }
    var clickDiv = oDiv.children()[index];
    $(clickDiv).css('backgroundColor', colors[index]);
    $(clickDiv).attr('class', 'i')
}

function move() {
    clearInterval(timer);
    timer = setInterval(function () {
        var step = parseInt(main.css('top')) + speed;
        main.css('top', step + 'px');
        if (parseInt(main.css('top')) >= 0) {
            cDiv();
            main.css({
                'top': '-150px'
            })
        }
        var len = main.children().length;
        if (len == 6) {
            for (var i = 0; i < len; i++) {
                if ($(main.children()[len - 1].children[i]).hasClass('i')) {
                    alert('游戏结束，得分：' + num);
                    clearInterval(timer);
                    flag = false;
                }
            }
            $(main.children()[len - 1]).remove();
        }
    }, 20)
    bindEvent();
}

function bindEvent() {
    main.on('click', function (event) {
        if (flag) {
            var tar = event.target;
            if (tar.className == 'i') {
                $(tar).css('backgroundColor', '#bbb');
                $(tar).removeClass();
                num++;
            } else {
                alert('游戏结束，得分：' + num);
                clearInterval(timer);
                flag = false;
            }
            if (num % 10 == 0) {
                speed++;
            }
        }

    })
}

function clickStart() {
    $('a').on('click', function () {
        $('a').css('display', 'none');
        move();
    })
}
clickStart();

这里写图片描述

杨家八公子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
js别踩白块儿小游戏

html代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
复制链接

扫一扫

专栏目录