js打地鼠

Posted 2021-10-11 毕竟人生有插曲i

js经典项目打地鼠如何利用js来实现打地鼠呢？

首先是游戏页面的制作

  <!-- 游戏背板 -->
    <div class=" backdrop">
        <!-- 游戏积分器 -->
        <div class="score">0</div>
        <!-- 游戏计时器 -->
        <div class="timebar"></div>
        <!-- 狼 -->
        <div class="wolves"></div>
        <!-- 开始游戏 -->
        <div class="menu1">
            <div class="start">开始游戏</div>
            <div class="intro">游戏说明</div>
        </div>
        <!-- 游戏说明介绍 -->
        <div class="introGame">
            <p>游戏说明</p>
            <p>
                在30秒内, 尽可能多的去打灰太狼, 每打1只灰太狼加10分, 每打1只小灰灰减10分, 请在30秒内尽可能的多得分
            </p>
        </div>
        <!-- 游戏结束 -->
        <div class="menu2">
            <div class="gameOver">游戏结束</div>
            <div class="newStart">重新开始</div>
        </div>
    </div>

下一步写css加点样式让页面变的更好看

<style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 背景 */
        .backdrop {
            width: 320px;
            height: 480px;
            background: url("image/game_bg.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            margin: 50px auto;
            position: relative;
        }

        .score {
            width: 100px;
            line-height: 20px;
            font-size: 15px;
            color: white;
            font-weight: bolder;
            background: red;
            position: absolute;
            top: 15px;
            left: 58px;
        }

        /* 计时器 */
        .timebar {
            width: 180px;
            height: 16px;
            background: url("image/progress.png");
            position: absolute;
            top: 66px;
            left: 63px;
        }

        /* 设置狼 */
        .wolvesDiv {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 开始游戏 */
        .menu1,
        .menu2 {
            width: 100%;
            height: 200px;
            position: absolute;
            left: 0;
            top: 190px;
        }

        .menu1 div,
        .menu2 div {
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: orange;
        }

        .menu2 {
            display: none;
        }

        /* 游戏说明 */
        .introGame {
            width: 300px;
            height: 200px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            line-height: 40px;
            position: absolute;
            left: 10px;
            top: 140px;
            display: none;
        }

        .introGame p:nth-child(2) {
            text-indent: 32px;
        }
    </style>

然后重头戏来了

整体思路

先要写入的标签

再建立每个坑的位置的二维数组

在一个函数里面写狼的所有要干的事情

在另外一个函数写狼消失的函数

然后创建多个狼函数

定义当狼点击后判断狼的类型分数的操作

<script type="text/javascript">
    var score = document.querySelector('.score');
    var timebar = document.querySelector('.timebar');
    var wolves = document.querySelector('.wolves');
    var menu1 = document.querySelector('.menu1');
    var start = document.querySelector('.start');
    var intro = document.querySelector('.intro');
    var introGame = document.querySelector('.introGame');
    var menu2 = document.querySelector('.menu2');
    var gameOver = document.querySelector('.gameOver');
    var newStart = document.querySelector('.newStart');
    var posArr = [
        ['98px', '115px'],
        ['17px', '160px'],
        ['15px', '220px'],
        ['30px', '293px'],
        ['122px', '273px'],
        ['207px', '295px'],
        ['200px', '211px'],
        ['187px', '141px'],
        ['100px', '185px']];//二维数组[[left,top],[left,top]...]
    var carateTimer;//创建多个狼的计时器；
    var score = 0;//记录分数；

    // 游戏说明
    intro.onclick = function () {
        introGame.style.display = 'block';
    }
    introGame.onclick = function () {
        this.style.display = 'none';
    }

    //游戏开始
    start.onclick = function () {
        menu1.style.display = 'none';
        //倒计时开始；
        changeTiming();
        //创建狼
        creatMoreWolvev()
    }

    function changeTiming() {
        var timer = setInterval(function () {
            var timeWidth = timebar.offsetWidth;
            //当timeDiv的宽度小于0时需要停止计时器；
            if (timeWidth > 0) {
                timebar.style.width = timeWidth - 1 + 'px';
            } else {
                clearInterval(timer);
                // 游戏结束
                gameOverFn();
            }
        }, 100);
    }

    //游戏结束函数
    function gameOverFn() {
        //停止狼的计时器
        clearInterval(carateTimer);
        //清除页面所有的计时器；
        var timer = setInterval(function () { }, 1000);
        for (i = 0; i < timer; i++) {
            clearInterval(i)
        }
        //显示游戏界面；
        menu2.style.display = 'block';
    }

    //先创建一个狼；
    function createWolf() {
        var wolf = new Image();
        wolf.type = randomFn(1, 100) > 80 ? 'x' : 'h';
        wolf.index = 0;//狼显示图片的下标；
        wolf.src = 'image/' + wolf.type + wolf.index + '.png';
        wolf.clickAble = true;//狼能否被点击，默认是true；
        wolf.style.position = 'absolute';
        //随机狼的位置的下标；
        var posInd;
        var isHave = true;
        //选择没有狼的位置
        while (isHave) {
            posInd = randomFn(0, 8);
            var wolvesArr = wolves.children;
            for (var i = 0; i < wolvesArr.length; i++) {
                if (wolvesArr[i].style.left == posArr[posInd][0]) {
                    //表示该位置没有狼，需要重新随机
                    break;
                }
            }

            if (i == wolvesArr.length) {
                //表示该位置上没有狼，则结束while循环
                isHave = false;
            }
        }
        wolf.style.left = posArr[posInd][0];
        wolf.style.top = posArr[posInd][1];
        wolves.appendChild(wolf);
        return wolf;
    }
    function randomFn(n1, n2) {
        return Math.round(Math.random() * (n2 - n1) + n1);
    }

    //狼显示和消失的动画；
    function wolfAnimateFn() {
        var wolf = createWolf();
        //狼显示的动画；
        wolf.appearTimer = setInterval(function () {
            if (wolf.index < 5) {
                wolf.index++;
                wolf.src = 'image/' + wolf.type + wolf.index + '.png';
            } else {
                //停止狼显示的动画,创建狼消失的动画；
                clearInterval(wolf.appearTimer);
                wolf.disappearTimer = setInterval(function () {
                    if (wolf.index > 0) {
                        wolf.index--;
                        wolf.src = 'image/' + wolf.type + wolf.index + '.png';
                    } else {
                        wolf.remove();
                        //停止狼消失动画的计时器；
                        clearInterval(wolf.disappearTimer);
                    }
                }, 150);
            }
        }, 150);
        // 执行狼被打的函数
        clickWolf(wolf);
    }

    //创建多头狼
    function creatMoreWolvev() {
        carateTimer = setInterval(wolfAnimateFn, 1000);
    }
    // 狼被点击的函数
    function clickWolf(wf) {
        wf.onclick = function () {
            if (wf.clickAble) {
                // 停止狼出现和消失的计时器
                clearInterval(wf.appearTimer);
                clearInterval(wf.disappearTimer);
                // 创建狼被打的动画
                wf.index = 6;
                wf.src = 'image/' + wf.type + wf.index + '.png';
                wf.clickTimer = setInterval(function () {
                    if (wf.index < 9) {
                        wf.index++;
                        wf.src = 'image/' + wf.type + wf.index + '.png';
                    } else {
                        clearInterval(wf.clickTimer);
                        wf.remove();
                    }
                }, 200);
                // 狼被点击后，判断点击狼的类型
                if (wf.type == 'h') {
                    score += 10;
                } else {
                    score -= 10;
                }
                score.innerText = score;
            }
            wf.clickAble = false;//禁止狼再次被打
        }

    }
    //定义游戏结束函数

    //重新开始
    newStart.onclick = function () {
        // 强制刷新当前页面
        history.go(0);
    }

</script>