锅打灰太狼H5小游戏

CSS部分代码：

*{
    padding: 0;
    margin: 0;
}
body{
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
img{
    border: none;
}
li{
    list-style: none;
}
a{    
    text-decoration: none;
}
a:hover { 
    text-decoration: underline; 
}
button{
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 5%;
    background: #F06060;
    color: #fff;
}
/*wrap*/
#wrap{
    position: relative;
    left: 0;
    top: 0;
    width: 320px;
    height: 480px;
    margin: auto;
    background: url("../img/game_bg.jpg") no-repeat;
    background-size:100% 100%;
}
#progress{
    position: absolute;
    top: 66px;
    left: 63px;
    width: 180px;
    height: 16px;
    border-radius: 8px;
}
#cover{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    z-index: 20;
    left: 0;
    top: 0;
}
#loading {
    position: absolute;
    width: 10%;
    left: 45%;
    top: 46.666%;
    z-index: 30;
}
#loading img{
    width: 100%;
}
#start {
    display: none;
    position: absolute;
    width: 30%;
    height:6%;
    left:35%;
    top: 47%;
    z-index: 30;
}
#beginGame{
    width: 100%;
    height: 100%;    
    font-size: 1.2em;
    line-height: 2;
}
#stopGame{
    display: none;
    position: absolute;
    left: 35%;
    bottom: 2%;
    width: 30%;
    height: 6%;
    font-size: 1.2em;
    line-height: 2;
}
#end{
    display: none;
    position: absolute;
    width: 50%;
    height: 30%;
    left: 25%;
    top: 35%;
    z-index: 40;
}
#beginGame:hover{
    background: #fa6a6a;
}
.holes{
    display: none;
    cursor: pointer;
}
.end_txt{
    text-align: center;
    height: 20%;
    line-height: 1;
    font-size: 1.8em;
    font-weight: bold;
    color: #F06060;
}
.end_score{
    height:20%;
    width: 90%;
    padding-left: 10%;
    line-height: 1.5;
    color: #fff;
    margin-top: 10%;
}
.end_btns{
    width: 100%;
    height: 20%;
    margin-top: 10%;
}
.end_btns button{
    height: 100%;
    width: 45%;
    line-height: 2.4;
}
.end_btns button:hover{
    background: #fa6a6a;
}
#playAgain{
    margin-left: 20%;
}
#score{
    position: absolute;
    color: #fff;
    font-size: 1.43em;
    top: 0;
    width: 80%;
    left: 20%;
    height: 9.17%;
    line-height: 2.564;
}    
#time{
    color: #fff;
    font-size: 1.17em;
    width: 72%;
    left: 28%;
    line-height: 1.426;
    height: 4.17%;
    position: absolute;
    top: 13.3%;
}
.holes{
    width: 33.75%;
    height: 21.04%;
    position: absolute;
}
#hole1{
    left: 30%;
    top: 23.96%;
}
#hole2{
    left: 5%;
    top:33.33%;        
}
#hole3{
    left: 58.13%;
    top: 29.58%;
}
#hole4{
    left: 4.875%;
    top: 45.83%;
}
#hole5{
    left: 31.875%;
    top: 39.583%;
}
#hole6{
    left: 61.875%;
    top:43.75%;
}
#hole7{
    left: 8.75%;
    top: 61.042%;
}
#hole8{
    left: 36.25%;
    top: 56.67%;
}
#hole9{
    left: 63.75%;
    top: 61.458%;
}

JS部分代码：

//获取元素
    var score = document.getElementById('score');
    var time = document.getElementById("time");
    var cover = document.getElementById('cover');
    var start = document.getElementById("start");
    var end = document.getElementById('end');
    var beginGame = document.getElementById("beginGame");
    var playAgain = document.getElementById('playAgain');
    var stopGame =  document.getElementById("stopGame");
    var myScore = document.getElementById('myScore');
    var loading = document.getElementById("loading");
    var initScore = 000;//初始分数
    var showTimer = null;//初始化定时器
    var hideTimer = null;
    var imgArr = ["h0","h1","h2","h3","h4","h5","h6","h7","h8","h9","x0","x1","x2","x3","x4","x5","x6","x7","x8","x9"];//图片数组
//点击开始
    beginGame.onclick = beginFn;
    function beginFn(){
            cover.style.display = "none";
            start.style.display =  "none";
            end.style.display = "none";
            stopGame.style.display = "block";
            setTime();//开启计时器
            var t1 = 500;            //狼出现间隔
            iniTimer =  setInterval(
                function(){
                    var roleRan = Math.random();
                    if(roleRan<0.28){
                        showWolf("x");//小狼出现几率
                        beatRole("x");
                    }else{
                        showWolf("h");//大狼出现几率
                        beatRole("h");
                    }                
            },t1);
    }
//预加载图片
    window.onload = loadingFn;
    function loadingFn(){
        var index = 0;
        for (var i = 0; i < imgArr.length; i++) {
            var img = new Image();
            img.src ="img/" + imgArr[i]+".png";
            img.onload = function  () {
                index++;
                if (index==imgArr.length) {
                    start.style.display = "block";
                }    
            };
        }
    };
//暂停
    stopGame.onclick = stopFn;
    function stopFn(){        
        clearInterval(Remain);
        clearInterval(iniTimer);
        if(!showTimer){//判断是否运行完再清定时器，否则出错，下同
            clearInterval(showTimer);
        }
        if(!hideTimer){
            clearInterval(hideTimer);
        }    
        cover.style.display = "block";
        end.style.display = "block";
        stopGame.style.display = "none";    
        myScore.innerHTML = initScore;
    }
//清空背景    
     function initFn(){
         for(var i= 1;i<10;i++){
            var holes = "hole"+i;
            var holeDiv = document.getElementById(holes);
            holeDiv.style.background = "none";
        }
     }
 //重新开始
     playAgain.onclick = function (){
         remainT = 60;//重置时间
         initScore =000;//重置分数
         score.innerHTML = initScore;
         myScore.innerHTML = initScore;
         initFn();
         beginFn();
     }
//计时器
    var remainT = 60;//游戏时长
    function setTime (){    
         Remain = setInterval(function (){
            remainT-=0.1;
            shortT = remainT.toFixed(2);
            time.innerHTML = shortT + " 秒";        
            if(shortT==0){
                //结束清空所有定时器
                clearInterval(Remain);
                clearInterval(iniTimer);
                clearInterval(showTimer);
                clearInterval(hideTimer);
                cover.style.display = "block";
                end.style.display = "block";
            }
            myScore.innerHTML = initScore;
        },50);
    }
//击打
    function beatRole(r){
        for(var i= 1;i<10;i++){
            var holes = "hole"+i;
            var holeDiv = document.getElementById(holes);
            holeDiv.index = 0;//判断是否点击
            //鼠标点击也可以
            holeDiv.onclick = function (){
                if((this.style.display=="block" || this.style.background !="none")&&this.index==0){　　//已显示且背景不为空，和未点击过的
                    for(var j=6;j<10;j++){
                        this.style.background = "url(img/" + r + j + ".png)";
                    }
                    if(r=="h"){//灰太狼
                        initScore += 10;                    
                    }else if(r=="x" && initScore!=0){//小狼
                        initScore-=10;
                    }
                    score.innerHTML = initScore;
                    this.index=1;//防止重复点击
                }
            }
        }
    }
//出现,r代表出现的角色
    function showWolf(r){    
        var i = 0;
        var ranNum = Math.floor(Math.random()*9)+1;//获取1到9的随机数
        var ranId = "hole" + ranNum ;//divID
        var showDiv = document.getElementById(ranId);
        showDiv.style.display = "block";        
        showTimer = setInterval(
            function(){
                var imgSrc = "url(img/"+ r + i +".png)";            
                if(i<6){
                    showDiv.style.background = imgSrc;
                    i++;                
                }            
                if(i==6){
                    clearInterval(showTimer);
                    hideWolf();
                }
        },50);
        //隐藏
        function hideWolf(){
            setTimeout(
                function(){
                    var j=5;
                    hideTimer = setInterval(
                        function(){
                            var imgSrc = "url(img/"+ r + j +".png)";            
                            if(j<6){
                                showDiv.style.background = imgSrc;
                                j--;                
                            }            
                            if(j<0){
                                showDiv.style.background = "none";
                                showDiv.style.display = "none";
                                clearInterval(hideTimer);                            
                            }
                    },50);
            },400);        
        }
        
    }

HTML部分代码：

<div id="wrap">
        <div id="score">000</div>
        <div id="time">60秒</div>
        <div id="hole1" class="holes"></div>
        <div id="hole2" class="holes"></div>
        <div id="hole3" class="holes"></div>
        <div id="hole4" class="holes"></div>
        <div id="hole5" class="holes"></div>
        <div id="hole6" class="holes"></div>
        <div id="hole7" class="holes"></div>
        <div id="hole8" class="holes"></div>
        <div id="hole9" class="holes"></div>
        <!--开始覆盖-->
        <div id="cover"></div>
        <div id="start">
            <button id="beginGame">开始游戏</button>
        </div>
        <div id="end">
            <div class="end_txt">GAME OVER！</div>
            <div class="end_score">
                你的得分是：<span id="myScore"></span>
            </div>
            <div class="end_btns">
                <button id="playAgain">重新开始</button>
            </div>
        </div>
        <button id="stopGame">暂停游戏</button>
    </div>

示例图片：

 

百度网盘完整文件下载地址：http://pan.baidu.com/s/1jIltjCU