jquery开发狂拍灰太狼练习(李江南老师课程)

2020-04-14

游戏demo

html部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>狂拍灰太狼</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="/uploads/allimg/200410/1452505006-0.jpg"></script>
    <script src="js/js.js"></script>
</head>
<body>
    <div class="body">
        <h1 class="fen">0</h1>
        <div class="jdt"></div>
        <button class="start">开始游戏</button>
        <div class="guize">游戏规则</div>
        <div class="guize1">
            <p>游戏规则</p>
            <p>1.游戏时间:60s</p>
            <p>2.拼手速,殴打灰太狼+10分</p>
            <p>3.殴打小灰灰-10分</p>
            <a href="#">[关闭]</a>
        </div>
        <div class="mask">
            <h1>GAME OVER</h1>
            <button class="start1">重新开始</button>
        </div>
        <div class="miao1">加一秒</div>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.body{
    width: 320px;
    height: 480px;
    margin:50px auto;
    background: url(../images/game_bg.jpg) no-repeat;
    position: relative;
}
.body>h1{
    margin-left: 60px;
    color: #fff;
}
.body>.jdt{
    width: 180px;
    height: 16px;
    background:url(../images/progress.png) no-repeat;
    position: absolute;
    top: 66px;
    left: 63px;
}
.start{
    width: 150px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    background:linear-gradient(#e55c3d,#c50000);
    border-radius:20px;
    border:none;
    font-size: 20px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    outline: none;
    cursor: pointer;
}
.guize{
    width: 100%;
    height: 20px;
    background: rgba(204, 204, 204, 0.7);
    font-size: 14px;
    line-height: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
}

.guize1{
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;
    display: none;
}
.guize1>p{
    line-height: 50px;
    color: #fff;
}
.guize1>a{
    color: yellow;
}

.mask{
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 200px;
    box-sizing: border-box;
    text-align: center;
    display: none;
}

.mask>h1{
    color: #ff4500;
    text-shadow: 2px 2px 0 #fff;
}
.mask>button{
    background:linear-gradient(#74accf,#007ddc);
    width: 150px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    border-radius:20px;
    border:none;
    font-size: 20px;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    outline: none;
    cursor: pointer;
}
.miao1{
    display: none;
}
.miao{
    display: block;
    position: absolute;
    font-size: 12px;
    width: 100px;
    text-align: center;
    color: #fff;
    top: 65px;
    left: 50%;
    margin-left: -50px;
    animation: miao 1s;
}
@keyframes miao{
    0%{opacity: 1;top: 65px;display: block;}
    100%{opacity: 0;top: 60px;display: none;}
}

jquery部分

$(function(){
    //1.游戏规则的显示和隐藏
    $(".guize").click(function(){
        $(".guize1").stop().fadeIn(300);
    })
    //2.关闭按钮的点击
    $(".guize1 a").click(function(){
        $(".guize1").stop().fadeOut(300);
    })

    //3.开始游戏按钮的点击
    $(".start").click(function(){
        $(this).stop().fadeOut(100);
        //调用处理进度条的方法
        jdt();
        //调用灰太狼动画方法
        htl();
    })

    //4.监听重新开始按钮的点击
    $(".start1").click(function(){
        $(".mask").stop().fadeOut(100);
        jdt();//进度条动画
        htl();//图片动画
        //分数清0
        $(".fen").text("0");
    })

    //进度条方法
    function jdt(){
        //重新设置进度条宽度
        $(".jdt").css({
            width:"180px"
        })
        //开启定时器
        var timer = setInterval(function(){
            //拿到进度条当前的宽度
            var width = $(".jdt").width();
            //减少当前宽度
            width-=1;
            $(".jdt").css({
                width:width
            });
            //进度条是否走完?
            if(width<=0){
                //关闭定时器
                clearInterval(timer);
                //显示重新开始界面
                $(".mask").stop().fadeIn(100);
                //停止灰太狼动画
                stop_htl();
            }
        },100)
    }

    //灰太狼动画函数
    var img_timer
    function htl(){
        //1.定义两个数组保存灰太狼和小灰灰的图片
        var img1=["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 img2=["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 position=[
            {left:"100px",top:"115px"},
            {left:"20px",top:"160px"},
            {left:"190px",top:"142px"},
            {left:"105px",top:"192px"},
            {left:"19px",top:"221px"},
            {left:"202px",top:"212px"},
            {left:"120px",top:"274px"},
            {left:"30px",top:"294px"},
            {left:"207px",top:"296px"}
        ];

        //3.创建图片
        var image = $("");
        //4.设置图片随机显示的位置
        //随机0或1的数
        var random1 = Math.round(Math.random())==0?img1:img2;
        //随机0-8的数
        var random = Math.floor(Math.random()*9);
        image.css({
            position:"absolute",
            left:position[random].left,
            top:position[random].top
        });
        //5.设置图片的路径随机灰太狼或小灰灰
        window.img_index = 0;
        window.img_end = 5;
        img_timer = setInterval(function(){
            if(img_index>img_end){
                image.remove();
                clearInterval(img_timer);
                htl();
            }
            image.attr("src",random1[img_index]);
            img_index++;
        },150)
        
        //6.将图片添加到界面上
        $(".body").append(image);

        //7.调用处理游戏规则的函数
        game(image);

    }
    
    function game(image){
        
        image.one("click",function(){
            window.img_index = 6;
            window.img_end = 9;
            //拿到当前点击的图片的地址
            var this_img = $(this).attr("src");
            //根据图片判断是小灰灰还是灰太狼
            var flag = this_img.indexOf("h")>=0;
            //根据点击是否为灰太狼来判断分数加减
            if(flag){
                //加分
                $(".miao1").removeClass("miao");
                $(".fen").text(parseInt($(".fen").text()) +10);
                var jdt_width = $(".jdt").width()+10;
                $(".jdt").css("width",jdt_width+"px");
                $(".miao1").addClass("miao");
                setTimeout(function(){
                    $(".miao1").removeClass("miao");
                },1000)
                
                
            }else{
                //减分
                $(".fen").text(parseInt($(".fen").text()) -10);
            }
        })
    }

    //停止动画函数
    function stop_htl(){
        $(".htl_img").remove();
        clearInterval(img_timer);
    }



})

图片部分

点击下载

分享到:
  • 收藏