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一个函数，就可以达到冬天更新的目的了。

声音

游戏没有声音怎么行，这里引用的音乐是序曲，哈哈哈，是不是一下子就有年味了。游戏中的声音主要有两个类型，一种是长时间播放，需要控制播放暂停的，比如背景音乐，另一种是即时性的，比如菜单滑动声、子弹撞击声等，所以背景音乐的实例我们需要存储下来，而即时音效随用随建就行，我这里偷了个懒，没有写单独的声音配置文件，直接写vuex里了。

背景音乐

window.backMusic = new Audio()
window.backMusic.src = require('../assets/mp3/back.mp3')
window.backMusic.loop = true
window.backMusic.load()
window.backMusic.currentTime = 127.2 // 背景音乐默认定位到舒缓片段

这样我们在任何地方控制播放直接调用或更改window.backMusic就行了。

即时音效

playAudio (state, src) {
   
  if (state.setting.isPlay) {
   
    const audio = new Audio()
    audio.src = src
    audio.load()
    audio.volume = .5
    audio.play()
  }
}

这里播放音效的时候需要判断当前的声音开关是否打开，如果打开的话在进行播放，注意，这里不能通过给单一的audio对象改变地址的方式播放不同的音效，因为如果在当前声音正在播放时候，修改音效地址会报错。

弹幕

这个创意是我在听春节序曲的背景音乐时想到的，因为一听这个就想到春晚，想到短片中全国各地的人民送祝福，于是我就想把这个加进来，结合背景音乐，是不是一下子感觉就来了。也希望大家可以送上自己的祝福，我也会把你的祝福更新到弹幕里的。这里的弹幕就只为了满足游戏的需求，不会太复杂。

首先，我们需要梳理一下弹幕的需求和注意点

• 弹幕横向和纵向不能重叠
• 两天弹幕之间的间隔最好可以随机
• 弹幕超出屏幕要自动移除

首先说弹幕不能重叠的问题，弹幕纵向不能重叠的话，我们就需要有一个弹道的概念，也就是让每一条弹幕都有自己的轨道，各走各的，当然就不会重叠了。我这里是根据屏幕高度，分成了10个弹道，本来打算屏幕越大，弹道越多的，但是考虑到性能问题，就采用了这种方案。

其次就是弹幕横向的防止重叠，我百度的时候看到其他作者提到的追及问题什么的，奈何我是个学渣，没有看太明白，于是就自己想了解决办法，我们这里每条弹幕的移动速度是一样的，那需要考虑的就是每条弹幕出现的时机问题了，我们需要在同一弹道的前一条弹幕完全出现后，再生成下一条弹幕，中间可以加一个我们规定好范围的随机距离，这样更美观一点。

下面来看一下代码怎么实现的。

ballistic: 0, // 弹道数量
bulletSpeed: 2, /