jquery之别踩白块游戏的实现

时间 2019-12-06

原文原文链接

　　转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html javascript

　　前端学习要告一段落了，也没机会写什么像样的东西，而后无心中想起某人之前给我玩了一下别踩白块的游戏，手残还被嘲讽了下，如今想起来以为这游戏实现起来也不难，因而上星期用jquery写了一个别踩白块的小游戏，就像当初学python的时候同样写了一个2048。而后今天正好抽个时间写个博客纪录下，算是对前一段时间学习的总结，没有玩过的能够去下一个原版的来玩一下，游戏很简单，就是从不断下落的方块中点击黑快，若是点击到百块或者有黑块没被点击到，游戏就算结束。游戏实现起来不难，都是一些小知识点。当时写的时候，脑壳有点糊，有一bug看了半天没解决，后来次日早上脑壳清醒的时一看就看出来，顺便在这里提醒本身必定不要在脑壳不清醒的时候写代码。好了说了这么多先来看一下效果图，这里别吐槽个人css样式设计就好。。。css

1、游戏html页面

游戏的html界面很是简单，分为4部分，html

得分标题栏，
游戏界面主题容器，开始的时候为一个div，而后用jquery动态生成黑白格子
开始暂停按钮一栏
游戏结束时候显示的模态框

下面是代码部分前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/game.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="main">
    <h3>Score:<span id="score">0</span></h3>
    <div id="content" class="content">
        <div id="inner"></div>
    </div>
    <div class="btn">
        <div class="container">
            <button id="begin">开始</button>
            <button id="stop">暂停</button>
        </div>
    </div>

    <div class="shadow hide"></div>
    <div class="alert-box hide">
        <div class="game-over">
            <img style="opacity: 0.8" src="../pic/gg.jpg">
        </div>
        <div class="btn">
            <button id="again">从新开始</button>
            <button id="back">返回</button>
        </div>
    </div>
</div>

<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/game.js"></script>

</body>
</html>

2、css布局　　

写完了html而后就是css，这里主要用到 absolute布局，而后须要注意的是就是游戏过程因为须要不停的生成一栏新div，因此div容器要设置overflow: hidden，这一点须要注意下，而后其余的知识点也就是absolute，relative如何布局，模态框如何实现并居中，都不难，下面看下代码就好java

*{
    margin: 0;
    padding: 0;
}

.main{
    width: 808px;
    margin: 50px auto;
    background: gray;
    min-height: 544px;
    position: relative;
}
.content{
    width: 408px;
    margin: 0 auto;
    height:408px;
    border: 2px solid green;
    background-color: white;
    position: relative;
    top:0;
    overflow: hidden;
}
#inner{
    position: relative;
    top:-102px;
}
.item{
    height: 102px;
}
.item *{
    float: left;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid black;
}
.black{
    background-color: black;
}

h3{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
h3 span{
    color:brown;
}
.hide{
    display: none;
}

.shadow{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: gray;
    opacity: 0.6;
}
.alert-box{
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    top:50%;
    margin-left: -150px;
    margin-top: -150px;
    background-color: white;
}
.alert-box .game-over{
    margin-left: 20px;
    margin-top: 30px;
}
.alert-box .btn{
    width: 150px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.main .btn .container{
    width: 150px;
    margin: 20px auto;
}
button{
    cursor: pointer;
    border: 0;
    display: inline-block;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: cyan;
}

3、jquery实现　　

游戏最核心的部分就是jquery实现了，主要的功能以下python

游戏的初始化
如何动态插入一行div和删除一行div
开始暂停按钮的事件绑定
游戏过程当中点击百块和黑快的事件委托
游戏如何移动以及如何得分
如何自动增长白块下落速度
如何断定游戏结束

　　下面来看一下初始化代码的实现，初始化以前写了个函数，自动插入一行，而且在这一行4个div中某一个为随机的黑块供游戏中点击，剩下3个白块，怎么随机生成，怎么动态建立div这里须要点小技巧，具体看下面。生成一行div的函数完成后只需在初始化函数里面调用4次便可jquery

function insertDiv() {
    var rand = Math.floor(Math.random() * 4);　　　　　　　　// 生成一个0到3 的随机数，用来做为判断生成黑块的位置
    $("#inner").prepend("<div class='item'></div>");  
    $.each([0, 1, 2, 3], function (k, v) {
        if (v == rand) {
            $("#inner .item").first().append("<div class='black col'></div>"); 
        } else {
            $("#inner .item").first().append("<div class='col'></div>");
        }
    })
}


function init() {　　　　　　　　　　　　　　　　// 初始生成4*4的div
    $.each([0, 1, 2, 3], function () {
        insertDiv();
    });
}

　　初始化完成后，咱们须要作的就是如何让界面动起来，这里写了一个函数，每次调用该函数的话，游戏内容会自动向下移动几px，而后将该函数传给定时器，就能够不断的向下滑动，不过这里须要注意，下落过程当中，若是下落的距离超过一行后，须要从新插入一行，而后将超出的那一行删除，并且须要将偏移的距离恢复到原来的位置，若是须要加速白块下落的速度，只需将每次向下移动加大便可，游戏后面的自动加速也是基于此来作的。下面来看一下这部分的代码app

function move() {
    var ctop = parseInt($("#inner").offset().top);
    ctop += window.globalSpeed;　　　　　　　　　　　　// 自定义的全局变量， 每次下落偏移的距离
    $("#inner").offset({top: ctop});
    if (ctop >= 114) {
        insertDiv();
        $("#inner").offset({top: 12}); 　　　　　　 // 恰好移动一个item后在上移一个item
        delDiv();
    }
}

以后就是写开始，暂停部分，这里主要是对计时器的使用，这里须要注意的是每次点击的时候，都要先判判定时器是否已经清除，不然这里会有bug，下面来直接看一下代码dom

function bindStart() {
    $("#begin").mouseover(function () {
        $(this).css("cursor", 'pointer');
    }).click(function () {
        if(window.globalIsClearT1){　　  　　　　// 自定义的全局变量，看定时器是否清楚

        }else {
            clearInterval(window.globalT1); 　　//没有清除的话，先清除，避免两次按下开始按钮
        }
        window.globalT1 = setInterval(move, 30);
        window.globalStartClick = true;　　　　　　//全局变量，是否开始标志位，只有开始了，才能点击
    })
}

function bindStop() {
    $("#stop").mouseover(function () {
        $(this).css("cursor", 'pointer');
    }).click(function () {
        clearInterval(window.globalT1);
        window.globalStartClick = false;
        window.globalIsClearT1 = true;
    })
}

　　写到这里，再就是看一下，每次点击的时候如何操做，是否得分，仍是点错了游戏结束，下面来看一下代码，界面上有4*4个格子，须要事件委托，来判断是哪个白块被点击，若是点击的是黑快，将其变为白块，而且加上一分便可，不然点错的话，游戏就结束　ide

function bindClick() {
    $("#inner").click(function (e) {
        if (window.globalStartClick) {
            var current = $(e.target);
            if (current.hasClass("black")) {
                current.removeClass("black");
                score();
            } else {
                gameOver();
            }
        }
    })；
}

下面来看一下如何计算得分的代码，以及如何实现自动的加速，比较简单就很少说了

function score() {
    var score = parseInt($("#score").text());
    if(score%10 == 0){
        window.globalSpeed += 1;                //获得必定的分数后就自动加速
    }
    $("#score").text(score + 1);
}

　　最后来看一下，游戏结束的时候如何处理，游戏结束的话，先暂停游戏下落，而后弹出模态对话框，让用户选择返回，仍是从新来过，从新来过的话，分数清零，游戏界面清空，而后初始化再在自动触发开始按钮，开始下一轮游戏，　　

function gameOver() {
    //暂停游戏，显示模态框
    $("#stop").trigger('click');
    window.globalIsClearT1 = true;
    $(".shadow").removeClass('hide').next().removeClass('hide');

    $("#again").click(function () {
        clearInterval(window.globalT1);
        $(".shadow").addClass('hide').next().addClass('hide');
        $("#score").text(0);
        clearAll();
        init();
        $("#begin").trigger('click');
        // window.globalT1 = setInterval(move, 30)
    });

到这里，基本整个游戏都算实现了，游戏不复杂，可是要彻底运行起来，没有bug也不是那么简单，有兴趣的也能够去写写，若是上面代码有什么问题的话，能够向我提出来。　　