自制狂拍灰太狼小游戏（HTML+CSS+JavaScript）

拥有你的心

明天想一想，好久出有翻开专客了，以是正在那里给各人上面我寒假的存“粮”。
那里保举各人一个前端开辟神器App：  HBuilder
后绝借会有多个同款系列：如便宜微专、便宜QQ音乐、便宜品劣购网站等等。
假如有需求进修系列的我偶然间的时分也会分享出去，如

另有挺多的，那里便纷歧一举例子了。
 从那里注释便开端了，先去看看代码目录，让各人有自信心本人也能做出去：

其实便三个代码需求本人写：1.css    、   1.js  战  狂拍灰太狼.html
看到那里，是否是以为很简朴呀！信赖您们皆能够。
正在那里阐明一下，因为我是抠图做出去的，以是不免没有那末美妙，以是各人便迁就一下吧！
再去看看游戏中的结果图：

 

 

 

 

 最初也各人最念要的源代码，立即给各人附上：

狂拍灰太狼.html


    
        
        
        
        
        
    
    
        
            0


            

            开端游戏
            游戏划定规矩

            
                游戏划定规矩:

                1.游戏工夫:60s

                2.拼脚速,殴挨灰太狼+10分

                3.殴挨小灰灰-10分

                [封闭]
            

            
                GAME OVER


                从头开端
            

        

    


1.css
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 320px;
    height: 480px;
    background: url("../img/game_bg.png") no-repeat 0 0;
    margin: 50px auto;
    position: relative;
}
.container>h1{
    color: white;
    margin-left: 60px;
}
.container>.progress{
    width: 119px;
    height: 16px;
    background: url("../img/progress.png") no-repeat 0 0;
    position: absolute;
    top: 58px;
    left: 60px;
}
.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: 90%;
    height: 20px;
    background: #ccc;
    position: absolute;
    bottom: 30px;
    left: 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;
}

1.js
$(function(){
    //游戏划定规矩面击
    $(".rules").click(function(){
        $(".rule").stop().fadeIn(100);
    });
    //封闭按钮面击
    $(".close").click(function(){
        $(".rule").stop().fadeOut(100);
    });
    //开端游戏面击
    $(".start").click(function(){
        $(this).stop().fadeOut(100);
        //处置进度条
        progressHandler();
        wolfAnimation1();
    });
    //从头开端面击
    $(".reStart").click(function(){
        $(".mask").stop().fadeOut(100);
        //处置进度条
        progressHandler();
        wolfAnimation1();
    });
    function progressHandler(){
        $(".progress").css({
            width: 119
        });
        var timer = setInterval(function(){
            var progressWidth = $(".progress").width();
            progressWidth -= 1;
            $(".progress").css({
                width: progressWidth
            });
            if(progressWidth  wolfIndexEnd){
                wolfImage.remove();
                clearInterval(wolfTimer);
                wolfAnimation1();
            }
            //图片内乱容
            wolfImage.attr("src" , wolfType[wolfIndex]);
            wolfIndex++;
        },300);
        //增加图片到界里
        $(".container").append(wolfImage);
        gameRules(wolfImage);
    }
    function wolfAnimation2(){
        $(".wolfImage").remove();
        clearInterval(wolfTimer);
    }
    function gameRules(wolfImage){
        wolfImage.one("click",function(){
            window.wolfIndex = 5;
            window.wolfIndexEnd = 9;
            var src = $(this).attr("src");
            var flag = src.indexOf("h") >= 0;
            // alert(flag);
            if(flag){
                $(".score").text(parseInt($(".score").text()) + 10);
            }else{
                $(".score").text(parseInt($(".score").text()) - 10);
            }
        });
    }
});
便宜小游戏到那里便完毕了，下次再会啦！

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！