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

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