I am participating in the Nuggets Community Game Creative Contest Team Competition. For details, please see: Game Creative Contribution Contest
Game address: ihope_top.gitee.io/juejin-king
gitee address: gitee.com/ihope_top/j…Team
members: Village Head Erhei , MonicaWoo
foreword
The xdm of the gold nuggets, the technology is not creative enough to make up the series and it has been updated. This time, I bring you a collection of small games. It is still the same. The resources are all found on the Internet. Compared with the previous small games After a bit of multi-end adaptation, the gameplay of the game should be in line with the operation mode of pc + mobile phone as much as possible, so that the game results are not disturbed by the factors of the device as much as possible. Of course, there may be many bugs that have not been found. If you find them, you can bring them up.
Although the game has rubbed off on the Nuggets and the name and everyone's operation, it is not an official behavior of the Nuggets. The game content is entertainment effect, and has nothing to do with the official and operation of the Nuggets. The game promises not to be commercialized. If there is any infringement, please contact me for modification.
prize activity
The old rule, it is recommended to play the game first, then read the article (the PC side is recommended to run in full screen), after playing, I hope you can share your game results to the boiling point, and paste the boiling point link in the comment area, until April 24th. At 14:00, the user with the most popular comment in the comment area will get the benefit of choosing one of the Nuggets mouse pad/bytes without pouring the cup (must pass the game and share it to the boiling point, if it is not shared, it will be postponed), and two people will be randomly selected. Lucky users will send random gold medals*1
If there are less than 10 comments, the award will be forfeited
game rules
The game is divided into 5 levels, each level has an operation guard, each level is 20 points, and 5 levels are passed, and the total score of 60 points and above is regarded as a clearance. Let's take a look at the specific gameplay of each level.
Level introduction
Since each small game is very simple, but there are many codes, if you are interested, you can go directly to the game warehouse to view the source code. This article mainly explains the ideas and gameplay
The first level to find the Nuggets
这一关的具体实现为团队小伙伴村头小二黑所写，这一关本来想设计成找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搜到的。
禁止移动端全屏预览图片
Pictures are used in many places in the game. Clicking the picture on the mobile terminal will cause a full-screen preview of the picture, which will cause a very bad experience. We can use the following method to prohibit this behavior. It should be noted that using this attribute for pictures, It will make the picture unable to right-click to copy on the pc side
pointer-events: none;
复制代码Elements with mouseover events have a blue background on mobile
In the second level of rock-paper-scissors, we added the mouse over effect to the following options, and a blue background will appear when you click on the mobile terminal.
Prohibited method:
webkit-tap-highlight-color: transparent;
复制代码Display the default border when the mobile image src is empty
The img tag on the mobile side, if the src is empty, a default border will be displayed, which can be removed by the following method
Prohibited method:
img[src=''],img:not([src]){
opacity: 0;
}
复制代码dom to image
In the process of obtaining the certificate, in order to facilitate users to share, we use the html2canvas plug-in to convert the dom element into a picture display
Epilogue
The overall introduction of the game is here. I hope everyone can like this small game. I also thank you for your efforts in the operation and create a good community environment. I wish you a bright future, and I wish the Nuggets to keep moving forward, and finally come to the Nuggets 3d logo town sticker