[jQuery基础] jQuery案例 -- 狂拍灰太狼

程序员文章站 2024-02-26 16:10:52

...

狂拍灰太狼

案例效果展示

案例构架

1.背景图片
2.得分选项
3.时间进度条
4.游戏规则的点开以及关闭
5.开始游戏选项和重新开始选项

案例思路

布局html页面的基本样式
- 设置得分
- 设置时间进度条
- 设置开始游戏按键
- 设置游戏规则框架
- 设置游戏规则
- 设置 game over 和重新开始按键
设置这个游戏的基本规则
- 1.游戏时间:60s
- 2.拼手速,殴打灰太狼+10分
- 3.殴打小灰灰-10分

接下来开始正题,js的基本实现过程

监听点击时的效果

从游戏效果上看在开始游戏和重新游戏的时候会有图片的淡入淡出效果,在点击游戏规则和关闭上也会有淡入和淡出的效果

// 1.监听游戏规则的点击
$(".rules").click(function (e) {
    // 淡入 -- fadeIN()
    $(".rule").stop().fadeIn(100);
});

// 2.监听关闭按钮的点击
$(".close").click(function (e) {
    // 淡出 -- fadeOUt()
    $(".rule").stop().fadeOut(100);
});

// 3.监听开始游戏按钮的点击
$(".start").click(function (e) {
    // 开始游戏后实现游戏规则淡出效果
    $(this).stop().fadeOut(100);
});

// 4.监听重新开始按钮的点击
$(".reStart").click(function () {
    // 点击开始让重新开始界面淡出消失
    $(".mask").stop().fadeOut(100);
});

接下来要开始处理进度条结束后的问题,我们可以看到在进度条结束后出现的重新开始以及在我们点击重新开始的时候要保证进度条是满的(也就是说要保证在点击之后width:180)
```
$(".progress").css({
	width: 180,
});
```
在进度条的基础上还要保证在重新开始点击按钮是得分为0
```
$(".score").text(0);
```

我们先解决进度条得问题
- 重新设置进度条的宽度 – 保证每一次点击开始游戏时进度条的宽度都是180px
```
$(".progress").css({
    width: 180,
});
```
- 开启定时器处理进度条的问题
  - 首先要拿到当前进度条的宽度
```
var progressWidth = $(".progress").width();
```
  - 减少当前的宽度
```
progressWidth -= 1;
```
  - 其次重新给进度条赋值一个宽度
```
$(".progress").css({
    width: progressWidth,
});
```
  - 然后也是主要的判断进度条是否走完
    - 确认进度条已经走完时,要关闭定时器
```
clearInterval(timer);
```
    - 重新显示开始界面 – 让game over 和重新开始界面淡入
```
$(".mask").stop().fadeIn(100);
```

接下来我们要开始处理灰太狼和小灰灰的动画问题

我们发现有小灰灰和灰太狼两种不同的图片,所以我们可以先定义两个数组,分别命名为wolf_1和wolf_2,将灰太狼和小灰灰的图片分别放在这两个数组中

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" },
];

接下来我们要先创建一个图片,然后随机获取到图片的位置(向上取整,四舍五入)
```
// 3.创建一个图片
var $wolfImage = $("<img src='' class='wolfImage'>");
// 随机获取图片的位置
var posIndex = Math.round(Math.random() * 8);
```
向上取整,四舍五入
0 * 8 = 0 == 0
0.1* 8 = 0.8 == 1
0.2* 8 = 1.6 == 2
0.3* 8 = 2.4 == 2
0.4* 8 = 3.2 == 3
0.5* 8 = 4.0 == 4
0.6* 8 = 4.8 == 5
0.7* 8 = 5.6 == 6
0.8* 8 = 6.4 == 6
0.9* 8 = 7.2 == 7
1* 8 = 8 == 8
然后要设置图片显示的位置,利用随机位置实现随机图片的效果(判断是否等于0?等于0为wolf_1,等于1为wolf_2)
```
var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
```
之后要设置图片的内容
```
window.wolfIndex = 0;
window.wolfIndexEnd = 5;
```
- 设置每隔一段时间切换一张图片效果
  - 判断图片是否到第五张
    - 到了第五张图片要删除图片
```
$wolfImage.remove();
```
    - 关闭定时器
```
clearInterval(wolfTimer);
```
    - 然后动画做完之后继续调用做下一个动画
```
startWolfAnimation();
```

之后在我们重新开始游戏后,让定时器再次开始,保证图片能够重新获取到显示的位置
```
$(".container").append($wolfImage);
```

然后我们要实现加分减分的过程

首先能够想到的就是要保证图片能够点击一次,不可能要点击一次图片就让分数加一次

修改索引

indow.wolfIndex = 5;
window.wolfIndexEnd = 9;

拿到当前点击图片的地址
```
var $src = $(this).attr("src");
```
根据图片地址判断是否是灰太狼
```
var flag = $src.indexOf("h") >= 0;
```

根据点击的图片类型增减分数

if(flag){
    // +10
    $(".score").text(parseInt($(".score").text()) + 10);
}else{
    // -10
    $(".score").text(parseInt($(".score").text()) - 10);
}

最后我们要保证在进度条为0后要停止灰太狼和小灰灰的动画
- 要删除图片
```
$(".wolfImage").remove();
```
- 然后关掉定时器
```
clearInterval(wolfTimer);
```

之后还有一些零碎的细节要处理

比如要在点击重新开始按钮点击的时候要保证让开始游戏方法运作
比如在获取随机图片位置的时候保证是向上取整,四舍五入
比如在游戏点击灰太狼和小灰灰的时候出现的击打效果和加分效果

效果拆解

开始游戏界面

[jQuery基础] jQuery案例 -- 狂拍灰太狼

重新游戏界面

[jQuery基础] jQuery案例 -- 狂拍灰太狼

游戏规则界面

[jQuery基础] jQuery案例 -- 狂拍灰太狼

游戏加分减分

[jQuery基础] jQuery案例 -- 狂拍灰太狼

时间进度条

[jQuery基础] jQuery案例 -- 狂拍灰太狼

图片地址

链接：https://pan.baidu.com/s/1DUDiSNI2vrFO8vkqQt9qGQ
提取码：nkm9

代码展示

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 主体 -->
    <div class="container">
        <!-- 设置得分 -- 默认为0 -->
        <h1 class="score">0</h1>
        <!-- 设置时间的进度条 -->
        <div class="progress"></div>
        <!-- 设置开始游戏 -->
        <button class="start">开始游戏</button>
        <!-- 设置最下面的游戏规则的框架 -->
        <div class="rules">游戏规则</div>
        <!-- 设置最下面的游戏规则 -- 默认隐藏 -->
        <div class="rule">
            <p>游戏规则:</p>
            <p>1.游戏时间:60s</p>
            <p>2.拼手速,殴打灰太狼+10分</p>
            <p>3.殴打小灰灰-10分</p>
            <a href="#" class="close">[关闭]</a>
        </div>
        <!-- 设置输了的game over和重新开始 -- 默认不显示-->
        <div class="mask">
            <h1>GAME OVER</h1>
            <button class="reStart">重新开始</button>
        </div>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
/* 主体 */
.container{
    width: 320px;
    height: 480px;
    background: url("../images/game_bg.jpg") no-repeat 0 0;
    margin: 50px auto;
    position: relative;
}
/* 设置得分 */
.container>h1{
    color: white;
    margin-left: 60px;
}

/* 设置时间的进度条 */
.container>.progress{
    width: 180px;
    height: 16px;
    background: url("../images/progress.png") no-repeat 0 0;
    position: absolute;
    top: 66px;
    left: 63px;
}

/* 设置开始游戏 */
.container>.start{
    width: 150px;
    line-height: 35px;
    text-align: center;
    color: white;
    background: linear-gradient(#E55C3D,#C50000);
    border-radius: 20px;
    border: none;
    font-size: 20px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    cursor: pointer;
}

/* 设置最下面的游戏规则的框架 */
.container>.rules{
    width: 100%;
    height: 20px;
    background: #ccc;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
}

/* 设置最下面的游戏规则 */
.container>.rule{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;
    display: none;
    cursor: pointer;
}

/* 设置规则的字体颜色和大小 */
.rule>p{
    line-height: 50px;
    color: white;
}
.rule>a{
    color: red;
}

/* 设置输了的game over 和 重新开始 */
.container>.mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 200px;
    box-sizing: border-box;
    text-align: center;
    display: none;
    cursor: pointer;
}

/* 设置game over的颜色、大小和阴影 */
.mask>h1{
    color: #ff4500;
    text-shadow: 3px 3px 0 #fff;
    font-size: 40px;
}

/* 设置重新开始按钮 */
.mask>button{
    width: 150px;
    line-height: 35px;
    text-align: center;
    color: white;
    background: linear-gradient(#74ACCF,#007DDC);
    border-radius: 20px;
    border: none;
    font-size: 20px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    cursor: pointer;
}

js部分

/*
先做游戏规则
确保开始游戏和重新游戏时规则的淡入淡出问题
处理进度条在结束后出现重新开始,以及在点击重新开始时保证时间的进度条是满的(width:180)
开始处理灰太狼和小灰灰的动画问题
分别处理灰太狼和小灰灰的图片(放在两个数组内)
获取到图片的不同位置
随机获取到图片的位置
随机获取两组数组中的位置
利用随机位置实现随机图片效果
实现每隔一段时间切换一张图片
判断是否到了第五张图片,到了删掉,关掉定时器,然后动画做完之后继续调用做下一个动画
在重新开始游戏后,让定时器重新开始,图片重新获取位置显示
实现加分减分
拿到点击图片的地址,进行判断,辨别是否是灰太狼
*/

$(function () {
    // 1.监听游戏规则的点击
    $(".rules").click(function (e) {
        // 淡入 -- fadeIN()
        $(".rule").stop().fadeIn(100);
    });

    // 2.监听关闭按钮的点击
    $(".close").click(function (e) {
        // 淡出 -- fadeOUt()
        $(".rule").stop().fadeOut(100);
    });

    // 3.监听开始游戏按钮的点击
    $(".start").click(function (e) {
        // 开始游戏后实现游戏规则淡出效果
        $(this).stop().fadeOut(100);
        // 调用处理进度条的方法
        progressHandler();
        // 调用处理灰太狼动画的方法
        startWolfAnimation();
    });

    // 4.监听重新开始按钮的点击
    $(".reStart").click(function () {
        // 得分重置为0
        $(".score").text(0);
        // 点击开始让重新开始界面淡出消失
        $(".mask").stop().fadeOut(100);
        // 调用处理进度条的方法
        progressHandler();
        // 调用处理灰太狼动画的方法 -- 点击重新开始游戏后,让开始游戏方法运作
        startWolfAnimation();
    });

    // 定义一个专门处理进度条的方法
    function progressHandler() {
        // 重新设置进度条的宽度 -- 保证每一次点击开始游戏时进度条的宽度都是180px
        $(".progress").css({
            width: 180,
        });
        // 开启定时器处理进度条
        var timer = setInterval(function () {
            // 拿到进度条当前的宽度
            var progressWidth = $(".progress").width();
            // 减少当前的宽度
            progressWidth -= 1;
            // 重新给进度条赋值宽度
            $(".progress").css({
                width: progressWidth,
            });
            // 监听进度条是否走完
            if (progressWidth <= 0) {
                // 关闭定时器 -- 确认进度条已经走完
                clearInterval(timer);
                // 显示重新开始界面 -- 让game over 和重新开始界面淡入
                $(".mask").stop().fadeIn(100);
                // 进度条归0后停止灰太狼的动画
                stopWolfAnimation();
            }
        }, 100);
        return timer;
    }

    var wolfTimer;
    // 定义一个专门处理灰太狼动画的方法
    function startWolfAnimation() {
        // 1.定义两个数组分别保存灰太狼和小灰灰的图片
        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",
        ];

        // 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 $wolfImage = $("<img src='' class='wolfImage'>");
        // 随机获取图片的位置
        var posIndex = Math.round(Math.random() * 8);
        // 4.设置图片显示的位置
        $wolfImage.css({
            position: "absolute",
            left: arrPos[posIndex].left,
            top: arrPos[posIndex].top,
        });
        // 随机获取数组类型 -- 判断是否等于0?等于0为wolf_1,等于1为wolf_2
        var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
        // 5.设置图片的内容
        window.wolfIndex = 0;
        window.wolfIndexEnd = 5;
        // 设置每隔一段时间切换一张图片效果
        wolfTimer = setInterval(function () {
            // 判断图片是否到第五张
            if (wolfIndex > wolfIndexEnd) {
                // 到了第五张删掉图片
                $wolfImage.remove();
                // 关掉定时器
                clearInterval(wolfTimer);
                // 动画做完之后继续调用做下一个动画
                startWolfAnimation();
            }
            $wolfImage.attr("src", wolfType[wolfIndex]);
            wolfIndex++;
        }, 300);

        // 6.将图片添加到界面上
        $(".container").append($wolfImage);

        // 7.调用处理游戏规则的方法 -- 实现加分减分
        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;
            // 根据点击的图片类型增减分数
            if(flag){
                // +10
                $(".score").text(parseInt($(".score").text()) + 10);
            }else{
                // -10
                $(".score").text(parseInt($(".score").text()) - 10);
            }
        });
    }


    // 进度条归0后停止灰太狼的动画
    function stopWolfAnimation() {
        // 删掉图片
        $(".wolfImage").remove();
        // 关掉定时器
        clearInterval(wolfTimer);
    }


    //向上取整,四舍五入
    /*
    0  * 8 = 0   == 0
    0.1* 8 = 0.8 == 1
    0.2* 8 = 1.6 == 2
    0.3* 8 = 2.4 == 2
    0.4* 8 = 3.2 == 3
    0.5* 8 = 4.0 == 4
    0.6* 8 = 4.8 == 5
    0.7* 8 = 5.6 == 6
    0.8* 8 = 6.4 == 6
    0.9* 8 = 7.2 == 7
    1* 8 =  8    == 8
    */
    // console.log(Math.random());
    // console.log(Math.round(0.5));//向上取整
});

上一篇：三分钟了解什么是冒烟测试—啄木鸟学院

下一篇：邮件发送简单例子-bean文件

[jQuery基础] jQuery案例 -- 狂拍灰太狼

狂拍灰太狼

案例效果展示

案例构架

案例思路

效果拆解

开始游戏界面

重新游戏界面

游戏规则界面

游戏加分减分

时间进度条

图片地址

代码展示

[jQuery基础] jQuery案例 -- 狂拍灰太狼

jQuery实现小游戏源代码--打灰太狼

jQuery实现小游戏源代码--打灰太狼