灰太狼系列—打地鼠(内含源码) inscode中的直观运行

悠悠 2023-10-13 22:06 58阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★[前端炫酷代码分享][Link 3]  
> ★ ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  认识一下inscode
 *  先看运行效果
 *   *   *  看查源码内容
         *  获取项目
 *  代码设计
 *   *   *  先确定界面布局以及开始
         *  确定9个坑位
         *  将图片放置进去
         *  游戏开始
         *  游戏动画
         *  游戏机制设置
     *  小结

# 认识一下inscode #

![在这里插入图片描述][ceb7297d53444c67ac900201cc3b721f.png]  
CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。

Inscode支持多种编程语言，包括Java、Python、C++等，同时也支持编写HTML、CSS和JavaScript代码。它提供了完整的运行环境，让代码在网页上直接运行并输出结果，即时调试，方便快捷。同时，Inscode还提供了分享功能，可以轻松地将代码分享给其他人。

使用Inscode，只需访问其网站[https://inscode.csdn.net/][https_inscode.csdn.net]  
个人主页：[why\_does\_it\_work][why_does_it_work]

# 先看运行效果 #

![在这里插入图片描述][22c242737a63478287cee5392fa2c005.png]  
这里可以直接**看查源码内容**，**刷新**，最后一个是**放大跳转网页**

### 看查源码内容 ###

![在这里插入图片描述][2028ea2a1ce6438ca4c36859802144c9.png]

### 获取项目 ###

[点击跳转链接][Link 6]  
![在这里插入图片描述][c533e5322ad64e12806bdb39978056d2.png]  
点击右上角 Fork  
![j][]  
即可一键获取项目

# 代码设计 #

### 先确定界面布局以及开始 ###

<div class="app clearfix" id="app">
            <div class="hp"></div>
            <div class="score">0</div>
            <div class="rules">
                <a href="javascript:;">游戏规则</a>
            </div>
            <div class="start_btn">开始游戏</div>
            
            <div class="rules_info">
                <h3>游戏规则</h3>
                <p>敲打灰太狼加10分</p>
                <p>敲打小灰灰减10分</p>
                <p>时间进度条走完，游戏结束</p>
                <P><button>朕的龙椅拿来</button></P>
            </div>
            
            <div class="restart">
                <p>GAME OVER</p>
                <div class="restart_btn">重新开始</div>
            </div>
        </div>

这是一个简单游戏界面的HTML结构。以下是各个元素的中文解释：

1.  `<div class="app clearfix" id="app">`：这是游戏的主要容器div。
2.  `<div class="hp"></div>`：这个div表示玩家剩余时间。
3.  `<div class="score">0</>`：这个div显示玩家的得分。初始得分设置为0。
4.  `<div class="rules">`：这个div包含一个标签，标签上写着“游戏规则”。点击这个链接可以显示游戏规则。
5.  `<div class="start_btn">开始游戏</div>`：这个div表游戏的开始按钮。点击它可以开始游戏。
6.  `<div class="rules_info">`：这个div代表一个模态框或遮罩层，在点击游戏则链接时会出现。它包含了实际的游戏规则，以标题和段落的式呈现。
7.  `<h3>游戏规则</h3>`：这个标题在rules\_info div中表示游戏规则部分的标题。
8.  `<p>敲打灰太狼加10分</p>`：这个段落解释了敲打角色“灰太狼”会给玩家的得分增10分。
9.  `<p>敲打小灰减10分</p>`：这个段落解释了敲打角色“小灰”会从玩家的分中扣除10分。
10. `<p>时间进度走完，游戏结束</p>`：这个段落说明当时间进度条完全耗尽时，戏将结束。
11. `<p><button>朕的龙椅拿来</button><p>`：这个段包含一个按钮，上面写着“朕的龙椅拿来”。根据提供的代码，无法确定该按钮的具体用途或功能。
12. `<div class="restart">`：这个div代表另一个态框或遮罩层，在戏结束时出现。它显示文本“GAME OVER”并提重新开始的按钮。
13. `<div class="restart_btn">重新开始</div>`：这个div代表重新开始的按钮。点击它可以让玩家重新开始游戏。

效果如图：  
![在这里插入图片描述][56d65a3ddf3248e7953a6817af240e51.png]

### 确定9个坑位 ###

//九个坑位坐标
        const img_pos = [{
                left: "100px",
                top: "115px"
            },
            {
                left: "20px",
                top: "160px"
            },
            {
                left: "190px",
                top: "142px"
            },
            {
                left: "105px",
                top: "193px"
            },
            {
                left: "19px",
                top: "221px"
            },
            {
                left: "202px",
                top: "212px"
            },
            {
                left: "120px",
                top: "275px"
            },
            {
                left: "30px",
                top: "295px"
            },
            {
                left: "209px",
                top: "297px"
            }
        ];

效果如图  
![在这里插入图片描述][5b1636cb716a4c8ba9c84a3bbd49de42.png]

### 将图片放置进去 ###

解释：

1.  定义了一个名为`htl_imgs`的常量数组，其中包含了10个图片文件路径。
2.  定义了一个名为`xhh_imgs`的常量数组，其中包含了10个图片文件路径。
3.  定义了一个变量`_imgs`，用于存储当前的图片数组。
4.  设置了一个事件处理函数，当用户选择文本内容时，止默认的选择行为。
5.  当点击`.rules>a`元素时，绑定一个点击事件处理函数。该函数将显示`.rules_info`元素。
6.  当点击`.rules_info button`元素时，绑定了一个点击事件处理函数。该函数将隐藏`.rules_info`元素。

### 游戏开始 ###

$('.start_btn').click(function () {
            //让开始按钮隐藏
            $(this).hide(300);
            gameStart();
        })
    
        $('.restart_btn').click(function () {
            // 让开始按钮隐藏
            $(this).parent().hide(300);
            // 调用数据重置方法
            resetData();
            gameStart();
        })

第一个点击事件处理函数针对类名为"start\_btn"的元。当点击该元素时，会执行以下操作：

1.  使用`$(this)`选择器选中当前被点击的元素。
2.  调用`hide()`方法将该素隐藏，隐藏动画持续时间为300毫秒。
3.  调用`gameStart()`函数开始游戏。

第二个点击事件处理函数是针对类名为"restart\_btn"的元素。当点击该元素时，执行以下操作：

1.  使用`$(this)`选择器选中当前被点击的元素。
2.  调用`parent()`方法选中该元素的父元素。
3.  调用`hide(300)`方法将父元素隐藏，隐藏动画持续时间为300毫秒。
4.  调用`resetData()`函数重置数据。
5.  调用`gameStart()`函数开始游戏。

### 游戏动画 ###

let pos_timer; //切换位置定时器
        let path = null; //路径切换
        let img = null; //创建图片标签
    
        function pos_animate() {
            $('#bgmaudio')[0].play();
            pos_timer = setInterval(function () {
                //重置(吧图片从页面中移除)
                $('#wolf_img').remove();
    
                //将狼的状态改为未被敲打的状态
                wolf_status = 0;
    
                //设置小灰灰概率为15%
                path = Math.random() < 0.15 ? xhh_imgs : htl_imgs;
                //创建img标签
                img = $(`<img id="wolf_img" src="${path[0]}">`);
    
                let number = getNumber()
                //从数组中去取出位置对象
                img.css({
                    position: 'absolute',
                    left: img_pos[number].left,
                    top: img_pos[number].top
                })
                //开启探头动画
                headOut();
            }, 3000);
    
        }
    
        let isKnocked = true; //设置开关
        let wolf_status = 0; //0代表正常状态,1被打
        let img_index = 0 //声明图片索引
        let end_index = 6;
        $('#app').on('mousedown', function (event) {
            if (isKnocked) {
                const wolf = document.getElementById('wolf_img');
                if (event.target == wolf) {
                    img_index = 6;
                    end_index = 9;
                    clearInterval(timer4);
                    donghua()
                    if (wolf_status == 0) {
                        let score = parseInt($('.score').text());
                        //根据当前
                        if (path == htl_imgs) {
                            score = score + 10;
                            $('#myaudio')[0].play();
                        } else if (path == xhh_imgs) {
                            score = score - 10;
                            $('#unbuliaudio')[0].play();
                        }
                        $('.score').text(score);
                        wolf_status = 1;
                    }
    
                }
                isKnocked = false;
            }
    
        })

*  `pos_animate()` 函数用于定时切换地鼠的位置和状态。它会根据概率随机选择地鼠的路径（`xhh_imgs` 或 `htl_imgs`），创建一个图片标签，并设置其位置。然后调用 `headOut()` 函数开启地鼠的探动画。
 *  `isKnocked` 是一个开关变量，用于控制是否可以敲地鼠。当鼠被敲打，会将该量设为 `false`，防连续敲打。
 *  `wolf_status` 表示地鼠的状态，初始值为 0，表示正常状态；被敲打后会变为 1。
 *  `img_index` 和 `end_index` 是图片索引相关的变量，用于控制地鼠被敲打时显示的动画帧。
 *  `$('#app').on('mousedown', function (event) { ... })` 是一个事件监听器，当鼠标在 `#app` 元素上按下时触发。它会检查点击的目标元素是否是地鼠图片（通过比较 `event.target` 和 `wolf` 元素），如果是，则执行相应的逻辑：设置图片索引和结束索引，清除定器，播放画，根据当前路径更新得分，并将地鼠状态设为被打状态。

![在这里插入图片描述][5e40a04bc47c4c82b4431cd0712d98fd.png]

### 游戏机制设置 ###

//随机数方法
        function getNumber() {
            let number = Math.random();
            number = number * 9;
            return parseInt(number);
        }
    
        //重置方法
        function resetData() {
            //重置分数
            $('.score').text(0)
            //重置进度条
            $('.hp').width(180);
        }
    
        //游戏开始方法
        function gameStart() {
            let timer = setInterval(function () {
                //游戏结束需要做的事
                if ($('.hp').css('width') <= "0px") {
                    clearInterval(timer);
                    clearInterval(pos_timer);
                    $('#wolf_img').remove();
                    console.log('游戏进度条-定时器已经关闭')
                    $('.restart').fadeIn(300);
                }
                $('.hp').css('width', "-=1px")
            }, 200)
            //动画开始执行
            pos_animate();
        }
    
        function donghua() {
            let descindex = end_index;
            $('#app').append(img)
        }
    
        //获取一个 15%比列的布尔值
        function getImg_15() {
            return Math.random() > 0.15;
        }
    
        //探头动画
        function headOut() {
            img_index = 0;
            end_index = 5
            isKnocked = true; //开启敲打事件
            donghua()
        }
    
        function donghua() {
            //图片切换定时器
            window.timer3 = setInterval(function () {
                let descindex = end_index;
                $('#app').append(img);
                $('#wolf_img').attr('src', path[img_index]);
                img_index++
                if (img_index > 5) {
                    clearInterval(timer3)
                    window.timer4 = setInterval(function () {
                        $('#wolf_img').attr('src', path[descindex]);
                        descindex--;
                        if (descindex <= 0) {
                            clearInterval(timer4);
                            $('#wolf_img').remove();
                        }
                    }, 200)
                }
            }, 30)
    
        }

1.  `getNumber()`函数用于生成一个随机数，范围在0到9之间。
2.  `resetData()`函数用于重置游戏数据，包括分数和进度条。
3.  `gameStart()`函数是游戏开始的方法。它使用`setInterval`定时器来控制游戏的进行。在每个定时周期内，检查进度条的宽度是否小于等于0，如果是则清除定时器，结束游戏。同时清除另一个定时器`pos_timer`，移除图像元素`#wolf_img`并显示重新开始按钮。如果进度条仍然大于0，则将进度条的宽度减少1像素。
4.  `donghua()`函数用于执行动画效。它根据`end_index`变量值添加图像素到`#app`元素中，并设置图像的`src`属性为`path[img_index]`。然后递增`img_index`，如果超过5，则清除定时器`timer3`。接着启动另一个定时器`timer4`，在每个定时周期内将图像的`src`属性设置为`path[descindex]`，并递减`descindex`。当`descindex`小于等于0时，清除定时器`timer4`，并移除图像元素`#wolf_img`。
5.  `getImg_15()`函数返回一个布尔值，表示是否生成一个15%的概率。
6.  `headOut()`函数用于触发探头画。它将`img_index`设置0，`end_index`设置为5，并将`isKnocked`变设置为true，表示开启敲打事件。然后调用`donghua()`函数执行动画效果。  
    ![在这里插入图片描述][d32cf3ac205f460ea3ae092cc48da7cc.png]

## 小结 ##

游戏的目标是在一定时间内点击屏幕上出现的图像。游戏开始时，会生成一个随机数，并根据该随机数决定是否触发图像显示。如果触了图像显示，玩家需要尽快点击图像以获得分数。游戏会根据时间制和进度来控制游戏的进行，当时间尽或进度条耗尽时，游戏结束。

游戏中使用了定时器来控制图像的显示和动画效果。当图像显示时，玩家需要速点击图像以获得分数。游戏还提供了重新开始按钮，玩家可以在游戏结束后点击重新开始按钮重新开始游戏。

总体而言，这个游戏是一个简单的反应速度游戏，通过点击图像来测试玩家的反应能力。你可以根据自己的需求对代码进行修改和扩展，添加更多的功能和特性。

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[ceb7297d53444c67ac900201cc3b721f.png]: https://img-blog.csdnimg.cn/ceb7297d53444c67ac900201cc3b721f.png
[https_inscode.csdn.net]: https://inscode.csdn.net/
[why_does_it_work]: https://inscode.csdn.net/@why_does_it_work
[22c242737a63478287cee5392fa2c005.png]: https://img-blog.csdnimg.cn/22c242737a63478287cee5392fa2c005.png
[2028ea2a1ce6438ca4c36859802144c9.png]: https://img-blog.csdnimg.cn/2028ea2a1ce6438ca4c36859802144c9.png
[Link 6]: https://inscode.csdn.net/@why_does_it_work/HTML-CSS-JS_07
[c533e5322ad64e12806bdb39978056d2.png]: https://img-blog.csdnimg.cn/c533e5322ad64e12806bdb39978056d2.png
[j]: https://img-blog.csdnimg.cn/fda98a2935ae4cae8003ce055e3950b3.png
[56d65a3ddf3248e7953a6817af240e51.png]: https://img-blog.csdnimg.cn/56d65a3ddf3248e7953a6817af240e51.png
[5b1636cb716a4c8ba9c84a3bbd49de42.png]: https://img-blog.csdnimg.cn/5b1636cb716a4c8ba9c84a3bbd49de42.png
[5e40a04bc47c4c82b4431cd0712d98fd.png]: https://img-blog.csdnimg.cn/5e40a04bc47c4c82b4431cd0712d98fd.png
[d32cf3ac205f460ea3ae092cc48da7cc.png]: https://img-blog.csdnimg.cn/d32cf3ac205f460ea3ae092cc48da7cc.png