演示链接:http://haiyongcsdn.gitee.io/spin-the-wheel/
我非常感谢您对改进它的任何反馈,我已经盯着它看了一个星期👀
我一直在为棋盘游戏玩家建立一个简单工具的网站。由于各种原因,有时您需要在线掷骰子,翻转卡片或旋转微调器。
该网站适用于诸如此类的简单操作。
我希望网站取得成功,所以我首先看了看比赛,并出于以下原因(出于我将在另一篇文章中详述的原因)决定:
no javascript
后退对于此工具,我们需要克服一些有趣的障碍😐😐😐:
旋转器在旋转时必须具有令人满意的咔嗒声,这一点很重要。
我找到了一个mp3咔嗒声🔉,但是即使在不到1秒的时间里,它仍然很大7kB。使用它会使我超出30kB预算。
我敢肯定,有很多巧妙的方法可以减小音频文件的大小。但取而代之的是,我选择使用JavaScript和Web Audio API生成点击,这是我之前从未听说过的。
幸运的是,我认识一位合成器爱好者,他向我解释了一些术语。
我找到了有关合成鼓声🥁的教程,并调整了踩example示例以使其适合。
这结束了刚刚~1.2kB的js-有空间进一步优化。
使微调器不工作js就非常简单。
如果浏览器已禁用JavaScript,则无需提交并旋转client-side
,请点击spin the wheel
提交表格…
然后服务器:
它出奇地好。
我是使用Netlify Functions来完成这个工作的,我没有为一小部分将不使用js使用该网站的人运行整个服务器。
虽然对SVG设置动画效果通常不错,但某些浏览器确实为此感到困扰(Safari)。经过大量的修补,事实证明,最好的解决方法是为每个动画组件使用单独的SVG,然后将每个SVG放置在自己的SVG中,然后对它们<div>
进行动画处理<div>
。
旋转器以不同的速度,持续时间旋转,并具有随机的旋转次数-这样就保持了令人惊讶和戏剧化的效果。
为了使旋转真正令人满意,它需要在顶部有一点点滴答声🔉。(例如在游戏节目“命运之轮”上)。
这意味着在车轮的轮辋上有“销钉”,并在每次“击中”“销钉”时对自动收报器进行动画处理。
出于性能方面的考虑,我认为最好预先计算动画的时间(并单击声音)。
事实证明,这是一项非常复杂的任务,在学习了3天的微积分后,我放弃了。
相反,它使用requestAnimationFrame
并测量微调器的当前旋转。如果旋转在特定范围之间,则会产生咔嗒声。
可以,但是确实会出错。
这也意味着该no-javascript
版本没有自动收录器动画。
一个问题是允许人们向微调器添加1000的值。
我发现有一个用例,有人可能想要粘贴整个值的电子表格以随机选择一个。
因此,我决定使用一个<textarea>
作为输入,并为每个新值添加新行。然后,如果用户粘贴逗号分隔的列表,它将在生成转轮之前重新格式化它。
为了使其工作,微调器<svg>
会随着添加更多的值而变得不那么复杂。
我只在我的新电脑上测试过它,但是它可以正常工作到接近6000某个值。随时进行测试,让我知道!
整体外观可以通过抛光来完成,特别是在其他颜色方案上。
点击声音可能与调整有关。
找到一种精确的高级测量点击动画的方法将是惊人的。
使自定义车轮可嵌入<iframe>
是很酷的。
欢迎关注作者微信公众号海拥
保存识别,也可在公众号上向我反馈遇到的问题,看到我会第一时间回复😀
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
感谢您阅读至最后❤️这是您的勋章
最后,不要忘了❤️或📑支持一下哦
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。