翻牌游戏

最新推荐文章于 2020-07-29 21:52:56 发布

笑苍穹v

最新推荐文章于 2020-07-29 21:52:56 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： H5+CSS 文章标签：游戏 js

本文链接：https://blog.youkuaiyun.com/qq_40818233/article/details/82114632

H5+CSS 专栏收录该内容

7 篇文章

订阅专栏

博主分享了一个翻牌小游戏的代码，还提醒读者自行更改图片路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天小编给大家上传一个翻牌小游戏，话不多说直接上代码

请读者自己更改图片路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连连看3</title>
    <style>
        table{
            width: 800px;
            height: 600px;
            margin:  0 auto;
        }
        table img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
    </tr>
    <tr>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
    </tr>
    <tr>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
        <td><img src="../../../img/pbg.jpg" alt=""></td>
    </tr>

</table>
</body>
<script src="../../../js/jreduRandom.js"></script>
<script>
    var imgsIndex = [];
    var result1 = getRandomNum(1,6);
    var result2 = getRandomNum(1,6);
    /*包含了两组1-6的图片数组*/
    imgsIndex = imgsIndex.concat(result1,result2);
    /*1.获取所有图片*/
    var imgs = document.getElementsByTagName("img");
    /*2.给所有图片添加点击事件*/
    function startGame() {
        for(var i = 0;i < imgs.length;i++){
            !function (i) {
                imgs[i].onclick = function () {
                    var index = imgsIndex[i];
                    /*不能重复点击判定条件*/
                    var cat = imgs[i].getAttribute("src");
                    if(cat == "../../../img/pbg.jpg"){
                        var src = "../../../img/icon" + index +".gif";
                        imgs[i].src = src;
                        check(imgs[i])
                    }
                }
            }(i);
        }
    }
    startGame();
    /*定义初始点击次数*/
    var account = 0;
    /*定义上次点击路径*/
    var lastSrc = "";
    function check(ele) {
        account++;
        if (account % 2 != 0){
            lastSrc = ele.src;
        }else {
            if (lastSrc != ele.src){
                for(var i = 0;i < imgs.length;i++){
                    imgs[i].src = "../../../img/pbg.jpg";
                }
            }
        }
        if(account >= 12){
            setTimeout(function () {
                alert("恭喜通关！")
            },10);
        }
    }
</script>
</html>