我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛
前言
中秋佳节即将到来,除了赏月、恰月饼、吃团圆饭,我们这还有博饼的习俗。上篇文章<嫦娥飞天动画简易版>实现了个简单版的嫦娥奔月,那继上篇文章来实现个在线博饼。
啥你不知道什么是博饼?博饼是起源于福建厦门的中秋传统活动,它的文化和历史我就不详细说了,简单说一下规则,总体就是扔六个骰子,看其属于什么类型的奖励,类似德州扑克中的 同花顺、金刚、葫芦…,博饼分为状元,对堂、四进、三红、二举、一秀,来看图:
分析一波
最主要的就是实现六个骰子,然后让其随机扔出,并显示对应的点数,然后根据六个骰子去判断它得到了什么等级的奖励。看起来不难,来一版js版的先。
得到六个1-6的随机数
function bobing(){
let arr = [];
for(var i=0;i<6;i++){
let num = Math.ceil(Math.random()*6)
arr.push(num)
}
return arr
}
复制代码
可以在浏览器中直接使用:
博饼结果有了,那就是要来根据规则判断奖励了
根据博饼规则取判断结果
我的想法是先去统计1-6的个数,根据1-6点数个数去判断结果。
先来统计1-6的个数:
function getResult(bobingArr){
let dsArr = [0, 0, 0, 0, 0, 0];
bobingArr.forEach(item => {
dsArr[item - 1]++
});
return dsArr
}
复制代码
获得各点数个数:
规则:
- 4个4+2个1为状元插金花
- 4个4+非2个1为状元
- 5个或者6个相同数出现为状元
- 123456为对堂
- 仅有3个4为三红
- 4个非4点数出现为四进
- 仅有2个4为二举
- 仅有1个4为一秀
- 其它为无奖励
知道规则那去判断奖励,就简单了
// 根据1-6出现个数去判断结果是什么奖项
// dsArr为上面统计1-6的个数数组:
// 状元插金花
if (dsArr[3] === 4 && dsArr[0] === 2) {
console.log('状元插金花')
}
// 4个4 状元
if (dsArr[3] >= 4) {
console.log('状元')
}
// 3个4 三红
if (dsArr[3] === 3) {
console.log('三红')
}
// 对堂123456
if (dsArr[0] === 1 && dsArr[1] === 1 && dsArr[2] === 1 && dsArr[3] === 1 && dsArr[4] === 1 && dsArr[5] === 1) {
console.log('对堂')
}
// 2举
if (dsArr[3] === 2) {
console.log('2举')
}
// 1秀
if (dsArr[3] === 1) {
console.log('1秀')
}
// 五个相同及以上 状元
if (dsArr.some(item => { return item > 4 })) {
console.log('状元')
}
// 4进
if (dsArr.some(item => { return item === 4 })) {
console.log('4进')
}
// 没有奖励
if (dsArr[3] === 0) {
rconsole.log('没有奖励')
}
复制代码
完整代码:
function bobing(){
let arr = [];
for(var i=0;i<6;i++){
let num = Math.ceil(Math.random()*6)
arr.push(num)
}
console.log(arr)
let dsArr = [0, 0, 0, 0, 0, 0];
arr.forEach(item => {
dsArr[item - 1]++
});
if (dsArr[3] === 4 && dsArr[0] === 2) {
console.log('状元插金花')
return false;
}
// 4个4 状元
if (dsArr[3] >= 4) {
console.log('状元')
return false;
}
// 3个4 三红
if (dsArr[3] === 3) {
console.log('三红')
return false;
}
// 对堂123456
if (dsArr[0] === 1 && dsArr[1] === 1 && dsArr[2] === 1 && dsArr[3] === 1 && dsArr[4] === 1 && dsArr[5] === 1) {
console.log('对堂')
return false;
}
// 2举
if (dsArr[3] === 2) {
console.log('2举')
return false;
}
// 1秀
if (dsArr[3] === 1) {
console.log('1秀')
return false;
}
// 五个相同及以上 状元
if (dsArr.some(item => { return item > 4 })) {
console.log('状元')
return false;
}
// 4进
if (dsArr.some(item => { return item === 4 })) {
console.log('4进')
return false;
}
// 没有奖励
if (dsArr[3] === 0) {
console.log('没有奖励')
return false;
}
}
复制代码
写好,测试一下来个100连博:
到此js版博饼是已经结束的,那文字版是远远满足不了大家的,所以接下来要给各个步骤加上动画了
实现博饼
我这里直接用了上个h5项目,嫦娥奔月的代码,直接在其基础实现个博饼项目
背景图是个嫦娥奔月,这里就不说了,想知道实现,看上篇文章
因为上一步已经把js规则给理通了,现在缺的是把摇骰子实现动画版。
这时候你就要会CSS3 3D 转换加一些页面布局就很快实现博饼,感觉其它都很简单,就不详细说了
快乐的博饼就是一群友好的小伙伴或者和家人一起参加(当然准备的奖品要丰富)
项目地址
下图放个对堂的截图,如果你中到状元,欢迎留言告诉我,真实奖品可能给不起,只能给你个享受博饼的过程。
PS:word图片有点大,请你们忍一下,首屏加载待优化。还有那愿你们别把我配置很低的服务器给挤爆了。如果你还有想补充或者说明的欢迎留言评论。
小结
这只是一个粗糙版本,还有很多需要优化的地方,比如给动画优化、7点固定点位不够随机、首屏加载待优化等等。
PS:如果你也想录个视频转为gif图片,那你可以试试:window用的是screenToGif macbook可以试试GIPHY CAPTURE(cap)。 都是免费无水印,来自朋友推荐。
中秋将至,愿君月圆人圆事事圆满,愿君爱情甜蜜生活美满!!!
中秋将至,愿君月圆人圆事事圆满,愿君爱情甜蜜生活美满!!!
中秋将至,愿君月圆人圆事事圆满,愿君爱情甜蜜生活美满!!!
如果你还有想补充或者说明的欢迎留言评论。
熟能生巧(Practice make perfect!)。