中秋节快乐大家快来《在线博饼》

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

前言

中秋佳节即将到来，除了赏月、恰月饼、吃团圆饭，我们这还有博饼的习俗。上篇文章<嫦娥飞天动画简易版>实现了个简单版的嫦娥奔月，那继上篇文章来实现个在线博饼。

啥你不知道什么是博饼？博饼是起源于福建厦门的中秋传统活动,它的文化和历史我就不详细说了，简单说一下规则，总体就是扔六个骰子，看其属于什么类型的奖励，类似德州扑克中的同花顺、金刚、葫芦...，博饼分为状元，对堂、四进、三红、二举、一秀，来看图：

分析一波

最主要的就是实现六个骰子，然后让其随机扔出，并显示对应的点数，然后根据六个骰子去判断它得到了什么等级的奖励。看起来不难，来一版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('状元')
    }
    // 五个相同及以上 状元
    if (dsArr.some(item => { return item > 4 })) {
      console.log('状元')
    }
    // 4进
    if (dsArr.some(item => { return item === 4 })) {
      console.log('4进')
    }
    // 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[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;
    }
    // 五个相同及以上 状元
    if (dsArr.some(item => { return item > 4 })) {
      console.log('状元')
      return false;
    }
    // 4进
    if (dsArr.some(item => { return item === 4 })) {
      console.log('4进')
      return false;
    }
    // 2举
    if (dsArr[3] === 2) {
      console.log('2举')
      return false;
    }
    // 1秀
    if (dsArr[3] === 1) {
      console.log('1秀')
      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!)。

中秋节快乐 大家快来《在线博饼》

前言