小游戏------锅打灰太狼

最新推荐文章于 2022-08-19 18:57:41 发布

Anna_ll

最新推荐文章于 2022-08-19 18:57:41 发布

阅读量745

点赞数 1

分类专栏： JavaScript 小游戏

本文链接：https://blog.csdn.net/Anna_ll/article/details/52474866

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

小游戏

1 篇文章 0 订阅

订阅专栏

这里写图片描述

JS思路

1.随机函数:
因为狼出现的坑的位置是随机的,灰太狼和小灰灰的出现也是随机所以将随机的功能单独写成一个函数
2.将9个坑的位置用json数据的形式存到一个数组里

var arrPos = [{l: "98px",t: "115px"}, {l: "17px",t: "160px"}, {l: "15px",t: "220px"}, {l: "30px",t: "293px"}, {l: "122px",t: "273px"},{l: "207px",t: "295px"}, {l: "200px",t: "211px"}, {l: "187px",t: "141px"}, {l: "100px",t: "185px"}];

因为图片大小正好是320*480
3.从点击开始按钮开始写,给开始按钮加点击事件
4.因为灰太狼是一直不断出现的所以当点击开始按钮后开始计时器
5.计时器内创建灰太狼或者小灰灰的图片通过图片的src显示出来
6.通过while死循环使狼不能两次出现在同一个坑中
7.判断不重复后将图片显示在固定的坑中
8.新建一个计时器循环狼从坑中不断出现的过程
9.同样的思路循环狼向下的动画,当狼消失的时候同时,从文本流中删除图片
10.给穿件的狼的图片加点击事件(但不能重复点击)
11.当触发点击事件时清除两个出现狼的计时器同时创建狼被打的计时器
12.将计算分数的功能单独写成一个函数打到一次灰太狼加10分,打到小灰灰减10分
13.创建倒计时的计时器,当进度条减到0时将分数返回同时刷新屏幕
14.进度条减小是将定位好的图片宽度不断减小

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #outer {
                background: url(img/game_bg.jpg) no-repeat;
                width: 320px;
                height: 480px;
                position: relative;
                margin: 0 auto;
            }

            #scoring {
                position: absolute;
                font-weight: bold;
                font-size: 20px;
                color: white;
                left: 65px;
                top: 15px;
            }

            #countDown {
                position: relative;
                background: url(img/progress.png) no-repeat;
                width: 180px;
                height: 16px;
                left: 63px;
                top: 66px;
            }

            #wolfs img {
                position: absolute;
            }

            #menu {
                position: absolute;
                width: 320px;
                text-align: center;
                top: 200px;
                left: 0;
            }

            #start {
                line-height: 50px;
                font-size: 30px;
                font-weight: bold;
                color: cornflowerblue;
                text-shadow: 0 0 5px cornflowerblue;
                display: block;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="outer">
            <!--分数-->
            <div id="scoring">0</div>
            <!--倒计时-->
            <div id="countDown"></div>
            <!--狼们-->
            <div id="wolfs">

            </div>
            <div id="menu">
                <a href="###" id="start">开始</a>
            </div>
        </div>

        <script type="text/javascript">
            //随机函数(坑,狼的种类)
            function rand(min, max) {
                return parseInt(Math.random() * (max - min + 1) + min);
            }
            //分数
            var scoring = document.getElementById("scoring");
            //倒计时
            var countDown = document.getElementById("countDown");
            //狼窝
            var wolfs = document.getElementById("wolfs");
            //装开始按钮的容器
            var menu = document.getElementById("menu");
            //开始按钮
            var start = document.getElementById("start");
            var arrPos = [{l: "98px",t: "115px"}, {l: "17px",t: "160px"}, {l: "15px",t: "220px"}, {l: "30px",t: "293px"}, 
            {l: "122px",t: "273px"},{l: "207px",t: "295px"}, {l: "200px",t: "211px"}, {l: "187px",t: "141px"}, {l: "100px",t: "185px"}];

            //计分函数
            function scoringFn (obj) {
                var scoringNum = parseInt(scoring.innerHTML);
                if (obj.type == "h") {
                    scoring.innerHTML = scoringNum + 10;
                } else{
                    scoring.innerHTML = scoringNum - 10;
                }
            }
            //倒计时
            var countDownTimer = null;
            var countDownWidth = countDown.offsetWidth;
            var countDownBol = false;
            countDownTimer = setInterval(function () {
                if (countDownBol) {
                    countDownWidth--;
                    if (countDownWidth <= 0) {
                        clearInterval(createWolfsTimer);
                        clearInterval(countDownTimer);
                        var score = scoring.innerHTML;
                        alert("游戏结束您获得了" + score + "分");
                        //刷新屏幕
                        window.location.reload();
                    }
                    countDown.style.width = countDownWidth + "px";
                }
            },150);
            //建狼的计时器
            var createWolfsTimer = null;
            start.onclick = function () {
                menu.style.display = "none";
                countDownBol = true;
                createWolfsTimer = setInterval(function () {
                    //创建狼
                    var wolf = new Image();
                    //随机狼的类型(h有80%出现的概率,其余为小灰灰的出现概率)
                    wolf.type = rand(0,100) < 80 ? "h" : "x";
                    //索引
                    wolf.index = 0;
                    //图片地址(先把第一个图片显示出来)
                    wolf.src = "img/" + wolf.type + wolf.index + ".png";
                    //找坑的位置
                    //找到狼窝里的所有img标签.
                    var childs = wolfs.children;
                    //下面的两个东西是循环内使用的
                    var bol = true;
                    var r = 0;//装我们找到的没有狼的坑的坐标
                    //使坑不重复
                    while (bol){
                        r = rand(0,arrPos.length-1);
                        for (var i=0;i<childs.length;i++) {
                            if (childs[i].offsetLeft == parseInt(arrPos[r].l)) {
                                break;
                            }
                        }
                        if (i == childs.length) {
                            bol = false;
                        }
                    }
                    //交出循环后的坐标
                    wolf.style.left = arrPos[r].l;
                    wolf.style.top = arrPos[r].t;
                    wolfs.appendChild(wolf);
                    //狼向上的动画
                    wolf.timer = setInterval(function () {
                        wolf.index++;
                        if (wolf.index > 4) {
                            clearInterval(wolf.timer);
                            wolf.downFn();
                        }
                        wolf.src = "img/" + wolf.type + wolf.index + ".png";
                    },150);
                    //匿名函数将函数赋给一个变量
                    wolf.downFn = function () {
                        wolf.downTimer = setInterval(function () {
                            wolf.index--;
                            if (wolf.index <= 0) {
                                clearInterval(wolf.downTimer);
                                //让狼消失
                                wolfs.removeChild(wolf);
                            }
                            wolf.src = "img/" + wolf.type + wolf.index + ".png";
                        },150);
                    }
                    //不能重复点击
                    wolf.wolfClick = true;
                    wolf.onclick = function () {
                        if (wolf.wolfClick == false) {
                            return;
                        }
                        wolf.wolfClick = false;
                        //调用计分函数
                        scoringFn(wolf);
                        wolf.index = 5;
                        //干掉两个出狼的动画
                        clearInterval(wolf.timer);
                        clearInterval(wolf.downTimer);
                        wolf.clickTimer = setInterval(function () {
                            wolf.index++;
                            if (wolf.index > 8) {
                                clearInterval(wolf.clickTimer);//不能用this
                                wolfs.removeChild(wolf);
                            }
                            wolf.src = "img/" + wolf.type + wolf.index + ".png";
                        },150);
                    }
                },500);
            }
        </script>

    </body>

</html>

Anna_ll

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小游戏------锅打灰太狼

JS思路1.随机函数: 因为狼出现的坑的位置是随机的,灰太狼和小灰灰的出现也是随机所以将随机的功能单独写成一个函数 2.将9个坑的位置用json数据的形式存到一个数组里var arrPos = [{l: "98px",t: "115px"}, {l: "17px",t: "160px"}, {l: "15px",t: "220px"}, {l: "30px",t: "293px"
复制链接

扫一扫

专栏目录