狂拍小灰灰游戏案例

最新推荐文章于 2024-05-23 22:10:35 发布

飞吃鱼

最新推荐文章于 2024-05-23 22:10:35 发布

阅读量150

点赞数

分类专栏： Jquery 文章标签： css html jquery

本文链接：https://blog.csdn.net/weixin_53191752/article/details/120279474

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天看到一个类似于砸地鼠的游戏感觉很有趣于是在网上找了一些图片资源也做了一个接下来上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/狂拍灰太狼.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>狂拍灰太狼小游戏</title>
</head>

<body>
    <div class="container">
        <h1 class="score">0</h1>
        <div class="progress"></div>
        <button class="start big">开始游戏</button>
        <div class="rules">游戏规则</div>

        <!-- 游戏规则 -->
        <div class="rule">
            <p>游戏规则</p>
            <p>1:游戏时间60s</p>
            <p>2:拼手速 殴打灰太狼+10分</p>
            <p>3:殴打小灰灰-10分</p>
            <a href="#" id="close">[关闭]</a>
        </div>
        <!-- 重新开始 -->
        <div class="mask">
            <h1>GAME OVER</h1>
            <button class="big" id="reStart">重新开始</button>
        </div>
    </div>


    <!-- jq -->
    <script>
        $(function() {
            // 监听游戏规则
            $(".rules").click(function() {
                    $(".rule").stop().fadeIn(100);
                })
                // 监听关闭按钮
            $("#close").click(function() {
                    $(".rule").stop().fadeOut(100);
                })
                // 监听开始按钮
            $(".start").click(function() {
                    $(".start").stop().fadeOut(100)
                        // 调用处理进度条的方法
                    ProgressHandler();
                    // 调用灰太狼动画的方法
                    wolfAnimation()
                })
                // 监听重新开始事件
            $("#reStart").click(function() {
                $(".mask").stop().fadeOut(100)
                    // 调用进度条
                ProgressHandler()
                    // 点击重新开始后 调用动画
                wolfAnimation()
                //  点击重新开始后分数归零
                $(".score").text(0)
            })

            window.progressWidth;
            // 定义一个专门处理进度条的方法
            function ProgressHandler() {
                // 重新设置进度条宽度
                $(".progress").css({
                        width: 180,
                    })
                    // 开启一个进度条定时器
                var timer = setInterval(function() {
                    // 获取当前的进度条长度
                    progressWidth = $(".progress").width()
                        // 每次减少的宽度重新赋值
                    progressWidth -= 20
                        // 将当前的长度赋值给进度条
                    $(".progress").css({
                            width: progressWidth,
                        })
                        // 监听是否走完
                    if (progressWidth <= 0) {
                        // 清除定时器
                        clearInterval(timer);
                        // 显示重新开始界面
                        $(".mask").stop().fadeIn(100)
                            // 显示重新开始 动画不显示
                        stopWolfAnmation();
                    }
                }, 2000)
            }
            // 狼动画的定时器 拿出 不然之后的停止动画访问不到
            var wolfTimer;

            // 停止动画
            function stopWolfAnmation() {
                $(".ig").remove()
                clearInterval(wolfTimer)
            }

            // 灰太狼开始动画
            function wolfAnimation() {
                // 定义两个数组保存所有的动画图片
                var wolf_1 = ['../images/h0.png', '../images/h1.png', '../images/h2.png', '../images/h3.png', '../images/h4.png', '../images/h5.png', '../images/h6.png', '../images/h7.png', '../images/h8.png', '../images/h9.png']
                var wolf_2 = ['../images/x0.png', '../images/x1.png', '../images/x2.png', '../images/x3.png', '../images/x4.png', '../images/x5.png', '../images/x6.png', '../images/x7.png', '../images/x8.png', '../images/x9.png']
                    //    定义一个数组保存所有可能出现的位置
                var arrPos = [{
                    left: "100px",
                    top: "115px",
                }, {
                    left: "20px",
                    top: "160px",
                }, {
                    left: "190px",
                    top: "142px",
                }, {
                    left: "105px",
                    top: "193px",
                }, {
                    left: "19px",
                    top: "221px",
                }, {
                    left: "202px",
                    top: "212px",
                }, {
                    left: "120px",
                    top: "275px",
                }, {
                    left: "30px",
                    top: "295px",
                }, {
                    left: "209px",
                    top: "297px",
                }];
                // console.log(posIndex)
                // 创建一个随机图片
                var $wolfImage = $("<img src='' class='ig'>")
                    // 随机获取图片的位置  随即生成0-8
                var posIndex = Math.round(Math.random() * 8);
                // 设置图片显示的位置
                $wolfImage.css({
                    position: "absolute",
                    top: arrPos[posIndex].top,
                    left: arrPos[posIndex].left,
                });
                // 随机获取数组类型 即灰太狼小灰灰  0-1
                var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2
                    // 设置图片
                window.wolfIndex = 0;
                window.wolfIndexEnd = 5;
                wolfTimer = setInterval(function() {
                        // 加入判断只进行到第五张图
                        if (wolfIndex > wolfIndexEnd) {
                            $wolfImage.remove()
                            clearInterval(wolfTimer);
                            // 循环进行图片动画 引入
                            wolfAnimation()
                        }
                        $wolfImage.attr("src", wolfType[wolfIndex])
                        wolfIndex++;
                    }, 300)
                    // 将图片添加到页面
                $(".container").append($wolfImage);

                // 添加游戏规则  传入添加的图片
                gameRules($wolfImage);
            }

            // 定义游戏规则函数
            function gameRules($wolfImage) {
                // 拿到当前图片的地址判断
                $wolfImage.one("click", function() {
                    // 点击之后立马变为点击到的动画  修改索引
                    window.wolfIndex = 5
                    window.wolfIndexEnd = 9
                    var src = $(this).attr("src")
                    var flag = src.indexOf("h") >= 0
                        // console.log(flag)
                    if (flag) {
                        // +10
                        $(".score").text(parseInt($(".score").text()) + 10)
                        console.log(progressWidth)
                        $(".progress").css({
                            width: progressWidth + 30,
                        })

                    } else {
                        // -10
                        $(".score").text(parseInt($(".score").text()) - 10)
                    }
                })
            }

        })
    </script>
</body>

</html>

其实整体来说这个游戏实现并不是很难游戏逻辑清楚之后很好实现各个功能，但是还有一些缺点比如每次出现的动画比较卡顿，拍打时的音效
不过作为一个jq的练手还是不错的

图片资源百度网盘链接：https://pan.baidu.com/s/1LMLHkMqbU1dVYESq5loVaA
提取码：2468

飞吃鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
狂拍小灰灰游戏案例

今天看到一个类似于砸地鼠的游戏感觉很有趣于是在网上找了一些图片资源也做了一个接下来上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
复制链接

扫一扫