我正在参加掘金社区游戏创意投稿大赛团队赛，详情请看：游戏创意投稿大赛
游戏地址： ihope_top.gitee.io/juejin-king
gitee地址：gitee.com/ihope_top/j…
团队成员：村头小二黑、MonicaWoo
前言
各位掘金的xdm，技术不够创意来凑系列又更新了，本次给大家带来的是一个小游戏合集，还是老样子，资源都是从网上找的，相比以往的几个小游戏做了一下多端的适配，游戏的玩法尽量符合pc+手机的操作方式，让游戏结果尽量不受设备的因素干扰，当然可能也有许多没发现的bug，如果大家发现了可以提出来。
游戏虽然蹭了掘金和名字和各位运营大大，但非掘金官方行为，游戏内容均为娱乐效果，和掘金官方及运营无关，游戏承诺不商用，如涉及侵权请联系我进行修改
有奖活动
老规矩，建议先玩游戏，再看文章（pc端建议全屏运行），玩完之后希望可以把你的游戏结果分享至沸点，并把沸点链接贴到评论区，截止四月二十四日二十四点，评论区热门评论第一的用户将获得掘金鼠标垫/字节不倒杯二选一的福利（必须游戏通关分享到沸点，如未分享则顺延），另外将随机抽取两名幸运用户送出随机掘金徽章*1（发沸点建议选择游戏玩家俱乐部圈子）
评论不足10人则该奖项作废
游戏规则
游戏共分为5关，每一关有一名运营把守，每关20分，闯过5关，总分达到60分及以上则视为通关。下面来看看每关的具体玩法吧。
关卡介绍
由于每个小游戏都很简单，但是代码又多，大家感兴趣可以直接前往游戏仓库查看源码，本文主要讲解思路和玩法
第一关 找掘金
这一关的具体实现为团队小伙伴村头小二黑所写，这一关本来想设计成找Troy的，在一大堆Tony中找Troy肯定很有意思，不过怕托尼老师不开心，所以给托尼老师安排了石头剪刀布，也挺好玩的。
第一关的守关运营为优弧大大，江湖人称张哥，口口声声喊着辞职却依然为掘金燃烧着自己的敬业运营，我觉得让他来作为第一关的守关人再合适不过了，本着休闲为主的主题思想，所以时间放的特别长，亲测基本10秒都能找对。
第二关石头剪刀布
第二关，本关就是我们熟悉的托尼老师来把手了，和我以前的小游戏不一样，这一关没有限时，也不用激烈的敲键盘，我们只用安安静静的来和托尼老师玩石头剪刀布，游戏的主要玩法就是从下面的石头剪刀布中间选一个，然后托尼老师会在你选剩下的选项中随机选择一个，这样就排除平局的可能了，快来看看你和托尼老师谁的运气更好吧。
第三关 寻找宝藏
第三关的把守者就是我们勤勤恳恳的船长了，我们没办法和船长一起去大海上航行，就来和船长一起寻宝吧，这里有六张卡牌，其中一张隐藏着藏宝图，你和船长将轮流掀开一张牌，快来看看谁先找到真正的藏宝图吧！
第四关 打地鼠
本关为小伙伴MonicaWoo 开发
第四关的把守者为思宇，我到现在也不知道思宇是GG还是MM，不过这不重要，重要的是思宇家的后院突然出现了很多地鼠，思宇需要你的帮忙，快使出你的浑身力气来打地鼠吧
第五关 幸运抽奖
第五关的守护者为我们可爱的宝儿姐，好心的宝儿姐为你准备了你最喜欢的抽奖的环节，抽到多少分就是多少分，还是熟悉的配方，还是熟悉的味道，来吧，一发入魂
获取证书
第五关抽奖完会出现获取总分的按钮，点击即可跳转至成绩页，成绩页分为两种情况
第一种就是你的总分小于60分，那么很遗憾，不及格
另一种就是你的总分大于60分，那么恭喜你，你通关了
这时候你就可以点击下方的填写愿望按钮，填写你的愿望。（许个愿吧，朋友，万一实现了呢，生活再艰苦也要心存美好哦）
愿望填写完成之后，可以点击生成证书按钮进行证书生成（原谅我的审美，实在过于简陋了）
之后我们可以点击保存图片按钮将证书保存到本地，也可以直接在证书上右键复制图片（手机端可以长按图片保存，不行的话就截图吧），之后点击前往沸点按钮，发布沸点
小技巧
写游戏的期间也遇到了很多小问题，不过都找到了很好的解决方法，这里特别跟大家分享一下
字体抽取
浏览器的默认字体很难形成好的视觉体验，于是我从网上找了一个自认为还是挺好看的字体，重点是免费啊（该字体为斗鱼开源字体，可商用），可以看到游戏中很多地方用到了这个字体，整体观感提升了不少，但是有一个缺点就是字体包太大了，就像这个斗鱼字体就有5m多，比整个游戏都大（经优化后，整个游戏大小为2.5m左右），那我们怎么去解决这个问题呢？仔细看看可以发现，我们用这个字体书写的字并不多，而一个字体包少说也要上千字，那我们如果只把我们用到的字抽取出来，生成新的字体，会不会节省很多空间呢？我自己是办不到这种事，于是就去网上搜了搜，没想到还真搜到了，那就是百度的fontmin，可以完美实现我们的需求，字体包经优化后成功的从5039kb变成了61kb，详细的使用说明可以参考官方网站ecomfe.github.io/fontmin/#ba…
禁用ctrl+f
在第一关中，用户需要在众多错词中找出对的那一个，因为这是网页，所以很容易让用户使用ctrl+f进行查找作弊，那么怎么阻止这一行为呢，我开始想的是用图片代替文字，但是觉得那样又太麻烦了，那有没有更简单的方法呢？还真让我找到了，那就是使用伪类元素，如::after的content:'hello'，这样的内容是无法被ctrl+f搜到的。
禁止移动端全屏预览图片
游戏中很多地方用到了图片，在移动端点击图片会进行图片的全屏预览，会造成很不好的体验，我们可以用下面的方法禁止这一行为，需要注意的是，对图片使用该属性，会使该图片在pc端无法右键复制
pointer-events: none;
有鼠标滑过事件的元素在移动端有蓝色背景
第二关石头剪刀布的时候，下面的选项我们添加了鼠标滑过效果，在移动端点击的时候会出现蓝色的背景
禁止方法：
webkit-tap-highlight-color: transparent;
移动端图片src为空时显示默认边框
移动端的img标签，如果src为空的时候会展示一个默认边框，可以用下面的方法去除
禁止方法：
img[src=''],img:not([src]){
opacity: 0;
}
dom转图片
获取证书的环节为了方便用户进行分享，我们使用了html2canvas插件将dom元素转为了图片展示
结语
游戏的整体介绍就到这里了，希望这个小游戏大家可以喜欢，也感谢各位运营的付出，营造出了一个良好的社区环境，祝大家前程似锦，祝掘金一往无前，最后来个掘金3d logo镇贴
