游戏开发 - 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 课后作业

点击粉红色的色块,产生一个随机数,然后根据产生的随机数选中一个块设置样式为粉红色。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏灯塔大数据

每周学点大数据 | No.22 外排序

No.22期 外排序(一) Mr. 王:接下来我们看一看在磁盘算法中一个比较典型的例子——外排序。 小可:那什么又是外排序呢? Mr. 王:外排序是相...

3586
来自专栏计算机视觉与深度学习基础

Leetcode 218. The Skyline Problem 线段树

A city's skyline is the outer contour of the silhouette formed by all the build...

2879
来自专栏开发与安全

从零开始学C++之STL(四):算法简介、7种算法分类

一、算法 算法是以函数模板的形式实现的。常用的算法涉及到比较、交换、查找、搜索、复制、修改、移除、反转、排序、合并等等。 算法并非容器类型的成员函数,而是一...

1930
来自专栏IT可乐

深入理解计算机系统(2.6)------整数的运算

  前面两篇博客我们详细讲解了计算机中整数的表示,包括有符号和无符号(补码编码)的详细介绍。那么这篇博客我们将对它们的运算有个详细的了解。   在讲解之前首先看...

2467
来自专栏用户2442861的专栏

对vector等STL标准容器进行排序操作

STL几乎封装了所有的数据结构中的算法,从链表到队列,从向量到堆栈,对hash到二叉树,从搜索到排序,从增加到删除......可以说,如果你理解了STL,你会...

1912
来自专栏chenjx85的技术专栏

leetcode-566-Reshape the Matrix

1947
来自专栏锦小年的博客

Python数据分析(2)-pandas数据结构操作

pandas是一个提供快速、灵活、表达力强的数据结构的Python库,适合处理‘有关系’或者‘有标签’的数据。在利用Python做数据分析的时候,pandas是...

25110
来自专栏算法channel

直接选择排序到堆排序做的那些改进

主要推送关于对算法的思考以及应用的消息。坚信学会如何思考一个算法比单纯地掌握100个知识点重要100倍。本着严谨和准确的态度,目标是撰写实用和启发性的文章,欢迎...

2867
来自专栏互联网大杂烩

快速排序

快速排序是找出一个元素(理论上可以随便找一个)作为基准(pivot),然后对数组进行分区操作,使基准左边元素的值都不大于基准值,基准右边的元素值 都不小于基准值...

662
来自专栏CDA数据分析师

学会这8个(组)excel函数,轻松解决工作中80%的难题

文 | 兰色幻想-赵志东 函数是excel中最重要的分析工具,面对400多个excel函数新手应该从哪里入手呢?下面是实际工作中最常用的8个(组)函数,学会后工...

1917

扫码关注云+社区