0


“程序员”视角下的中秋夜之美__中秋节(中秋博饼)H5小游戏

1、什么是中秋节(中秋博饼)

    中秋节的最大特征是将人与自然和谐的美好愿望寄托在天上,八月中正当农业丰收的季节,月饼和瓜果既是敬神的供品,也是丰收的具体象征。花好月圆之夜户户团聚,加强了亲情关系,中秋节亦因此而成为社会和谐的重要媒介。
     **中秋博饼习俗源于福建厦门,盛行于漳州的龙海、泉州的安海和金门县等地,清代康乾时期的《台湾府志》曾有过相关记载。每逢中秋佳节,闽南及台湾地区会以家庭或社团为单位,自发举行中秋博饼活动,参加者以六个骰子轮流投掷,博取状元、榜眼、探花、进士、举人、秀才六个等第并按等第获取大小不同的月饼。博饼的游戏规则简单公平,既充满竞争悬念,又富于生活情趣,历来为广大民众所喜爱。**

3、游戏玩法

3.1、道具

大的瓷碗一个,类似盛汤那种大碗。其次是六个骰子,多一个少一个都不行。

3.2、流程

每个人按人数围成一桌,一般博饼都会有聚餐,每一桌大概10人左右。然后围成圈,将瓷碗放置在桌子中间。然后每人依次把6个骰子投进大碗里,博到什么就领取什么奖品,如果没有博到任何奖品也需要将骰子交付给下一位成员,然后由下一位成员继续投骰子,根据骰子的点数得获取奖品,直至所有的奖品全部博完为止。

3.3、规则

根据科举制度来划分等级,由高到低。
六抔红:六个4====>所有的饼全归投者所有。

六抔黑:六个其他数字。
状元插金花:四个4+两个1。
五子登科:五个相同的数。
状元:四个4带其他两个任意数。
对堂:摇出顺子,比如123456
四进:除了4以外的四个相同的数,比如666611
三红:三个4
二举:两个4
一秀:一个4

4 中秋博饼H5设计(直接进入)

中秋博饼H5http://res.moyufed.com/mid-autumn/v1.0/index.html

4.1 介绍

4.2 点击开始博饼

5 导入程序自己diy

程序链接:中秋博饼H5代码https://pan.baidu.com/s/1gPmOpGmmJjL3Q2KxR4NJRA?pwd=8888%C2%A0
提取码:8888

启动开发

$ cd mid-autumn

$ npm install

$ npm start

编译打包

$ npm run build
  • 抽出通用的博饼逻辑
  • 返回博饼结果
  • 提前设置结果
  • 判断奖项

6. 代码实现

6.1 indexjs

import { MidAutumn } from './common';
import './style/main.less';

import $ from "jquery";

class Game {
    result = [];
    position = [];

    midAutumn = new MidAutumn();

    start() {
        this.result = this.midAutumn.start();
        // this.result = this.midAutumn.setResult([4, 4, 4, 4, 1, 1]).getResult();
        console.log(this.midAutumn.getAward());
        this.setDice();
    }

    getPosition() {
        let position = []
        this.position = [1, 2, 3, 4, 5, 6, 7];
        for (let i = 0; i < 6; i++) {
            position.push(this.position.splice(Math.floor(Math.random() * this.position.length), 1)[0])
        }
        return position;
    }

    setDice() {
        $("#bowl").removeClass('active');
        const position = this.getPosition();
        $.each($("#bowl .dice"), (index, item) => {
            $(item).removeClass();
            $(item).addClass(`sprite dice dice${this.result[index]} dice-position${position[index]}`)
        })
        setTimeout(() => {
            $("#bowl").addClass('active');
        }, 200)
    }
}

$(() => {
    const game = new Game();
    $("#startGame").click(() => {
        game.start();
    })
});

6.2 mid-autumn.js代码逻辑

export default class MidAutumn {

    constructor(config = {}) {
        this.config = config;
    }

    result = [];
    awardList = [];

    // '000600' 六勃红
    // '600000' 遍地锦
    // '060000' '006000' '000060' '000006' 六勃黑
    // '111111' 对堂
    // '100500' '010500' '001500' '000510' '000501' 五红
    // '5xxxxx' 'x5xxxx' 'xx5xxx' 'xxxx5x' 'xxxxx5' 五子登科
    // '200400' 状元插金花
    // 'xxx4xx' 状元
    // '4xxxxx' 'x4xxxx' 'xx4xxx' 'xxxx4x' 'xxxxx4' 四进
    // 'xxx3xx' 三红
    // 'xxx2xx' 二举
    // 'xxx1xx' 一秀
    rule = [{
        reg: /000600/,
        name: '六勃红'
    }, {
        reg: /600000/,
        name: '遍地锦'
    }, {
        reg: /6/,
        name: '六勃黑'
    }, {
        reg: /111111/,
        name: '对堂'
    }, {
        reg: /^\d{3}5\d{2}$/,
        name: '五红'
    }, {
        reg: /5/,
        name: '五子登科'
    }, {
        reg: /200400/,
        name: '状元插金花'
    }, {
        reg: /^\d{3}4\d{2}$/,
        name: '状元'
    }, {
        reg: /4/,
        name: '四进'
    }, {
        reg: /^\d{3}3\d{2}$/,
        name: '三红'
    }, {
        reg: /^\d{3}2\d{2}$/,
        name: '二举'
    }, {
        reg: /\d{3}1\d{2}$/,
        name: '一秀'
    }]

    _change() {
        const { onChange } = this.config;
        typeof onChange === 'function' && onChange(this.result);
    }

    // 开始博饼
    start() {
        return this.getPoint();
    }

    // 获取随机的6个点数
    getPoint() {
        this.result.length = 0;
        for (let i = 0; i < 6; i++) {
            this.result.push(Math.floor(Math.random() * 6) + 1)
        }
        this._change();
        return this.result;
    }

    // 通过传入特定的6个色子设置结果的点数
    setResult(result) {
        if (!(result instanceof Array) || result.length !== 6) {
            throw new Error('设置的结果必须是一个数字数组,并且每个数字在1到6之间');
        }
        this.result = result;
        this._change();
        return this;
    }

    getResult() {
        return this.result;
    }

    // 统计结果,将不同的点数统计在对应的位置上
    // [1点, 2点, 3点, 4点, 5点, 6点]
    _countResult() {
        this.award = [0, 0, 0, 0, 0, 0];
        this.result.forEach(item => {
            this.award[item - 1]++;
        });
        return this;
    }

    // 判断结果是什么奖项
    getAward() {
        this._countResult();
        const awardString = this.award.join('');
        console.log(awardString);
        if (this.rule && this.rule.length) {
            for (let i = 0; i < this.rule.length; i++) {
                if (this.rule[i].reg.test(awardString)) {
                    return {
                        name: this.rule[i].name,
                    }
                }
            }
            return {
                name: '未中奖',
            }
        }
    }
}
标签: java 前端框架 npm

本文转载自: https://blog.csdn.net/qq_39237205/article/details/126598463
版权归原作者 LiBiGo 所有, 如有侵权,请联系我们删除。

“&ldquo;程序员&rdquo;视角下的中秋夜之美__中秋节(中秋博饼)H5小游戏”的评论:

还没有评论