中秋博饼?来试试这个一键博饼

1,454 阅读2分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

前言

一说到中秋除了家人团圆,那肯定还少不了博饼这个重头大戏,万一博饼的时候没有碗和骰子怎么办,今天就让我们用一种比较特殊的方式加上三件套来简单实现一个博饼功能。

实现

目前实现的比较粗糙,就只存在简单的摇骰子功能,并没有去判断摇出来的结果。

实现过程

思路

首先整个的一个实现思路是通过动图和静态图片之间互相转化来实现的,这种实现方式存在着部分的偷懒行为,首先我们需要在网上找到一张博饼的动图

中秋弊病.gif

当然直接状元插金花这是不可行的,所以我们需要让这个结果变成随机的。

我的思路是在这张动图结束的时候,重新生成6个新的骰子图片,将原来的进行覆盖,这样用户看到的就是随机出来的结果,而不是原来的状元插金花。

那么思路有了,这个实现方式还需要一点点小的ps功底,在这里就不多做介绍了,我修改过后的图片在上面的代码片段中也都能够看到,其实就只是简单的p图罢了。

随机数

获取随机数我们可以使用 js 提供的 random 方法,获取一个 0-1 之间的随机数,并且我们需要的是 1-6 的随机一个数,因为 random 取得的随机数是不包含1的,所以我们要对最后的结果乘以6并且加上1,这样范围就变成了 1-7不包含7,然后再对这个随机数向下取整,我们就能够拿到 1-6 的一个随机数了。

摇骰子的过程就是生成6个随机数,并且根据随机数展示不同的图片来对原有的骰子进行覆盖,这样就能够生成6个随机的骰子,到这里这个功能就能够简单的实现了。

总结

本文摇骰子的方式属于比较取巧的类型,用来简单的进行娱乐应该是没有什么问题的,实现上可能就是p图反而会浪费更多的时间,但是也算是简单的完成了一个博饼的功能。