I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

The Mid-Autumn Festival is coming, in addition to the moon, moon cakes, eat reunion dinner, we have the custom of bo cake. The last article < Chang ‘e flying animation simple version > to achieve a simple version of the Chang ‘e moon, that following the last article to achieve an online bo cake.

What? You don’t know what a burger is? Bo Bing is a traditional Mid-Autumn Festival activity originated in Xiamen, Fujian Province. I will not elaborate on its culture and history. I will briefly talk about the rules. , bo pie is divided into the number one, on the hall, four into three red, two lift, a show, look at the picture:

Analysis of a wave

The main thing is to implement six dice, and then have it randomly roll, and display the corresponding number of dice, and then determine what level of reward it gets based on the six dice. It doesn’t look difficult, so let’s have a JS version first.

Get six random numbers 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 }Copy the code

Can be used directly in the browser:

The result of the blog pie is that it is time to judge the reward according to the rules

Judge the result according to the rule of bo pie

My idea is to count numbers 1-6 and judge the result based on numbers 1-6.

Let’s start with the numbers from 1 to 6:

function getResult(bobingArr){
  let dsArr = [0, 0, 0, 0, 0, 0];
  bobingArr.forEach(item => {
    dsArr[item - 1]++
  });
  return dsArr
  }
Copy the code

The number of points obtained:

Rules:

  • Four fours and two ones are the golden flowers for the champion
  • Four fours and not two ones are the top picks
  • Five or six of the same number appear as no.1
  • 123456 to don
  • There are only three fours that are three red
  • Four non-fours appear as a quad
  • There are only two fours for two lifts
  • There’s only one 4 for a show
  • Others are not rewarded

It's easy to judge the reward if you know the rules

// dsArr is an array of numbers from 1 to 6: / / top plug golden flower the if (dsArr [3] = = = 4 && dsArr [0] = = = 2) {the console. The log (' top put golden flower ')} / / four 4 top if (dsArr [3] > = 4) { The console. The log (' champions')} / / 3 4 three red if (dsArr [3] = = = 3) {the console. The log () 'red'} / / # 123456 if (dsArr [0] = = = 1 && dsArr [1] = = = 1 && dsArr [2] = = = 1 && dsArr [3] = = = 1 && dsArr [4] = = = 1 && dsArr [5] = = = 1) {the console. The log (' for don ')} / / 2 for the if (dsArr [3] = = = 2) {console.log('2 ')} // 1 show if (dsArr[3] === 1) {console.log('1 show ')} // five same or more number if (dsarr.some (item => {return Some (item => {return item === 4})) {console.log('4 ')} // No reward if (dsArr[3] === 0) {rconsole.log(' no reward ')}Copy the code

Complete code:

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(' dsArr ') return false; } if (dsArr[3] >= 4) {console.log(' console.log ') return false; } if (dsArr[3] === 3) {console.log(' three red ') return false; } / / for # 123456 if (dsArr [0] = = = 1 && dsArr [1] = = = 1 && dsArr [2] = = = 1 && dsArr [3] = = = 1 && dsArr [4] = = = 1 && dsArr [5] = = = 1) {console.log(' console.log ') return false; } // 2 lift if (dsArr[3] === 2) {console.log('2 lift ') return false; } // 1 show if (dsArr[3] === 1) {console.log('1 show ') return false; } if (dsarr.some (item => {return item > 4})) {console.log(' return item ') return false; } // 4 enter if (dsarr.some (item => {return item === 4})) {console.log('4 enter ') return false; } // No reward if (dsArr[3] === 0) {console.log(' no reward ') return false; }}Copy the code

Write well, test a next 100 consecutive blog:

To this JS version of the blog cake is already over, the text version is far from satisfying everyone, so the next steps to add animation

Implement bo cake

Here I directly used the last H5 project, the code of the Moon, directly on its basis to achieve a bo cake project

Background is a Chang ‘e moon, here will not say, want to know the realization, see the article

Because the previous step has been the JS rules to rationalize, now the lack is to roll the dice to achieve animation version.

At this point you will be able to CSS3 3D conversion and some page layout soon to achieve the blog cake, feel the rest is very simple, I will not go into details

Happy pancake is a group of friendly friends or family (of course, prepare a rich prize).

The project address

Bo Pie online address

If you win the first prize, please leave a comment and tell me, the real prize may not be given to you, but you can enjoy the process of bo pie.

PS: Word picture is a bit big, please bear with me, the first screen loading needs to be optimized. And I hope you don’t overwhelm my low-powered server. Feel free to leave a comment if you have anything to add or clarify.

summary

This is just a rough version, there are a lot of things that need to be optimized, such as the animation optimization, the 7 fixed points are not random enough, the first screen loading needs to be optimized, etc.

If you want to record a video and turn it into a GIF image, you can try: Windows uses screenToGif. Macbook can try GIPHY CAPTURE(Cap). Are free watermarking, from friends recommended.

Mid-Autumn festival will come, wish you a full moon person circle everything is satisfactory, wish you love sweet life happy!!

Mid-Autumn festival will come, wish you a full moon person circle everything is satisfactory, wish you love sweet life happy!!

Mid-Autumn festival will come, wish you a full moon person circle everything is satisfactory, wish you love sweet life happy!!

Feel free to leave a comment if you have anything to add or clarify.

Practice makes perfect! .