狂拍灰太狼小游戏

1 狂拍灰太狼静态页面布局

• 首页布局和静态效果

• 其他页面布局和静态效果

游戏规则页面

游戏结束页面（重新开始页面）

2 . 狂拍灰太狼图片随机位置

• 生成随机位置
  需要三个数组分别保存灰太狼和小灰灰的图片以及所有可能出现的位置

        //1.定义两个数组保存所有灰太狼和小灰灰的图
        var wolf_1 = ['./imgs/h0.png', './imgs/h1.png', './imgs/h2.png', './imgs/h3.png', './imgs/h4.png',
            './imgs/h5.png', './imgs/h6.png', './imgs/h7.png', './imgs/h8.png', './imgs/h9.png']
        var wolf_2 = ['./imgs/x0.png', './imgs/x1.png', './imgs/x2.png', './imgs/x3.png', './imgs/x4.png',
            './imgs/x5.png', './imgs/x6.png', './imgs/x7.png', './imgs/x8.png', './imgs/x9.png']
        //2.定义一个数组保存所有可能出现的位置
        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" },
        ]

• 在对应位置显示相应图片

        //3.创建一个图片
        var $wolfImg = $("<img src='' class='wolfImage'>");
        //4.设置图片显示的位置
        //随机获取图片的位置
        var posIndex = Math.round(Math.random() * 8)
        $wolfImg.css({
            position: "absolute",
            left: arrPos[posIndex].left,
            top: arrPos[posIndex].top
        });
        //随机获取数组类型
        var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
        //5.设置图片的内容
        window.wolfIndex = 0;
        window.wolfIndexEnd = 5;
        wolfTimer = setInterval(function () {
            if (wolfIndex > wolfIndexEnd) {
                $wolfImg.remove();
                clearInterval(wolfTimer);
                wolfAnimation();
            }
            $wolfImg.attr('src', wolfType[wolfIndex]);
            wolfIndex++;
        }, 300)

        //6.将图片添加到页面shang
        $(".container").append($wolfImg)

3… 狂拍灰太狼动画效果

• 图片加载的动画效果
• 进度条加载动画效果

    //定义一个专门处理进度条的方法
    function progressHandler() {
        //重新设置进度条的宽度
        $(".progress").css({
            width: 180
        })
        //开启定时器处理进度条的
        var timer = setInterval(function () {
            //拿到进度条当前的宽度
            var progressWidth = $(".progress").width();
            //减少当前的宽度
            progressWidth -= 1;
            //重新给进度跳赋值
            $(".progress").css({
                width: progressWidth
            });
            //监听进度条是否走完
            if (progressWidth <= 0) {
                //关闭定时器
                clearInterval(timer);
                //显示重新开始界面
                $(".mask").stop().fadeIn(100)
                //停止灰太狼的动画
                stopWolfAnimation();
            }
        }, 100);
    }

• 游戏结束时停止执行动画效果

    //停止灰太狼动画方法
    function stopWolfAnimation() {
        $(".wolfImage").remove();
        clearInterval(wolfTimer)
    }

4 . 狂拍灰太狼游戏逻辑

• 实现如何可以点击到图片逻辑
  只是图片的点击
• 实现如何判断拍到的是灰太狼还是小灰灰

            //拿到当前图片的地址
            var $src = $(this).attr("src");
            //根据图片地址是否是灰太狼
            var flag = $src.indexOf('h') >= 0;
            //返回true就是灰太狼，false是小灰灰

• 基于上述功能实现分数的增加和减小逻辑

//根据点击的图片类型增减分数
            if (flag) {
                $(".score").text(parseInt($(".score").text()) + 10)
            } else {
                $(".score").text(parseInt($(".score").text()) - 10)
            }