H5 js锅打灰太狼

作者: 三叶松 | 来源:发表于2016-08-11 20:21 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 标签样式初始化 */
body{margin:0;padding:0;background:#fff;font-size:14px;font-family:Arial,Helvetica,'STHeiti','Microsoft YaHei','sans-serif'}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
img{border:0;}
ul,li{list-style-type:none;}
a{color:#00007F;text-decoration:none;}
a:hover{text-decoration:none;}

/* 自定义样式 */
#outer{
    position: relative;
    width: 320px;
    height: 480px;
    background: url("images/game_bg.jpg") 0 0 no-repeat;
    margin: 50px auto 0;
}
    /分数，进度条部分/
#score_box{
    position: absolute;
    top: 13px;
    left: 65px;
    font-weight: bold;
    font-size: 16px;
    color: white;
}

#progress_bar{
    position: absolute;
    top: 66px;
    left: 63px;
    width: 180px;
    height: 16px;
    background: url("images/progress.png") 0 0 no-repeat;
}

#wolf_box img{
    position: absolute;
}
    /菜单部分/
#menu{
    position: absolute;
    top: 200px;
    left: 0;
    width: 320px;
    text-align: center;
}

#start,#handle,#gameOver{
    display: block;
    line-height: 50px;
    font-size: 30px;
    font-weight: bold;
    color: #f60;
    text-shadow: 0 0 5px #ffff00;
    text-decoration: none;
}
   /游戏结束部分/
#gameOver{
    position: absolute;
    top: 150px;
    left: 0;
    width: 320px;
    text-align: center;
    display: none;
}
#startAgain{
    position: absolute;
    top: 220px;
    left: 100px;
    width: 120px;
    font-size: 30px;
    font-weight: bold;
    color: #f60;
    text-align: center;
    display: none;
}
#leave{
    position: absolute;
    top: 260px;
    left: 100px;
    width: 120px;
    font-size: 30px;
    font-weight: bold;
    color: #f60;
    text-align: center;
    display: none;
}
</style>

</head>
<body>

<div id="outer">

<div id="score_box">0</div>

<div id="progress_bar"></div>

<div id="wolf_box"></div>

<div id="menu">
<a href="javascript:;" id="start">开始</a>
<a href="javascript:;" id="handle">游戏操作说明</a>
</div>

<div id="gameOver">game over!</div>
<div id="startAgain">重新开始</div>
<div id="leave">退出游戏</div>
</div>

   <!-- 行为-->
<script>
           //获取元素
    var scoreBox = document.getElementById("score_box");
    var progressBar = document.getElementById("progress_bar");
    var wolfBox = document.getElementById("wolf_box");
    var menu = document.getElementById("menu");
    var start = document.getElementById("start");
    var gameover = document.getElementById("gameOver");
    var startAgain=document.getElementById("startAgain");
    var oLeave=document.getElementById('leave');

    // 开始游戏定时器
    var createWolfTimer = null;

    // 灰太狼出现的位置
    var arrayPosition = [
    {left:"98px",top:"115px"},
    {left:"17px",top:"160px"},
    {left:"15px",top:"220px"},
    {left:"30px",top:"293px"},
    {left:"122px",top:"273px"},
    {left:"207px",top:"295px"},
    {left:"200px",top:"211px"},
    {left:"187px",top:"141px"},
    {left:"100px",top:"185px"}
    ];

    // 随机函数
    function rand(min,max){
        return parseInt(Math.random() * (max - min)) + min;
    }

    //创建灰太狼
    function createWolf(){
        // 创建灰太狼元素对象
        var wolf = document.createElement("img");
        // 出现灰太狼和小灰灰的几率
        wolf.type = rand(0, 100) > 80 ? "x" : "h";
        // 初始化图片下标
        wolf.index = 0;
        // 根据随机值的结果，设置显示的图片(此处下标初始为0，也就是默认显示灰太狼或小灰灰的第一张图)
        // wolf.src = "images/" + wolf.type + wolf.index + ".png";


        // 获取所有狼
        var wolfs = wolfBox.children;
        // 是否出现多只狼
        var bol = true;

        // 循环处理狼出现的位置
        while (bol) {
            //随机生成狼出现的位置
            var randomPos = rand(0, arrayPosition.length);
            for (var i = 0; i < wolfs.length; i++) {
                // 判断每个狼的图片左值 是否等同于数组中随机得到的值
                if (wolfs[i].offsetLeft == parseInt(
                    arrayPosition[randomPos].left)) {
                    //当狼的坐标确认后，退出循环
                    break;
                }
            }
            if (i == wolfs.length) {
                //当狼的数量达到后，退出循环
                bol = false;
            }
        }

        //设置生成狼的坐标
        wolf.style.left = arrayPosition[randomPos].left;
        wolf.style.top = arrayPosition[randomPos].top;

        //添加到容器中
        wolfBox.appendChild(wolf);

        return wolf;
    }

    //游戏开始
    function gameStartFn(){
        // 隐藏元素
        menu.style.display = "none";
        gameover.style.display = "none";

        // 开始计时
        progressFn();

        // 定时器,让狼每秒出现一次
        createWolfTimer = setInterval(function() {
            // 获取创建出来的狼的图片位置
            var wolf = createWolf();

            // 灰太狼出现
            wolf.appearTimer = setInterval(function() {
                wolf.index++;
                // 如果出现到击打前最后一个状态，
                // 清除出现定时器，同时调用狼消失的函数
                if (wolf.index > 4) {
                    clearInterval(wolf.appearTimer);
                    wolf.disappear();
                }
                // 将数据源赋给wolf对象的src
                wolf.src = "images/" + wolf.type + wolf.index + ".png";
            }, 150);

            //灰太狼消失
            wolf.disappear = function() {
                // 对象的自定义属性用于记录定时器
                wolf.disappearTimer = setInterval(function() {
                    wolf.index--;
                    //消失到最后一个状态时，清空一次狼的容器
                    if (wolf.index <= 0) {
                        // 如果当前容器中的长度大于0,那么不清除容器.
                        // 否则清除容器
                        wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
                        // 清除定时器
                        clearInterval(wolf.disappearTimer);
                    }
                    wolf.src = "images/" + wolf.type + wolf.index + ".png";
                }, 150);
            };
            // 击打灰太狼
            beatWolf(wolf);
        },800);
    }

    createWolf();

    // 进度条
    function progressFn(){
        // 获取当前进度条的宽度 ==> 180
        var percent = progressBar.offsetWidth;
        // 循环定时器 处理进度条
        var percentTime = setInterval(function(){
            // 每100毫秒,我让percent - 1
            percent = percent - 1;
            if (percent <= 0) {
                // 游戏结束
                gameOverFn();
                // 清除定时器
                clearInterval(percentTime);
            }
            // 更改进度条的宽度
            progressBar.style.width = percent + "px";
            // 通过时间控制在多少秒内,执行完180像素宽
            // 100 * 180 / 1000 = 18秒
        },100);
    }

    // 游戏结束
    function gameOverFn(){
        // 游戏结束 展示出来
        gameover.style.display = "block";
        startAgain.style.display="block";
        oLeave.style.display="block";
        // 清除创建灰太狼的方法
        clearInterval(createWolfTimer);
    }

    // 击打灰太狼
    function beatWolf(wolf){
        // 先默认狼是未被击打的
        wolf.beat = false;
        // 添加击打狼的点击事件
        wolf.onclick = function(){
            // 判断条件,如果狼是被打的,那么直接返回
            if (wolf.beat == true) {
                return;
            }

            // 上面的代码如果不走,那么就需要将击打状态为true
            wolf.beat = true;

            // 击打了之后,需要计分
            scoringFn(wolf);

            // 重置
            // 第五张图是狼完全出现的状态
            wolf.index = 5;

            // 清除狼出现时的定时器
            clearInterval(wolf.appearTimer);
            // 清除狼消失时的定时器
            clearInterval(wolf.disappearTimer);

            // 击打效果
            wolf.clickTimer = setInterval(function(){
                wolf.index++;
                // 如果狼的图已经进入到最后一个状态.
                if (wolf.index >= 9) {
                    // 清除定时器
                    clearInterval(wolf.clickTimer);
                    // 判断是否清空一次狼的容器
                    wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
                    // 结束代码的执行
                    return;
                }
                // 将随机的得到的数据源赋给对象src
                wolf.src = "images/" + wolf.type + wolf.index + ".png";
            },150);
        }
    }


    // 计分器
    function scoringFn(obj){
        // 获取当前积分对象的值
        var scoringNum = parseInt(scoreBox.innerHTML);
        // 判断如果打到的是灰太狼,那么积分+10;
        if (obj.type == "h") {
            scoreBox.innerHTML = scoringNum + 10;
        }else{
            // 打到小灰灰,积分-10;
            scoreBox.innerHTML = scoringNum - 10;
        }
    }
    // 退出游戏
    oLeave.onclick=function(){
        outer.style.display="none";
    }

    // 重新开始
    startAgain.onclick=function(){
        gameOver.style.display="none";
        startAgain.style.display="none";
        oLeave.style.display="none";
        // 分数清零
        scoreBox.innerHTML=0;
        // 红色计时条出现
        progressBar.style.width=180+'px';
        // 调用开始游戏方法
        gameStartFn();
    }

    // 开始游戏
    start.onclick = function(){
        // 调用开始游戏方法
        gameStartFn();
    }
</script>

</body>

</html>

H5 js锅打灰太狼

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读