H5 js锅打灰太狼


<!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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容