软件工程—Javascript—00—灰太狼小游戏设计

声明

具体代码可见链接github

具体网页游戏见：03/第四次实验课javascript初步学习/发给学生的实验文件（包含html和css）/index.html

此外，个人更喜欢灰太狼，因此与那本想将游戏改为“暴打小灰灰”，但是老师提供照片素材没有这个选项，因此作罢

设计重新开始函数

依据实现逻辑，应该首先把游戏结束页面mask消除；再将当前页面中灰太狼与小灰灰图片移除；重置计时器；重置分数；再次回到初始界面。

 //监听游戏重新开始
$(".reStart").click(function () {
        $(".mask").stop().fadeOut(10);

        // 移除所有灰太狼的图片
        $(".wolfImg").remove();
        $(".wolfImg_1").remove();

        // 重置定时器
        clearInterval(wolfTimer);
        clearInterval(wolfTimer_1);

        // 重置分数为0
        $(".score").text(0);

        // 显示开始按钮
        $(".start").fadeIn(100);
    });

同时显示小灰灰与灰太狼并配备相应分数机制

依据原本就有的灰太狼显示函数以及相应的改变分数机制，首先判断显示灰太郎的原理就是通过快速迭代图片以达到动画效果，这个功能的实现是通过startWolfAnimation函数的不停自我调用实现的，因此需要将小灰灰图片显示也放在这个函数中

判断可以共用的变量是图片的显示位置数组arrPos、图片显示索引wolfIndex，不可共用的变量即存储图片的类$wolfImg、$wolfImg_1以及具体显示图片的洞口位置posIndex、posIndex_1

修改进度条时间

由于限制进度条像素长度固定必须为180，并且又已知像素条的减少应该尽量避免出现小数（容易四舍五入），所以决定从间隔时间入手，修改每次像素减少的间隔时间（单位：ms）。

总像素数*每像素花费时间 = 总时间

$$180\ast \frac{Interval}{1000}\ast 1=30$$

最后得到$\frac{500}{3}$，取500->501，最后计算得到167

每连续得到50分就延长1秒

设计一个简单的逻辑限制只有连续增长50分才会延长

var increase_time = 0
var flag = 0
function gameRules($wolfImg, $wolfImg_1) {
    $wolfImg.one("click", function () {
        window.wolfIndex = 5;
        window.wolfIndexEnd = 9;
        $(".score").text(parseInt($(".score").text()) - 10);
        falg = 1;
    });
    $wolfImg_1.one("click", function () {
        window.wolfIndex = 5;
        window.wolfIndexEnd = 9;
        $(".score").text(parseInt($(".score").text()) + 10);
        if (flag == 1) {
            increase_time = 0;
        }
        else {
            increase_time += 1;
        }
    });
}