阅读 876

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

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

前言

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

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

97282ca3826be1c69a98604f6f43b4c.png

分析一波

最主要的就是实现六个骰子,然后让其随机扔出,并显示对应的点数,然后根据六个骰子去判断它得到了什么等级的奖励。看起来不难,来一版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
}
复制代码

可以在浏览器中直接使用:

image.png

博饼结果有了,那就是要来根据规则判断奖励了

根据博饼规则取判断结果

我的想法是先去统计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
  }
复制代码

获得各点数个数: image.png

规则:

  • 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;
    }
    // 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连博:

image.png

到此js版博饼是已经结束的,那文字版是远远满足不了大家的,所以接下来要给各个步骤加上动画了

实现博饼

我这里直接用了上个h5项目,嫦娥奔月的代码,直接在其基础实现个博饼项目

背景图是个嫦娥奔月,这里就不说了,想知道实现,看上篇文章

因为上一步已经把js规则给理通了,现在缺的是把摇骰子实现动画版。

这时候你就要会CSS3 3D 转换加一些页面布局就很快实现博饼,感觉其它都很简单,就不详细说了

9.gif

快乐的博饼就是一群友好的小伙伴或者和家人一起参加(当然准备的奖品要丰富)

项目地址

博饼在线地址

下图放个对堂的截图,如果你中到状元,欢迎留言告诉我,真实奖品可能给不起,只能给你个享受博饼的过程。

image.png

PS:word图片有点大,请你们忍一下,首屏加载待优化。还有那愿你们别把我配置很低的服务器给挤爆了。如果你还有想补充或者说明的欢迎留言评论。

小结

这只是一个粗糙版本,还有很多需要优化的地方,比如给动画优化、7点固定点位不够随机、首屏加载待优化等等。

PS:如果你也想录个视频转为gif图片,那你可以试试:window用的是screenToGif macbook可以试试GIPHY CAPTURE(cap)。 都是免费无水印,来自朋友推荐。

中秋将至,愿君月圆人圆事事圆满,愿君爱情甜蜜生活美满!!!

中秋将至,愿君月圆人圆事事圆满,愿君爱情甜蜜生活美满!!!

中秋将至,愿君月圆人圆事事圆满,愿君爱情甜蜜生活美满!!!

如果你还有想补充或者说明的欢迎留言评论。

熟能生巧(Practice make perfect!)。

567570eb04c107f0a5d6ccf93447999.png

文章分类
前端
文章标签