vue新春游戏-年兽大作战，欢欢喜喜过大年（可在线体验）

游戏地址： http://ihope_top.gitee.io/new-year-game/
开发语言：vue
运行平台：Chrome
gitee地址：https://gitee.com/ihope_top/new-year-game
github地址：https://github.com/heyongsheng/new-year-game
游戏已开源，欢迎大家体验，也可以自行修改用作公司年会游戏等

前言

各位掘金的xdm，又是一年新春到，在这里提前给各位兄弟们拜年了，祝大家身体健康，万事如意。今天这篇文章呢，是为了掘金新春征文诞生的，这里特意给大家写了一个小游戏，所谓技术不够创意来凑，虽然游戏用到的技术都是很一般很简单的，但是也让我准备了不少的时间，小游戏全部由自己完成，网上拼凑的资源，美术、音效可能都不完美，大家将就将就哈，希望大家能够喜欢，强烈建议大家在阅读文章之前先点击游戏链接https://heyongsheng.github.io/game/index.html 前去体验两把。

游戏弹幕及游戏结束祝福语征集

相信感兴趣的同学已经去体验过游戏了，那么你一定看到了游戏时弹幕出现的祝福语，以及游戏结束时出现的对玩家的祝福语，想让你的祝福语出现在弹幕中吗，那么请在评论区留言吧，我会将看到的留言及时更新到弹幕中哦。

弹幕留言

弹幕留言格式：弹幕+昵称+祝福（一句话，别太长），例如 弹幕+河南小伙+祝全国人民早日战胜新冠

游戏胜利祝福

胜利祝福格式：胜利+昵称+祝福（一句话，别太长），例如 胜利+掘金用户小明+祝你新的一年工作顺利

可以截图你游戏胜利时随机到的留言然后发到沸点哦，看是否会有缘遇到给你送祝福的人。

那下面我们就正式的来开始游戏开发的讲解了。

小游戏内容较多，不重要的地方会一笔带过或者省略，如果有人对游戏中没有提到的技术感兴趣，可以在评论区提出，后续可以针对性的出文章讲解，另外文中代码仅张贴关键部分代码，如需查看完整代码，请移步gitee或者GitHub。

游戏规则

玩家需要按住炮竹进行左右移动来攻击年兽，屏幕中间会定时出现问题，回答对问题会增加攻击力等，每道题的回答时间为8秒钟，问题出现的间隔为5秒钟，年兽血量为0时游戏结束，击败年兽用时越少越牛逼。

菜单及全局配置

全局配置

setting: {
  isPlay: false,
  showBulletChat: true
}

全局配置其实就俩，声音控制和弹幕控制，因为经测试，游戏在性能十分不好的机器会卡顿，所有给出了是否显示弹幕的控制，至于弹幕大小、颜色、密度这些由于时间关系就没有写。至于声音控制，那肯定是必须的，一是因为防止突然播放音乐对用户造成影响，二是浏览器也有限制，禁止声音自动播放。

菜单

布局方面就不说了，这里简单的说一下我菜单生成时的思路，因为给菜单添加鼠标滑过和点击的音效，所以用v-for循环数据的方法比较好，要不然鼠标事件就要写好几遍。具体的代码如下

<div class="menu-box">
  <div
    class="menu-item"
    v-for="(item, index) in menuList"
    :key="index"
    @mouseover="$store.commit('playAudio', hoverMusic)"
    @click="$store.commit('playAudio', clickMusic),item.clickHandle()"
    v-show="item.show()"
  >
    {
  {item.name}}
  </div>
</div>


// 节选
menuList: [
    {
      name: '开始游戏',
      clickHandle: () => {
        this.gameBegin()
      },
      show: () => true
    },
    {
      name: '打开声音(强烈建议)',
      clickHandle: () => {
        this.$store.commit('tooglePlay', true)
      },
      show: () => !this.$store.state.setting.isPlay
    },
    {
      name: '关闭声音',
      clickHandle: () => {
        this.$store.commit('tooglePlay', false)
      },
      show: () => this.$store.state.setting.isPlay
    }
  ],

菜单的每一项主要有三个属性，名称、点击事件和控制显示，因为有些菜单项需要根据实际情况决定是否显示，比如打开声音和关闭声音，需要根据当前声音是否打开来判断谁显示谁隐藏，如果我们定义数据的时候直接把控制声音的变量赋值给show，那么后续声音变化的时候，show是不会动态更新的，这里我们我们赋值给show一个函数，就可以达到冬天更新的目的了。

声音

游戏没有声音怎么行，这里引用的音乐是序曲，哈哈哈，是不是一下子就有年味了。游戏中的声音主要有两个类型，一种是长时间播放，需要控制播放暂停的ÿ