机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

SlotJS

🎰 Circular slot machine mobile-first SPA built using JavaScript, CSS variables and Emojis!

🚀 Try it out at danziger.github.io/slotjs!

🔊 Better with sound & vibration on.

运行它（开发中）

看看 package.json，这些脚本不言自明，不过否则 npm install 和 npm start 在大多数情况下都能在 90% 中工作 :D

该项目将可以通过 http://localhost:8080/slotjs/ 访问

报告问题

如果您在此网站/项目中发现任何问题，请随时通过在此仓库中创建新问题来报告，但请确保该问题尚未被其他用户作为问题报告过，或尚未出现在TODO 文件中。

实现细节、限制及可能的改进

不是随机的

这个老虎机不是通过生成随机数字来决定是否出奖，而是以一种更可预测的方式运作，用户在正确位置停止老虎机的能力实际上会影响他们获得奖品的概率，我认为这对他们来说也更有趣和公平。比如，想象一下当只差一个符号就能中大奖时的紧张感，一切都取决于你自己：

组轮换

我们可以旋转卷轴容器（.sm__reelsContainer），而不是卷轴本身（.sm__reel），这样我们只需一次用 JS 旋转一个元素，再用 CSS 动画旋转另一个元素（如果有的话，是正在停止的那个）:

这种方法的主要优点是，无论我们有多少个转轮，主要的更新旋转操作都将需要执行相同的工作，这可能会为 tick 方法产生更低且更可预测的执行时间。

然而，其缺点是我们对旋转的控制较少，而使用当前方法我们可以为每个转轮设置不同的速度甚至加速度，更重要的是，当我们停止一个转轮时，我们必须将它移出容器，改变 DOM，这会使停止操作变慢。

由于旋转转轮当前的性能表现更好（即使在 6x CPU 降速的情况下运行大约 60 fps）相比停止它（通常需要大约 2 帧），主要原因是动态创建的动画在停止转轮时触发的 Recalculate Style 操作开销较大，因此我决定不实现这种方法。你知道的，如果没坏，就别修。

如果这个游戏必须运行更多的转轮，并且在某些设备上导致性能问题，我们可以进行性能测试以比较两种方法。

使用动画旋转

可以使用旋转动画代替手动计算旋转，这可能比当前的方法略微更高效。

然而，当我们停止转轮时，我们需要从旋转矩阵中确定其角度，并确保旋转动画与停止动画之间的过渡平滑，而现在我们总是知道所有转轮的当前角度。此外，我们对旋转的控制也较少，而使用当前方法我们可以为每个转轮设置不同的速度甚至加速度。

缩放效果

缩放效果在 Firefox 上有点慢，并且在某些 iOS 设备上模糊，而在 Chrome 上性能影响存在但不太明显。在所有浏览器中更简单也更高效的方法是显示当前组合的更大视图在老虎机上方。

无论如何，我怀疑 iOS 上的问题是因为缩放使用 GPU 执行但之后没有进行重排，所以我们得到的是放大的位图，而不是使用放大的应用生成的新图像，这样应该看起来更清晰，就像在其他浏览器中一样。

这可能可以通过 filter: none 或 -webkit-filter: blur(0px) 技巧来修复，但由于我没有 iOS 设备进行测试，我没有实现任何修复。

模糊效果

转轮中的每个单元格根据一个单元格与下一个单元格之间的可用空间重复若干次，带有模糊效果和逐渐减少的 opacity，使得动画看起来更加平滑，单元格之间没有间隙，同时仍尽可能明显地展示真实单元格（非褪色的单元格）的位置。

然而，看起来 filter: blur(Npx) 在 Firefox 上没有使用 GPU，因此会导致严重的性能问题。因此，这种效果在 Firefox 上不使用，仅改变 opacity。

其他想法

特殊符号

我们可以有一些特殊符号来提供随机奖励：即时奖品、倍数器、慢动作、百搭符号……并在老虎机的中心显示它们。

虚拟房间

我们可以根据一些参数将玩家分组到“虚拟房间”中，例如他们停止转轴的时间、最近的平均命中率……确保他们处于相似的技能水平，而且他们花费的大部分资金将进入该房间的奖池，而少部分资金将作为费用。

此外，我们可以使用WebSockets让他们知道该房间其他玩家获得的奖品，以使他们在游戏/竞赛中更加投入。

正在进行的工作

这只是我前一阵子做的一个周末项目，所以不会经常更新。不过，你可以在 TODO 文件 中找到一些正在进行的工作。

我建立的一些其他网站

• GMZCODES

  👨‍💻 Dani Gamez 的个人网站 PWA，使用 JavaScript、SCSS 和 HTML5 构建。

• Stylophone.js

  🎹 经典的 Stylophone，现在可以在你的手机和电脑上使用。

• Key.js

  ⌨ 按任意键以获取 JavaScript 键盘事件的 event key、code、which、keyCode 以及更多属性！

• Stars.js

  ✨ 在画布中生成一个旋转的银河。

• Job.js

  💼 可分享的职位图像摘要：将你的职位作为图像分享到 LinkedIn 和 Instagram，以提升曝光率并吸引更多申请者！

作者

达尼·加梅斯·弗兰科

领英： https://www.linkedin.com/in/danigamezfranco/

Stack Overflow: https://stackoverflow.com/users/3723993/danziger