游戏开发 - Math对象相关知识讲解
前几期小编给大家总结了JavaScript的基础知识,为我们后期深入学习JS打下了一定的基础。在后面的几期文章当中我们要来进行JS小游戏的开发,但是开发小游戏的前提我们需要掌握Math对象,它是开发小游戏必不可少的一个知识点。
本文内容概要:
1 为何要学习Math对象
2 Math对象是什么
3 使用random()方法产生随机数
4 使用Math对象的方法进行取整
5 根据范围产生随机数
6 课程小结
7 课后作业
1 为何要学习Math对象
在生活中我们可能会遇到“随机抽签”、“随机点名”、“抽奖”等事情,它们的共同点都是要求“随机”产生。那在JS里面,我们如何才能实现“随机”的效果?可以利用Math对象来达到相应的效果,具体接着往下看吧。
2 Math对象是什么
Math对象是属于JS内置的对象,换句话说,不需要我们人为的去创建对象(通过new操作符创建对象)而是可以直接的去使用Math对象里面的方法/属性,如:Math.random()等。
3 使用random()方法产生随机数
实例:
<script type="text/javascript">
var randomNum = Math.random();
// 输出产生的随机数
console.log(randomNum);
</script>
结果:
结论:
从结果当中我们可以得出结论:random()方法返回介于0和1之间的一个随机数,不包括0和1。
4 使用Math对象的方法进行取整
前面几期我们接触过了使用parseInt()方法来进行取整,但是该方法不管后面小数的值是多少,都是直接舍去小数部分,比如parseInt(1.7);等于1,parseInt(0.5);等于0。如果想具体了解parseInt()的使用,可以回复“操作”到“HTML5学堂”公众号。Math对象里面封装了三种不同的舍入方法,便于开发者根据不同的情况采取不同的取整方式。
ceil()它将数值向上舍入为最接近的整数
实例:
<script type="text/javascript">
console.log(Math.ceil(-0.2));
console.log(Math.ceil(0.2));
console.log(Math.ceil(-1.2));
console.log(Math.ceil(-4.2));
console.log(Math.ceil(5.2));
</script>
结果:
注意:负数的值越大,数值就要越小,所以负数向上取整的时候,数值要变小;
round()它将数值四舍五入为最接近的整数
实例:
<script type="text/javascript">
console.log(Math.round(-0.2));
console.log(Math.round(0.24));
console.log(Math.round(-1.5));
console.log(Math.round(-4.2));
console.log(Math.round(5.5));
console.log(Math.round(-2.5));
</script>
结果:
注意:当负数的小数等于0.5的时候,不会发生“整数进一”的现象,只有负数的小数大于0.5的时候,才会发生“整数进一”的现象;
floor()它将数值向下舍入为最接近的整数
实例:
<script type="text/javascript">
console.log(Math.floor(-0.2));
console.log(Math.floor(0.2));
console.log(Math.floor(-1.2));
console.log(Math.floor(-4.2));
console.log(Math.floor(5.2));
</script>
结果:
注意:负数的值越小,数值就要越大,所以负数向下取整的时候,数值要变大;
5 根据范围产生随机数
现在我们可以使用random()方法产生0~1的随机数,那如何产生0~15(不包括0和15)的随机数?
实例:
<script type="text/javascript">
console.log(Math.random() * 15);
</script>
结果:产生0 ~ 15的数,如:9.664246013519413、10.470054313898528,随机的结果都不是整数;
小编提出了另外一个需求:那如何产生0~15(不包括0和15)的随机整数?
实例:
<script type="text/javascript">
console.log(Math.ceil(Math.random() * 14));
</script>
结果:产生1 ~ 14的整数;1乘以小于1(Math.random())的数结果肯定是小于1的小数,再向上取整最大只能是1;14乘以小于1(Math.random())的数结果肯定是小于14的数(包含小数部分),再向上取整最大只能是14;
小编又提出了另外一个需求:如何产生1 ~ 8的整数,包括1和8?
实例:
<script type="text/javascript">
// 方法一:四舍五入
console.log(Math.round(Math.random() * 7) + 1);
// 方法二:向上取整
console.log(Math.ceil(Math.random() * 8));
// 方法三:向下取整
console.log(Math.floor(Math.random() * 8) + 1);
</script>
问题:三种舍入方法都可以实现根据范围产生随机数,那我们平常推荐使用哪一种方法?
下图是小编做了部分概率分析的结果
结论:从结果中得出,使用floor()方法概率会比较均等,所以小编推荐大家平常使用向下取整来产生相应的随机数,这样概率会相对均等一点。
根据范围产生的随机数其实是有一定的规律,小编推荐大家使用下面的公式来产生随机数,简单快捷。
公式:Math.floor(Math.random() * 可能值的总数 + 第一个可能的值 );
6 课程小结
可以通过Math.random()方法产生0 ~ 1的随机数;
为了保证产生的随机数是整数,我们可以使用floor()、ceil()、round()进行取整;
为了让产生的随机数概率相对均等一点,推荐使用floor()方法进行取整;
根据范围产生随机数我们可以利用该公式:Math.floor(Math.random() * 可能值的总数 + 第一个可能的值 );
7 课后作业
点击粉红色的色块,产生一个随机数,然后根据产生的随机数选中一个块设置样式为粉红色。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 宝石与石头
- 给你的MyBatis-Plus装上批量插入的翅膀
- pytorch和tensorflow的爱恨情仇之参数初始化
- scp命令
- osgEarth使用笔记4——加载矢量数据
- Pots(POJ - 3414)【BFS 寻找最短路+路径输出】
- Vue路由Hash模式分析
- Flutter基础widgets教程-CupertinoButton篇
- 利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料)
- 组合模式
- Js中数组空位问题
- 反转字符串
- Prime Path(POJ - 3126)【BFS+筛素数】
- (leetcode每日打卡)秋叶收藏集【动态规划】
- 设计模式~调停者模式(Mediator)