基于JQuery Flip实现的图片配对小游戏

最新推荐文章于 2024-07-03 02:58:11 发布

wangs1996

最新推荐文章于 2024-07-03 02:58:11 发布

阅读量720

点赞数

分类专栏： JavaScript jQuery 生活随手记

本文链接：https://blog.csdn.net/wangs1996/article/details/80368221

版权

生活随手记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaScript jQuery

8 篇文章 0 订阅

订阅专栏

背景

先放出效果链接
这里是DEMO！
一个简单的图片配对小游戏，要实现基本的计数功能。
当时的要求是可以用JQuery Flip 这个插件来完成，时间只有五个小时。
好在完成了！记录下！

正文

思路
1. 五对图片，按顺序命名为1.jpg 2.jpg …… 10.jpg 其中11.jpg 是背面图片，其余的1 2是一对，3 4是一对以此类推。
2. 生成一个1-10的随机数组且不重复。
3. 利用2中的数组，摆放10张图片。
3. 记录用户的点击次数。当翻到的两张图片是一对的时候，计分且两张图片不用翻过去了；当两张图片不是一对的时候，前一张图片要翻过去
4. 当计分到达5分，即所有图片配对成功时，给出提示信息。

实现
HTML代码如下：

<body>
    <h2>
        Matched:<span id="matched">0</span>
        Attempts:<span id="attempts">0</span>
    </h2>
    <div id="wrap">
        <div id="card-1" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-2" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-3" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-4" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-5" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-6" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-7" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-8" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-9" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
        <div id="card-10" class="card">
            <div class="front">
                <img src="img/11.png">
            </div>
            <div class="back">
                <img src="" class="back-img">
            </div>
        </div>
    </div>
    <p></p>
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/flip.js"></script>
    <script src="js/game.js"></script>
</body>

JS代码如下：

调用flip方法：

$(".card").flip()

生成不重复的随机数组：（个人感觉有点伪随机的感觉）参考这篇博客

    var ary = [];
    function randomArray(num) {
        for (var i = 0; i < num; i++) {
            ary[i] = i + 1;
        }
        ary.sort(function () {
            return 0.5 - Math.random();
        });
        return ary;
    }

    randomArray(num)

利用刚刚生成的数组放图片：

    for (var i = 0, j = 0; i < num, j < num; i++, j++) {
        var str = "img/" + ary[j] + ".png";
        $(".back-img:eq(" + i + ")").attr("src", str);
        $(".back-img:eq(" + i + ")").parents(".card").attr("index", ary[j]);
    }

图片摆好啦！要开始玩啦！不急不急，我们还需要几个变量准备下~~

    var matched = 0,//记录有几对配对成功
        attempts = 0;//记录点击次数
    var index1 = 0,//记录前一个点击的图片
        index2 = 0;//记录当前点击的图片

用户开始点击了！具体实现看下面代码有加了注释

    $(".card").click(function () {
        attempts++;
        $("#attempts").html(attempts);
        if (attempts > 1) {
            index1 = index2 //点击第二次之后用index1保存上一次的
        }
        index2 = $(this).attr("index"); //index2保存当前的

        if (attempts > 1 && index1 != index2) { //点击第二次之后且用户两次点击的不是同一张图片
            var t1 = Math.floor((parseInt(index1) + 1) / 2);
            var t2 = Math.floor((parseInt(index2) + 1) / 2);
            if (t1 == t2) {//图片配对成功了！
                matched++;
                $("#matched").html(matched);
                $(".card[index=" + index1 + "]").off("click");//配对成功后禁止被点击
                $(".card[index=" + index2 + "]").off("click");
                index1 = -1;
                index2 = -1;
            }
            if (t1 != t2) {
                $(".card[index="+index1+"]").delay(3000).flip('toggle');//配对不成功 前一张翻过去！
            }
        }
        if (matched == 5) {
            $("p").html("Congratulations!") //5对都配对成功 提示用户！
        }
    });

反思

1.实现思路可以再完善一下。如果增加图片数量，比如20张，一个一个修改命名会比较麻烦。
2.当点击最后一张图片时，是先给出了提示信息后图片才翻转。这里要再改善！
3.实现过程中，较多时间浪费的原因是没有好好读文档！下次遇到新的东西，要先浏览一下文档，知道有哪些方法。这样到时候可以直接拿来用！
4.其实真正完成的时间不到四个小时，效果还是可以的，嘻嘻

欢迎大家批评指正！