原生JS面向对象编程-随机方块案例首先创建背景样式，写入CSS样式文件css/index.css。制作一个工具对象，用

首先创建背景样式，写入CSS样式文件css/index.css。

* {
  margin: 0;
  padding: 0;
}
.stage {
  position: relative;
  width: 800px;
  height: 600px;
  background-color: lightgray;
}

制作一个工具对象，用来存放方块的各种操作方法。代码写入js/tools.js文件中。

// 制作一个工具对象，内部添加多种工具的方法
var Tools = {
  // 获取一个范围内部的随机整数
  getRandom: function (min,max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
  },
  // 获取随机颜色的方法
  getColor: function () {
    // rgb(r,g,b)  三个色值的颜色可以随机获取 0-255 之间的数字
    // 获取三个色值
    var r = this.getRandom(0,255);
    var g = this.getRandom(0,255);
    var b = this.getRandom(0,255);
    // 返回一个 颜色值
    return "rgb("+r+","+g+","+b+")";
  }
};

制作一个生成随机方块的构造函数，渲染代码设置给原型对象。代码写入js/block.js文件中。

// 自定义一个 随机方块 的构造函数
function Block(parent,option) {
  // 设置方块的属性：宽度，高度，背景颜色，定位位置
  // 需要做一步操作，确保用户输入的是一个对象
  option = option || {};
  // 通过 this 添加属性
  this.width = option.width || 20;
  this.height = option.height || 20;
  this.backgroundColor = option.backgroundColor || "red";
  this.x = option.x || 0;
  this.y = option.y || 0;
  // 存储自己的父级到对象上
  this.parent = parent;
}
// 需要生成的随机方块对象，渲染到页面上，设置给原型对象
Block.prototype.render = function () {
  // 创建一个新的元素
  this.ele = document.createElement("div");
  // 需要添加给指定的父级
  this.parent.appendChild(this.ele);
  // 添加css样式
  this.ele.style.width = this.width + "px";
  this.ele.style.height = this.height + "px";
  this.ele.style.backgroundColor = this.backgroundColor;
  this.ele.style.left = this.x + "px";
  this.ele.style.top = this.y + "px";
};

在index.html文件中方块实例生成之后，我们就可以得到一个位置随机的小方块。进行引用，测试，我们就在浏览器上看到生成了颜色随机的小方块。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="stage" id="stage"></div>
  <script src="js/tools.js"></script>
  <script src="js/block.js"></script>
  <script>
  	var stage = document.getElementById("stage");
  	// 生成一个实例
    var block = new Block(stage,{backgroundColor: Tools.getColor()});
    block.render();
  </script>
</body>
</html>

上面只是生成了一个颜色随机的小方块。我们还需要位置随机。于是在js/block.js文件中给原型对象添加位置随机方法。

// 随机更改位置的方法
Block.prototype.positionRandom = function () {
  // 获取元素的坐标，随机的
  this.x = Tools.getRandom(0,this.parent.clientWidth / this.width - 1) * this.width;
  this.y = Tools.getRandom(0,this.parent.clientHeight / this.height - 1) * this.height;
  // 赋值给样式
  // 这个方法内部不能调用另外一个方法内部的变量
  this.ele.style.left = this.x + "px";
  this.ele.style.top = this.y + "px";
};

将随机位置函数添加在index.html文件中方块实例生成之后，我们就可以得到一个位置随机的小方块。
这样的随机小方块对象我们需要10个，于是用一个for循环生成它们并存储在一个数组中。这样就得到10个位置颜色随机生成的小方块。

    var stage = document.getElementById("stage");
    
    // 通过一个空数组，记录添加的所有方块对象
    var arr = [];
    // 循环添加是个方块到页面上
    for (var i = 1 ; i <= 10 ; i++) {
      // 生成一个实例
      var block = new Block(stage,{backgroundColor: Tools.getColor()});
      block.render();
      // 初始阶段就让元素随机位置
      block.positionRandom();
      // 数组中添加记录一项
      arr.push(block);
    }

增加一个定时器，使小方块们的位置定时变换移动。代码加入index.html中。于是index.html代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="stage" id="stage"></div>
  <script src="js/tools.js"></script>
  <script src="js/block.js"></script>
  <!-- <script src="js/index.js"></script> -->
  <script>
    var stage = document.getElementById("stage");
    
    // 通过一个空数组，记录添加的所有方块对象
    var arr = [];
    // 循环添加是个方块到页面上
    for (var i = 1 ; i <= 10 ; i++) {
      // 生成一个实例
      var block = new Block(stage,{backgroundColor: Tools.getColor()});
      block.render();
      // 初始阶段就让元素随机位置
      block.positionRandom();
      // 数组中添加记录一项
      arr.push(block);
    }
    // 需要每隔一段时间让位置再次随机变化
    // 开启定时器
    setInterval(function () {
      for (var i = 0 ; i < arr.length ; i++) {
        arr[i].positionRandom();
      }
    },1000);
  </script>
</body>
</html>

上面的代码看上去有点违和。于是将index.html中JavaScript代码剥离出来，单独创建一个js/index.js来存储。

var stage = document.getElementById("stage");
    
// 通过一个空数组，记录添加的所有方块对象
var arr = [];
// 循环添加是个方块到页面上
for (var i = 1 ; i <= 10 ; i++) {
  // 生成一个实例
  var block = new Block(stage,{backgroundColor: Tools.getColor()});
  block.render();
  // 初始阶段就让元素随机位置
  block.positionRandom();
  // 数组中添加记录一项
  arr.push(block);
}
// 需要每隔一段时间让位置再次随机变化
// 开启定时器
setInterval(function () {
  for (var i = 0 ; i < arr.length ; i++) {
    arr[i].positionRandom();
  }
},1000);

最后在index.html中引用刚创建的js文件，即制作完成。测试运行，便可在浏览器中看到10个颜色各异的小方块定时地随机变换位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="stage" id="stage"></div>
  <script src="js/tools.js"></script>
  <script src="js/block.js"></script>
  <script src="js/index.js"></script>
  </script>
</body>
</html>