jQuery练习_狂拍灰太狼

jQuery练习_狂拍灰太狼

项目介绍

• 在学习jQuery过程中学习到的一个小的案例，存在一些bug，自己做了几处修改。
  

项目展示

项目分享

案例图片

• 由于图片较多，不便展示，想要尝试的小伙伴可以私聊我喔！！！

index.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;}.container>.rules{    width: 100%;    height: 20px;    background: #ccc;    position: absolute;    left: 0;    bottom: 0;    text-align: center;}.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;}.rule>p{    line-height: 50px;    color: white;}.rule>a{    color: red;}.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;}.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;}

index.js

$(function () {    // 1.监听游戏规则的点击    $(".rules").click(function () {        $(".rule").stop().fadeIn(100);        clearInterval(wolfTimer);        //停止动画        stopWolfAnimation();    });    // 2.监听关闭按钮的点击    $(".close").click(function () {        $(".rule").stop().fadeOut(100);        startWolfAnimation();    });    // 3.监听开始游戏按钮的点击    $(".start").click(function () {        $(this).stop().fadeOut(100);        // 调用处理进度条的方法        progressHandler();        // 调用处理灰太狼动画的方法        startWolfAnimation();    });    // 4.监听重新开始按钮的点击    $(".reStart").click(function () {        $(".mask").stop().fadeOut(100);        // 调用处理进度条的方法        progressHandler();        //重新开始的时候，分数清零        $(".score").text(0);        // 调用处理灰太狼动画的方法        startWolfAnimation();    });    // 定义一个专门处理进度条的方法    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);    }    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        });        // 随机获取数组类型        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);            }        });    }    function stopWolfAnimation() {        $(".wolfImage").remove();        clearInterval(wolfTimer);    }});

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>狂拍灰太狼</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">    <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>    <div class="mask">        <h1>GAME OVER</h1>        <button class="reStart">重新开始</button>    </div></div></body></html>

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com