DOM案例-锅打灰太郎

2022-04-12 本文已影响0人张培跃
锅打灰太郎
查看效果
逐行代码注释如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锅打灰太郎-前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #app {
            position: relative;
            width: 320px;
            height: 480px;
            background:url("./img/game_bg.jpg");
            margin:0 auto;
        }
        .btn{
            position: absolute;
            top:200px;
            left:50%;
            font-size:40px;
            cursor: pointer;
            transform: translateX(-50%);
            color:white;
        }
        .btn:hover{
            color:red;
        }
        /*进度条*/
        #progress{
            position: absolute;
            left:63px;
            top:66px;
            width: 180px;
            height: 16px;
            background:url("./img/progress.png");
        }
        /*狼图片定位*/
        #wolf img{
            position: absolute;
        }
        #score{
            position: absolute;
            left:60px;
            top:10px;
            font-size: 20px;
            color:skyblue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--   进度条     -->
    <div id="progress"></div>
    <!--    灰太狼或小灰灰    -->
    <div id="wolf"></div>
    <div id="score">0</div>
    <!--  开始按钮 -->
    <div class="btn" id="start">开始</div>
    <!--    继续按钮    -->
    <div class="btn" id="continue">继续</div>
</div>
</body>
<script>
    // 伪代码：
    // 当用户将浏览器最小化，或重新打开一个视口，游戏应该中止，
    // 当用户再次进入游戏时，需要点击继续才可以。
    // 当游戏开始后，监听用户的行为：是否离开当前页面。
    // 如果离开需要让游戏暂停
    //    1- 将倒计时与狼动画定时器移除
    //    2- 显示 继续 按钮
    //    3- 点击继续，可以继续玩。
    //       3-1: 将倒计时与狼动画的定时器添加上
    //       3-2: 继续按钮隐藏掉。
    // 当游戏结束（时间到了）之后，记得清理监听离开事件

    // 获得点击按钮
    var startBtn = document.querySelector("#start");
    // 分数
    var score = document.querySelector("#score");
    // 得到进度条
    var progress = document.querySelector("#progress");
    // 得到包裹狼图片的元素
    var wolfBox = document.querySelector("#wolf");
    // 继续按钮
    var continueBtn = document.querySelector("#continue");
    continueBtn.style.display = "none";// 隐藏继续按钮
    // 存储倒计时定时器返回的值
    var countTime;
    // 狼出现在洞口的定位下标
    var wolfStartArr = [
        {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: "191px"}
    ];
    // 创建一个图片元素,狼
    var wolfImg = document.createElement("img");
    // 为继续按钮增加事件
    continueBtn.onclick = function(){
        // 计时器
        countTime = setInterval(countDown,10);
        // 创建狼的动画定时器
        wolfImg.timer = setInterval(wolfMove,200);
        // 隐藏继续按钮
        this.style.display = "none";
    }
    // 为按钮增加事件
    startBtn.onclick = function(){
        // 将分值设置为0
        score.innerHTML = 0;
        // 将时间进度条宽度设置为180px;
        progress.style.width = "180px";
        // 隐藏开始按钮
        this.style.display = "none";
        // 通过定时器控制进度条的宽度
        countTime = setInterval(countDown,10);
        // 调用产生狼的方法
        createWolf();

        // 判断用户是否离开 当前页面
        document.onvisibilitychange = function(){
            // 如果离开或进入到该页面会触发该函数。
            // hidden:离开 visible进入。
            // console.log(document.visibilityState);// hidden visible
            if(document.visibilityState === "hidden"){
                // 离开
                //    1- 将倒计时与狼动画计时器移除
                //    2- 显示 继续 按钮
                clearInterval(countTime);
                clearInterval(wolfImg.timer);
                continueBtn.style.display = "block";
            }
        }
    }
    // 为狼增加点击事件
    wolfImg.onclick = function(){
        this.state = 3;// 将动画的状态设置为3，说明锅打
        this.index = 5;
        if(this.wolfType === "h"){
            // 灰太狼加10
            score.innerHTML = score.innerHTML/1+10;
        }else{
            // 小灰灰减10
            score.innerHTML = score.innerHTML/1-10;
        }
    }
    // 去除选中的默认行为
    document.onmousedown = function (e){
        e.preventDefault();
    }
    // 倒计时
    function countDown(){
        // 每秒钟需要将进度条的宽度进行减法运行
        progress.style.width = (progress.getBoundingClientRect().width-0.3)+"px";
        // 判断是否倒计时结束
        if(progress.getBoundingClientRect().width-0.3 <= 0){
            document.onvisibilitychange = null;
            // 清除定时器
            clearInterval(countTime);
            // 清除狼动画
            clearInterval(wolfImg.timer);
            // 清除狼图片
            wolfBox.removeChild(wolfImg);
            // 显示按钮，并将按钮的文字修改为重新开始
            startBtn.innerHTML = "重新开始";
            startBtn.style.display = "block";
            console.log("游戏结束")
        }

    }
    // 让狼出现
    function createWolf(){

        // 获得狼出现洞穴的位置
        var wolfStart = wolfStartArr[getRandom(0,8)];
        // 左
        wolfImg.style.left = wolfStart.left;
        // 上
        wolfImg.style.top = wolfStart.top;
        // 通过随机函数生成1---100 数字，如果得到的数字<=80认为是灰太狼，否则是小灰灰
        wolfImg.wolfType = getRandom(1,100)<=80?"h":"x";
        // 指定初始图片位置
        wolfImg.index = 0;
        // 指定图片的状态 1- 出洞  2-回洞  3- 锅打
        wolfImg.state = 1;
        // 指定具体图片: 狼的类型+图片下标
        wolfImg.src = "./img/"+(wolfImg.wolfType+wolfImg.index)+".png";
        // 将图片放置到指定的位置
        wolfBox.appendChild(wolfImg);
        // 播放动画
        wolfImg.timer = setInterval(wolfMove,200);
    }
    // 狼进行移动，播放动画
    function wolfMove(){
        // 出洞
        if(wolfImg.state === 1){
            wolfImg.index++;
            // 当下标如果等于5，那么应该回洞
            if(wolfImg.index === 5) wolfImg.state = 2;
        }else if(wolfImg.state === 2){
            wolfImg.index--;
        }else if(wolfImg.state === 3){
            wolfImg.index++;
        }
        // 已经回洞了
        if(wolfImg.index<0 || wolfImg.index>9){
            // 清除定时器
            clearInterval(wolfImg.timer);
            // 将狼从wolfBox中移除。（注意：只是从容器中移除了）
            wolfBox.removeChild(wolfImg);
            createWolf();
            return;
        }
        wolfImg.src = "./img/"+(wolfImg.wolfType+wolfImg.index)+".png"
    }
    // 生成两个数之间的随机数字
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }

</script>
</html>
下载链接：https://pan.baidu.com/s/18RnubtDDgznJODOzdhjJXA
提取码：duan
DOM案例-锅打灰太郎

猜你喜欢

热点阅读
