详谈JS中实现种子随机数及作用


Posted in Javascript onJuly 19, 2016

前言

在前端开发中,尤其是游戏开发,经常会用到随机数,那么我们会第一时间想到:Math.random,大家略微的看看如下代码:

for (var i= 0; i<10; i++) { document.writeln(Math.random() +"<br />"); }

运行如上代码,也确实生成了10个不同的数字,当然你可以生成更多,看起来挺不错的,如果仅仅如此,那么本文就没必要写了。

示例

试着想一下,如果在某一个场景,我们做一个游戏,用户玩到一半的时候退出了,这样用户下次进来可以选择继续上一次的进度继续玩,那么现在问题来了:用户玩的进度以及用户的积分等简单的描述数据,我们都可以记录下来,但是游戏里绘制的障碍物、飞行物以及很多装饰类的小玩意儿,他们甚至是每次用户点开始随机输出的,要把画布上所有的东西以及它们的大小,位置等都记录下来,实在是没必要。

于是种子随机数就闪亮登场了,我们如果在画布上元素随机绘制的时候,有一个种子值,页面上所有元素的位置、大小等都是根据这个种子来算的,那么等到第二次绘制的时候只需要传入这个种子,就可以重现之前未完成的画布元素。

那么这个时候,你会发现JS里面自带的Math.random就不好使了,无法满足需求,我们继续看这段代码:

Math.seed = 5; Math.seededRandom = function(max, min) { max = max || 1; min = min || 0; Math.seed = (Math.seed * 9301 + 49297) % 233280; var rnd = Math.seed / 233280.0; return min + rnd * (max - min); }; for (var i= 0; i<10; i++) { document.writeln(Math.seededRandom() +"<br />"); }

运行如上代码你会发现如果种子Math.seed不变,那么生成的随机数是不会变化的,哦了,如果引入这个函数,那么重现游戏场景可以实现了,虽然还需要做更多的细节处理,但机制上是能保证的,本文的重点不是实现一个这样的游戏。

本文的重点是:(Math.seed * 9301 + 49297) % 233280,为什么会是这三个值,而不是其它的到底这三个数字有什么神秘的来历呢?

像Math.seededRandom这种伪随机数生成器叫做线性同余生成器(LCG, Linear Congruential Generator),几乎所有的运行库提供的rand都是采用的LCG,形如:

I n+1=aI n+c(mod m)

生成的伪随机数序列最大周期m,范围在0到m-1之间。要达到这个最大周期,必须满足:
1.c与m互质

2.a - 1可以被m的所有质因数整除

3.如果m是4的倍数,a - 1也必须是4的倍数

以上三条被称为Hull-Dobell定理。作为一个伪随机数生成器,周期不够大是不好意思混的,所以这是要求之一。因此才有了:a=9301, c = 49297, m = 233280这组参数,以上三条全部满足。

总结

以上就是关于种子随机数在JS中如何实现和作用介绍的内容,希望给JavaScript学习者有所帮助

Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
Vue动态实现评分效果
May 24 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
全面了解JavaScript对象进阶
Jul 19 #Javascript
EasyUI中在表单提交之前进行验证
Jul 19 #Javascript
jQuery EasyUI提交表单验证
Jul 19 #Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 #Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 #Javascript
JS动态给对象添加事件的简单方法
Jul 19 #Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 #Javascript
You might like
用来解析.htgroup文件的PHP类
2012/09/05 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
js select option对象小结
2013/12/20 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
物理教学随笔感言
2014/02/22 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
生日寄语大全
2014/04/08 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
求职信模板
2014/05/23 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS