如何用JavaScript编写一个中秋博饼游戏的长尾？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1527个文字，预计阅读时间需要7分钟。
目录
1.什么是中秋节（中秋博饼）
2.游戏玩法
2.1 道具 2.2 流程 2.3 规则3.中秋博饼H5设计（直接进入）
3.1 介绍 3.2 点击开始博饼4.导入程序
4.1 自己DIY5.代码实现
5.1 index.js 5.2 mid-autumn.js目录
- 1、什么是中秋节（中秋博饼）
- 2、游戏玩法
- 2.1 道具
- 2.2 流程
- 2.3 规则
- 3.中秋博饼H5设计（直接进入）
- 3.1介绍
- 3.2点击开始博饼
- 4.导入程序自己diy
- 5. 代码实现
- 5.1 indexjs
- 5.2 mid-autumn.js代码逻辑
1、什么是中秋节（中秋博饼）
中秋节的最大特征是将人与自然和谐的美好愿望寄托在天上，八月中正当农业丰收的季节，月饼和瓜果既是敬神的供品，也是丰收的具体象征。花好月圆之夜户户团聚，加强了亲情关系，中秋节亦因此而成为社会和谐的重要媒介。
中秋博饼习俗源于福建厦门，盛行于漳州的龙海、泉州的安海和金门县等地，清代康乾时期的《台湾府志》曾有过相关记载。每逢中秋佳节，闽南及台湾地区会以家庭或社团为单位，自发举行中秋博饼活动，参加者以六个骰子轮流投掷，博取状元、榜眼、探花、进士、举人、秀才六个等第并按等第获取大小不同的月饼。博饼的游戏规则简单公平，既充满竞争悬念，又富于生活情趣，历来为广大民众所喜爱。
2、游戏玩法
2.1 道具
大的瓷碗一个，类似盛汤那种大碗。其次是六个骰子，多一个少一个都不行。
2.2 流程
每个人按人数围成一桌，一般博饼都会有聚餐，每一桌大概10人左右。然后围成圈，将瓷碗放置在桌子中间。然后每人依次把6个骰子投进大碗里，博到什么就领取什么奖品，如果没有博到任何奖品也需要将骰子交付给下一位成员，然后由下一位成员继续投骰子，根据骰子的点数得获取奖品，直至所有的奖品全部博完为止。
2.3 规则
根据科举制度来划分等级，由高到低。
六抔红：六个4====>所有的饼全归投者所有。
六抔黑：六个其他数字。
状元插金花：四个4+两个1。
五子登科：五个相同的数。
状元：四个4带其他两个任意数。
对堂：摇出顺子，比如123456
四进：除了4以外的四个相同的数，比如666611
三红：三个4
二举：两个4
一秀：一个4
3.中秋博饼H5设计（直接进入）
中秋博饼H5
3.1介绍
3.2点击开始博饼
4.导入程序自己diy
程序链接：
中秋博饼H5代码
提取码：d47f
启动开发
$ cd mid-autumn $ npm install $ npm start
编译打包
$ npm run build
抽出通用的博饼逻辑
返回博饼结果
提前设置结果
判断奖项
5. 代码实现
5.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(); }) });
5.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: '未中奖', } } } }
到此这篇关于JavaScript实现中秋博饼游戏的示例代码的文章就介绍到这了,更多相关JavaScript中秋博饼内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！
本文共计1527个文字，预计阅读时间需要7分钟。
目录
1.什么是中秋节（中秋博饼）
2.游戏玩法
2.1 道具 2.2 流程 2.3 规则3.中秋博饼H5设计（直接进入）
3.1 介绍 3.2 点击开始博饼4.导入程序
4.1 自己DIY5.代码实现
5.1 index.js 5.2 mid-autumn.js目录
- 1、什么是中秋节（中秋博饼）
- 2、游戏玩法
- 2.1 道具
- 2.2 流程
- 2.3 规则
- 3.中秋博饼H5设计（直接进入）
- 3.1介绍
- 3.2点击开始博饼
- 4.导入程序自己diy
- 5. 代码实现
- 5.1 indexjs
- 5.2 mid-autumn.js代码逻辑
1、什么是中秋节（中秋博饼）
中秋节的最大特征是将人与自然和谐的美好愿望寄托在天上，八月中正当农业丰收的季节，月饼和瓜果既是敬神的供品，也是丰收的具体象征。花好月圆之夜户户团聚，加强了亲情关系，中秋节亦因此而成为社会和谐的重要媒介。
中秋博饼习俗源于福建厦门，盛行于漳州的龙海、泉州的安海和金门县等地，清代康乾时期的《台湾府志》曾有过相关记载。每逢中秋佳节，闽南及台湾地区会以家庭或社团为单位，自发举行中秋博饼活动，参加者以六个骰子轮流投掷，博取状元、榜眼、探花、进士、举人、秀才六个等第并按等第获取大小不同的月饼。博饼的游戏规则简单公平，既充满竞争悬念，又富于生活情趣，历来为广大民众所喜爱。
2、游戏玩法
2.1 道具
大的瓷碗一个，类似盛汤那种大碗。其次是六个骰子，多一个少一个都不行。
2.2 流程
每个人按人数围成一桌，一般博饼都会有聚餐，每一桌大概10人左右。然后围成圈，将瓷碗放置在桌子中间。然后每人依次把6个骰子投进大碗里，博到什么就领取什么奖品，如果没有博到任何奖品也需要将骰子交付给下一位成员，然后由下一位成员继续投骰子，根据骰子的点数得获取奖品，直至所有的奖品全部博完为止。
2.3 规则
根据科举制度来划分等级，由高到低。
六抔红：六个4====>所有的饼全归投者所有。
六抔黑：六个其他数字。
状元插金花：四个4+两个1。
五子登科：五个相同的数。
状元：四个4带其他两个任意数。
对堂：摇出顺子，比如123456
四进：除了4以外的四个相同的数，比如666611
三红：三个4
二举：两个4
一秀：一个4
3.中秋博饼H5设计（直接进入）
中秋博饼H5
3.1介绍
3.2点击开始博饼
4.导入程序自己diy
程序链接：
中秋博饼H5代码
提取码：d47f
启动开发
$ cd mid-autumn $ npm install $ npm start
编译打包
$ npm run build
抽出通用的博饼逻辑
返回博饼结果
提前设置结果
判断奖项
5. 代码实现
5.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(); }) });
5.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: '未中奖', } } } }
到此这篇关于JavaScript实现中秋博饼游戏的示例代码的文章就介绍到这了,更多相关JavaScript中秋博饼内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！