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

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

先看运行效果

看查源码内容

获取项目

点击跳转链接

点击右上角 Fork

即可一键获取项目


代码设计

先确定界面布局以及开始

 <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>
        <!-- 遮罩1 -->
        <div class="rules_info">
            <h3>游戏规则</h3>
            <p>敲打灰太狼加10分</p>
            <p>敲打小灰灰减10分</p>
            <p>时间进度条走完,游戏结束</p>
            <P><button>朕的龙椅拿来</button></P>
        </div>
        <!-- 遮罩2 -->
        <div class="restart">
            <p>GAME OVER</p>
            <div class="restart_btn">重新开始</div>
        </div>
    </div>

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

  1. :这是游戏的主要容器div。

  2. :这个div表示玩家剩余时间。
  3. 0:这个div显示玩家的得分。初始得分设置为0。

  4. :这个div包含一个标签,标签上写着“游戏规则”。点击这个链接可以显示游戏规则。

  5. 开始游戏

    :这个div表游戏的开始按钮。点击它可以开始游戏。
  6. :这个div代表一个模态框或遮罩层,在点击游戏则链接时会出现。它包含了实际的游戏规则,以标题和段落的式呈现。

  7. 游戏规则

    :这个标题在rules_info div中表示游戏规则部分的标题。
  8. 敲打灰太狼加10分

    :这个段落解释了敲打角色“灰太狼”会给玩家的得分增10分。
  9. 敲打小灰减10分

    :这个段落解释了敲打角色“小灰”会从玩家的分中扣除10分。
  10. 时间进度走完,游戏结束

    :这个段落说明当时间进度条完全耗尽时,戏将结束。

    朕的龙椅拿来

    :这个段包含一个按钮,上面写着“朕的龙椅拿来”。根据提供的代码,无法确定该按钮的具体用途或功能。

  11. :这个div代表另一个态框或遮罩层,在戏结束时出现。它显示文本“GAME OVER”并提重新开始的按钮。

  12. 重新开始

    :这个div代表重新开始的按钮。点击它可以让玩家重新开始游戏。


效果如图:

确定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"
        }
    ];

效果如图


将图片放置进去

const htl_imgs = ['./images/h0.png', './images/h1.png', './images/h2.png',
        './images/h3.png', './images/h4.png', './images/h5.png',
        './images/h6.png', './images/h7.png', './images/h8.png',
        './images/h9.png'
    ];
    const xhh_imgs = ['./images/x0.png', './images/x1.png', './images/x2.png',
        './images/x3.png', './images/x4.png', './images/x5.png',
        './images/x6.png', './images/x7.png', './images/x8.png',
        './images/x9.png'
    ];
    let cur_imgs;
    document.onselectstart = function (event) {
        event.preventDefault();
    }
    $('.rules>a').click(function () {
        $('.rules_info').css('display', 'block');
    })
    $('.rules_info button').click(function () {
        $('.rules_info').css('display', 'none');
    })

解释:


  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 元素),如果是,则执行相应的逻辑:设置图片索引和结束索引,清除定器,播放画,根据当前路径更新得分,并将地鼠状态设为被打状态。


游戏机制设置

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


小结


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


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


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


相关文章
|
4月前
|
JSON 数据格式
【Axure高手秘籍】掌握这招,让你的原型设计效率飙升!——元件库导入与使用教程及主流资源下载全解析
【8月更文挑战第20天】Axure RP是界面设计与交互原型制作的强大工具。掌握元件库能显著提升设计效率。元件库包含预设UI元素如按钮、表单等,可直接拖放构建布局。在Axure RP中,通过“元件”选项下的“库”可访问并导入新元件库。导入后,轻松拖放元件至画布调整,甚至自定义样式和交互。利用脚本还能模拟真实交互效果,如按钮点击反馈。推荐资源包括Axure Marketplace、UIZilla等,助力高效设计。
87 0
|
7月前
|
前端开发 JavaScript Java
童年回忆——捕鱼达人(内含源码inscode一键运行)
童年回忆——捕鱼达人(内含源码inscode一键运行)
|
测试技术
【测试平台系列】第一章 手撸压力机(十)-定义场景
上一章,咱们对http请求进行了一些优化,本章节我们将组成场景去运行。首先场景就是一连串的http接口的请求,我们使用list(列表)来组装成一个场景
【测试平台系列】第一章 手撸压力机(十)-定义场景
|
测试技术
【测试平台系列】第一章 手撸压力机(八)- 实现testobject接口
上一章中我们已经启动了一个/engine/run/testObject/接口,但是我们还没有具体的实现该接口,本章我们就来实现一下该接口。
【测试平台系列】第一章 手撸压力机(八)- 实现testobject接口
|
7月前
|
存储 开发者
彻底搞懂微信小游戏制作工具中的函数
彻底搞懂微信小游戏制作工具中的函数
159 0
|
7月前
|
数据可视化 算法 开发工具
微信小游戏制作工具中如何实现递归函数?
微信小游戏制作工具中如何实现递归函数?
79 0
|
7月前
微信小游戏制作工具中的分享功能怎么用?
微信小游戏制作工具中的分享功能怎么用?
79 0
|
存储 Java
Java实现贪吃蛇大作战小游戏(完整教程+源码)额外实现积分和变速功能(下)
文章目录 1 开发环境及游戏展示 1.1 游戏主界面 1.2 移动界面 1.3 奖励界面 1.4 F加速功能界面 1.5 死亡界面 2 需求分析 3 系统设计 3.1 系统总体功能设计 3.2 系统总体流程设计 4 功能设计 4.1 贪吃蛇移动及加速功能设计 4.2 贪吃蛇吃食物加速及死亡判定功能的设计 4.2.1 贪吃蛇吃食物加速功能的设计 4.2.2 贪吃蛇死亡判定功能的设计 4.3 贪吃蛇主动加速功能的设计 4.4 贪吃蛇奖励机制功能的设计 5 项目结构与项目实现 5.1 项目结构及类间关系 5.2 项目完整源码 5.2.1 Images类
|
存储 JSON 搜索推荐
【测试平台系列】第一章 手撸压力机(十二)-初步实现提取功能
上一章节,我们主要实现了基础的并发测试场景的能力。本章节,我们实现一下,如何对响应进行提取,使用正则/json对响应信息提取,并赋值给我们定义的变量。
|
测试技术
【测试平台系列】第一章 手撸压力机(九)- 封装函数
将我们的一些代码封装到函数和方法中,这样我们看来代码可读性更好。如果发现bug,也可以更好的进行追踪。
下一篇
无影云桌面