前端技术分享-码匠 极客编程技术分享

您当前位于：JavaScript高级 ——> 面向对象系列-面向对象案例实战，碰壁反弹
上一篇：原生JavaScript setInterval的相关问题 下一篇：如何在对象原型上添加方法，在对象原型上添加方法会有什么问题？

面向对象系列-面向对象案例实战，碰壁反弹

2015/05/13 20:39:21 | 作者：HTML5学堂（码匠） | 分类：JavaScript高级 | 关键词：面向对象,碰壁反弹,继承,原型

面向对象系列讲解——碰壁反弹-面向对象版本

HTML5学堂：面向对象系列讲解——碰壁反弹-面向对象版本。之前大家可能有写过碰壁反弹效果，如果生成多个球的话会感觉有点卡顿。本文章要给大家讲解用面向对象来实现碰壁反弹，不仅仅减少了代码量，而且还提升了性能。

多个球的碰壁反弹效果如下：

HTML5学堂 面向对象系列讲解——碰壁反弹-面向对象版本 h5course

用面向对象实现碰壁反弹的基本功能

需要的属性：

父级对象

本身的对象

控制移动的属性

计时器属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.   <div class="ball" id="inner"></div>
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId, ballId) {
  30.    // 防止指向错误
  31.    var _this = this;
  32.  
  33.    this.outer = document.getElementById(parentId);
  34.    this.inner = document.getElementById(ballId);
  35.    this.posX = 0;
  36.    this.posY = 0;
  37.    // 调用运动函数
  38.    this.timer = setTimeout(function() {
  39.     _this.move();
  40.     // 注意指向问题
  41.     setTimeout(arguments.callee, 16);
  42.    });
  43.   }
  44.  
  45.   // 运动函数
  46.   Bounce.prototype.move = function() {
  47.    this.posX++;
  48.    this.posY++;
  49.  
  50.    // CSS赋值
  51.    this.inner.style.left = this.posX + "px";
  52.    this.inner.style.top = this.posY + "px";
  53.   };
  54.  
  55.   // 实例化
  56.   var bounce = new Bounce("outer", "inner");
  57.  </script>
  58. </body>
  59. </html>

实现有边界的碰壁反弹

需要的属性：

方向

边界

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - HTML5学堂</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.   <div class="ball" id="inner"></div>
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId, ballId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.getElementById(ballId);
  34.    // 修改初始位置为随机产生
  35.    this.posX = 100;
  36.    this.posY = 100;
  37.    this.moveX = true;
  38.    this.moveY = true;
  39.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  40.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  41.  
  42.    // 调用运动函数
  43.    this.timer = setTimeout(function() {
  44.     _this.move();
  45.     // 注意指向问题
  46.     setTimeout(arguments.callee, 16);
  47.    });
  48.  
  49.    // 初始化
  50.    this.initial();
  51.   }
  52.  
  53.   /*
  54.    * [initial 初始化位置]
  55.    * @return {[type]} [description]
  56.    */
  57.   Bounce.prototype.initial = function() {
  58.    this.inner.style.left =  this.posX + "px";
  59.    this.inner.style.top =  this.posY + "px";
  60.   }
  61.  
  62.   /*
  63.    * [move 运动函数]
  64.    * @return {[type]} [description]
  65.    */
  66.   Bounce.prototype.move = function() {
  67.    // 水平方向
  68.    if (this.moveX) {
  69.     this.posX++;
  70.     if (this.posX >= this.limitX) {
  71.      this.moveX = false;
  72.     };
  73.    } else {
  74.     this.posX--;
  75.     if (this.posX <= 0) {
  76.      this.moveX = true;
  77.     };
  78.    }
  79.  
  80.    // 垂直方向
  81.    if (this.moveY) {
  82.     this.posY++;
  83.     if (this.posY >= this.limitY) {
  84.      this.moveY = false;
  85.     };
  86.    } else {
  87.     this.posY--;
  88.     if (this.posY <= 0) {
  89.      this.moveY = true;
  90.     };
  91.    }
  92.  
  93.    // CSS赋值
  94.    this.inner.style.left = this.posX + "px";
  95.    this.inner.style.top = this.posY + "px";
  96.   };
  97.  
  98.   var bounce = new Bounce("outer", "inner");
  99.  </script>
  100. </body>
  101. </html>

欢迎沟通交流~HTML5学堂

提取速度属性的碰壁反弹

需要的属性：

速度属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.   <div class="ball" id="inner"></div>
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId, ballId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.getElementById(ballId);
  34.    // 修改初始位置为随机产生
  35.    this.posX = 100;
  36.    this.posY = 100;
  37.    this.moveX = true;
  38.    this.moveY = true;
  39.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  40.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  41.    // 添加速度
  42.    this.speed = 3;
  43.  
  44.    // 调用运动函数
  45.    this.timer = setTimeout(function() {
  46.     _this.move();
  47.     // 注意指向问题
  48.     setTimeout(arguments.callee, 16);
  49.    });
  50.  
  51.    // 初始化
  52.    this.initial();
  53.   }
  54.  
  55.   /*
  56.    * [initial 初始化位置]
  57.    * @return {[type]} [description]
  58.    */
  59.   Bounce.prototype.initial = function() {
  60.    this.inner.style.left =  this.posX + "px";
  61.    this.inner.style.top =  this.posY + "px";
  62.   }
  63.  
  64.   /*
  65.    * [move 运动函数]
  66.    * @return {[type]} [description]
  67.    */
  68.   Bounce.prototype.move = function() {
  69.    // 水平方向
  70.    if (this.moveX) {
  71.     this.posX += this.speed;
  72.     if (this.posX >= this.limitX) {
  73.      this.posX = this.limitX;
  74.      this.moveX = false;
  75.     };
  76.    } else {
  77.     this.posX -= this.speed;
  78.     if (this.posX <= 0) {
  79.      this.posX = 0;
  80.      this.moveX = true;
  81.     };
  82.    }
  83.  
  84.    // 垂直方向
  85.    if (this.moveY) {
  86.     this.posY += this.speed;
  87.     if (this.posY >= this.limitY) {
  88.      this.posY = this.limitY;
  89.      this.moveY = false;
  90.     };
  91.    } else {
  92.     this.posY -= this.speed;
  93.     if (this.posY <= 0) {
  94.      this.posY = 0;
  95.      this.moveY = true;
  96.     };
  97.    }
  98.  
  99.    // CSS赋值
  100.    this.inner.style.left = this.posX + "px";
  101.    this.inner.style.top = this.posY + "px";
  102.   };
  103.  
  104.   var bounce = new Bounce("outer", "inner");
  105.  </script>
  106. </body>
  107. </html>

实现颜色随机的碰壁反弹

需要的属性：

颜色属性

重写初始化方法

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.   <div class="ball" id="inner"></div>
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId, ballId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.getElementById(ballId);
  34.    // 修改初始位置为随机产生
  35.    this.posX = 100;
  36.    this.posY = 100;
  37.    this.moveX = true;
  38.    this.moveY = true;
  39.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  40.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  41.    // 添加速度
  42.    this.speed = 3;
  43.  
  44.    // 调用运动函数
  45.    this.timer = setTimeout(function() {
  46.     _this.move();
  47.     // 注意指向问题
  48.     setTimeout(arguments.callee, 16);
  49.    });
  50.   }
  51.  
  52.   /*
  53.    * [move 运动函数]
  54.    * @return {[type]} [description]
  55.    */
  56.   Bounce.prototype.move = function() {
  57.    // 水平方向
  58.    if (this.moveX) {
  59.     this.posX += this.speed;
  60.     if (this.posX >= this.limitX) {
  61.      this.moveX = false;
  62.     };
  63.    } else {
  64.     this.posX -= this.speed;
  65.     if (this.posX <= 0) {
  66.      this.moveX = true;
  67.     };
  68.    }
  69.  
  70.    // 垂直方向
  71.    if (this.moveY) {
  72.     this.posY += this.speed;
  73.     if (this.posY >= this.limitY) {
  74.      this.moveY = false;
  75.     };
  76.    } else {
  77.     this.posY -= this.speed;
  78.     if (this.posY <= 0) {
  79.      this.moveY = true;
  80.     };
  81.    }
  82.  
  83.    // 赋值
  84.    this.inner.style.left = this.posX + "px";
  85.    this.inner.style.top = this.posY + "px";
  86.   };
  87.  
  88.   // 随机颜色的球球
  89.   function RanPosBall(parentId, ballId) {
  90.    // 继承属性
  91.    Bounce.call(this, parentId, ballId);
  92.    this.colorR = Math.floor(Math.random() * 256);
  93.    this.colorG = Math.floor(Math.random() * 256);
  94.    this.colorB = Math.floor(Math.random() * 256);
  95.  
  96.    // 调用重写的初始化方法
  97.    this.initial();
  98.   }
  99.  
  100.   // 继承方法
  101.   for (var i in Bounce.prototype) {
  102.    RanPosBall.prototype[i] = Bounce.prototype[i];
  103.   };
  104.  
  105.   // 重写初始化的方法
  106.   RanPosBall.prototype.initial = function() {
  107.    // 设置背景
  108.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  109.   }
  110.  
  111.   var  ranPosBall = new  RanPosBall("outer", "inner");
  112.  
  113.  </script>
  114. </body>
  115. </html>

欢迎沟通交流~HTML5学堂

实现随机速度的碰壁反弹

重写父类的速度属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.   <div class="ball" id="inner"></div>
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId, ballId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.getElementById(ballId);
  34.    // 修改初始位置为随机产生
  35.    this.posX = 100;
  36.    this.posY = 100;
  37.    this.moveX = true;
  38.    this.moveY = true;
  39.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  40.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  41.    // 添加速度
  42.    this.speed = 3;
  43.    // 调用运动函数
  44.    this.timer = setTimeout(function() {
  45.     _this.move();
  46.     // 注意指向问题
  47.     setTimeout(arguments.callee, 16);
  48.    });
  49.   }
  50.  
  51.   /*
  52.    * [move 运动函数]
  53.    * @return {[type]} [description]
  54.    */
  55.   Bounce.prototype.move = function() {
  56.    // 水平方向
  57.    if (this.moveX) {
  58.     this.posX += this.speed;
  59.     if (this.posX >= this.limitX) {
  60.      this.posX = this.limitX;
  61.      this.moveX = false;
  62.     };
  63.    } else {
  64.     this.posX -= this.speed;
  65.     if (this.posX <= 0) {
  66.      this.posX = 0;
  67.      this.moveX = true;
  68.     };
  69.    }
  70.  
  71.    // 垂直方向
  72.    if (this.moveY) {
  73.     this.posY += this.speed;
  74.     if (this.posY >= this.limitY) {
  75.      this.posY = this.limitY;
  76.      this.moveY = false;
  77.     };
  78.    } else {
  79.     this.posY -= this.speed;
  80.     if (this.posY <= 0) {
  81.      this.posY = 0;
  82.      this.moveY = true;
  83.     };
  84.    }
  85.  
  86.    // 赋值
  87.    this.inner.style.left = this.posX + "px";
  88.    this.inner.style.top = this.posY + "px";
  89.   };
  90.  
  91.   // var bounce = new Bounce("outer", "inner");
  92.  
  93.   // 随机颜色的球球
  94.   function RanPosBall(parentId, ballId) {
  95.    // 继承属性
  96.    Bounce.call(this, parentId, ballId);
  97.    // 增加三种颜色属性
  98.    this.colorR = Math.floor(Math.random() * 256);
  99.    this.colorG = Math.floor(Math.random() * 256);
  100.    this.colorB = Math.floor(Math.random() * 256);
  101.  
  102.    // 重写速度属性
  103.    this.speed = Math.floor(Math.random() * 5 + 1);
  104.  
  105.    // 调用重写的初始化方法
  106.    this.initial();
  107.   }
  108.  
  109.   // 继承方法
  110.   for (var i in Bounce.prototype) {
  111.    RanPosBall.prototype[i] = Bounce.prototype[i];
  112.   };
  113.  
  114.   // 重写初始化的方法
  115.   RanPosBall.prototype.initial = function() {
  116.    // 设置背景
  117.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  118.   }
  119.  
  120.   var  ranPosBall = new  RanPosBall("outer", "inner");
  121.  
  122.  
  123.  </script>
  124. </body>
  125. </html>

实现随机方向的碰壁反弹

重写方向属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.   <div class="ball" id="inner"></div>
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId, ballId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.getElementById(ballId);
  34.    // 修改初始位置为随机产生
  35.    this.posX = 100;
  36.    this.posY = 100;
  37.    this.moveX = true;
  38.    this.moveY = true;
  39.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  40.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  41.    // 添加速度
  42.    this.speed = 3;
  43.  
  44.    // 调用运动函数
  45.    this.timer = setTimeout(function() {
  46.     _this.move();
  47.     // 注意指向问题
  48.     setTimeout(arguments.callee, 16);
  49.    });
  50.   }
  51.  
  52.   /*
  53.    * [move 运动函数]
  54.    * @return {[type]} [description]
  55.    */
  56.   Bounce.prototype.move = function() {
  57.    // 水平方向
  58.    if (this.moveX) {
  59.     this.posX += this.speed;
  60.     if (this.posX >= this.limitX) {
  61.      this.posX = this.limitX;
  62.      this.moveX = false;
  63.     };
  64.    } else {
  65.     this.posX -= this.speed;
  66.     if (this.posX <= 0) {
  67.      this.posX = 0;
  68.      this.moveX = true;
  69.     };
  70.    }
  71.  
  72.    // 垂直方向
  73.    if (this.moveY) {
  74.     this.posY += this.speed;
  75.     if (this.posY >= this.limitY) {
  76.      this.posY = this.limitY;
  77.      this.moveY = false;
  78.     };
  79.    } else {
  80.     this.posY -= this.speed;
  81.     if (this.posY <= 0) {
  82.      this.posY = 0;
  83.      this.moveY = true;
  84.     };
  85.    }
  86.  
  87.    // 赋值
  88.    this.inner.style.left = this.posX + "px";
  89.    this.inner.style.top = this.posY + "px";
  90.   };
  91.  
  92.   // var bounce = new Bounce("outer", "inner");
  93.  
  94.   // 随机颜色的球球
  95.   function RanPosBall(parentId, ballId) {
  96.    // 继承属性
  97.    Bounce.call(this, parentId, ballId);
  98.    // 增加三种颜色属性
  99.    this.colorR = Math.floor(Math.random() * 256);
  100.    this.colorG = Math.floor(Math.random() * 256);
  101.    this.colorB = Math.floor(Math.random() * 256);
  102.    // 重写速度属性
  103.    this.speed = Math.floor(Math.random() * 5 + 1);
  104.    this.moveX =  Math.floor(Math.random() * 2);
  105.    this.moveY =  Math.floor(Math.random() * 2);
  106.    if (this.moveX == 1) {
  107.     this.moveX = true;
  108.    } else {
  109.     this.moveX = false;
  110.    }
  111.    if (this.moveY == 1) {
  112.     this.moveY = true;
  113.    } else {
  114.     this.moveY = false;
  115.    }
  116.  
  117.    // 调用重写的初始化方法
  118.    this.initial();
  119.   }
  120.  
  121.   // 继承方法
  122.   for (var i in Bounce.prototype) {
  123.    RanPosBall.prototype[i] = Bounce.prototype[i];
  124.   };
  125.  
  126.   // 重写初始化的方法
  127.   RanPosBall.prototype.initial = function() {
  128.    // 设置背景
  129.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  130.   }
  131.  
  132.   var  ranPosBall = new  RanPosBall("outer", "inner");
  133.  
  134.  
  135.  </script>
  136. </body>
  137. </html>

欢迎沟通交流~HTML5学堂

生成多个球球的碰壁反弹

创建球球插入到父级上

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.  
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.createElement("div");
  34.    this.outer.appendChild(this.inner);
  35.    // 修改初始位置为随机产生
  36.    this.posX = Math.ceil(Math.random() * 550);
  37.    this.posY = Math.ceil(Math.random() * 350);
  38.    this.moveX = true;
  39.    this.moveY = true;
  40.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  41.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  42.    // 添加速度
  43.    this.speed = 3;
  44.  
  45.    // 调用运动函数
  46.    this.timer = setTimeout(function() {
  47.     _this.move();
  48.     // 注意指向问题
  49.     setTimeout(arguments.callee, 16);
  50.    });
  51.   }
  52.  
  53.   /*
  54.    * [move 运动函数]
  55.    * @return {[type]} [description]
  56.    */
  57.   Bounce.prototype.move = function() {
  58.    // 水平方向
  59.    if (this.moveX) {
  60.     this.posX += this.speed;
  61.     if (this.posX >= this.limitX) {
  62.      this.posX = this.limitX;
  63.      this.moveX = false;
  64.     };
  65.    } else {
  66.     this.posX -= this.speed;
  67.     if (this.posX <= 0) {
  68.      this.posX = 0;
  69.      this.moveX = true;
  70.     };
  71.    }
  72.  
  73.    // 垂直方向
  74.    if (this.moveY) {
  75.     this.posY += this.speed;
  76.     if (this.posY >= this.limitY) {
  77.      this.posY = this.limitY;
  78.      this.moveY = false;
  79.     };
  80.    } else {
  81.     this.posY -= this.speed;
  82.     if (this.posY <= 0) {
  83.      this.posY = 0;
  84.      this.moveY = true;
  85.     };
  86.    }
  87.    this.evaluatePos();
  88.   };
  89.  
  90.   Bounce.prototype.evaluatePos = function() {
  91.    // 赋值
  92.    this.inner.style.left = this.posX + "px";
  93.    this.inner.style.top = this.posY + "px";   
  94.   }
  95.  
  96.   // var bounce = new Bounce("outer", "inner");
  97.  
  98.   // 随机颜色的球球
  99.   function RanPosBall(parentId, ballId) {
  100.    // 继承属性
  101.    Bounce.call(this, parentId);
  102.    // 增加三种颜色属性
  103.    this.colorR = Math.floor(Math.random() * 256);
  104.    this.colorG = Math.floor(Math.random() * 256);
  105.    this.colorB = Math.floor(Math.random() * 256);
  106.    // 重写速度属性
  107.    this.speed = Math.floor(Math.random() * 5 + 1);
  108.    this.moveX =  Math.floor(Math.random() * 2);
  109.    this.moveY =  Math.floor(Math.random() * 2);
  110.    if (this.moveX == 1) {
  111.     this.moveX = true;
  112.    } else {
  113.     this.moveX = false;
  114.    }
  115.    if (this.moveY == 1) {
  116.     this.moveY = true;
  117.    } else {
  118.     this.moveY = false;
  119.    }
  120.  
  121.    // 调用重写的初始化方法
  122.    this.initial();
  123.   }
  124.  
  125.   // 继承方法
  126.   for (var i in Bounce.prototype) {
  127.    RanPosBall.prototype[i] = Bounce.prototype[i];
  128.   };
  129.  
  130.   // 重写初始化的方法
  131.   RanPosBall.prototype.initial = function() {
  132.    // 设置背景
  133.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  134.   }
  135.  
  136.   for (var i = 0; i < 1000; i++) {
  137.    var  ranPosBall = new  RanPosBall("outer", "inner");
  138.   };
  139.  
  140.  
  141.  </script>
  142. </body>
  143. </html>

代码优化

提取样式赋值

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 50px;
  18.    height: 50px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.  
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.createElement("div");
  34.    this.outer.appendChild(this.inner);
  35.    // 修改初始位置为随机产生
  36.    this.posX = Math.ceil(Math.random() * 550);
  37.    this.posY = Math.ceil(Math.random() * 350);
  38.    this.moveX = true;
  39.    this.moveY = true;
  40.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  41.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  42.    // 添加速度
  43.    this.speed = 3;
  44.  
  45.    // 调用运动函数
  46.    this.timer = setTimeout(function() {
  47.     _this.move();
  48.     // 注意指向问题
  49.     setTimeout(arguments.callee, 16);
  50.    });
  51.   }
  52.  
  53.   /*
  54.    * [move 运动函数]
  55.    * @return {[type]} [description]
  56.    */
  57.   Bounce.prototype.move = function() {
  58.    // 水平方向
  59.    if (this.moveX) {
  60.     this.posX += this.speed;
  61.     if (this.posX >= this.limitX) {
  62.      this.posX = this.limitX;
  63.      this.moveX = false;
  64.     };
  65.    } else {
  66.     this.posX -= this.speed;
  67.     if (this.posX <= 0) {
  68.      this.posX = 0;
  69.      this.moveX = true;
  70.     };
  71.    }
  72.  
  73.    // 垂直方向
  74.    if (this.moveY) {
  75.     this.posY += this.speed;
  76.     if (this.posY >= this.limitY) {
  77.      this.posY = this.limitY;
  78.      this.moveY = false;
  79.     };
  80.    } else {
  81.     this.posY -= this.speed;
  82.     if (this.posY <= 0) {
  83.      this.posY = 0;
  84.      this.moveY = true;
  85.     };
  86.    }
  87.    this.evaluatePos();
  88.   };
  89.  
  90.   Bounce.prototype.evaluatePos = function() {
  91.    // 赋值
  92.    this.inner.style.left = this.posX + "px";
  93.    this.inner.style.top = this.posY + "px";   
  94.   }
  95.  
  96.   // var bounce = new Bounce("outer", "inner");
  97.  
  98.   // 随机颜色的球球
  99.   function RanPosBall(parentId, ballId) {
  100.    // 继承属性
  101.    Bounce.call(this, parentId);
  102.    // 增加三种颜色属性
  103.    this.colorR = Math.floor(Math.random() * 256);
  104.    this.colorG = Math.floor(Math.random() * 256);
  105.    this.colorB = Math.floor(Math.random() * 256);
  106.    // 重写速度属性
  107.    this.speed = Math.floor(Math.random() * 5 + 1);
  108.    this.moveX =  Math.floor(Math.random() * 2);
  109.    this.moveY =  Math.floor(Math.random() * 2);
  110.    if (this.moveX == 1) {
  111.     this.moveX = true;
  112.    } else {
  113.     this.moveX = false;
  114.    }
  115.    if (this.moveY == 1) {
  116.     this.moveY = true;
  117.    } else {
  118.     this.moveY = false;
  119.    }
  120.  
  121.    // 调用重写的初始化方法
  122.    this.initial();
  123.   }
  124.  
  125.   // 继承方法
  126.   for (var i in Bounce.prototype) {
  127.    RanPosBall.prototype[i] = Bounce.prototype[i];
  128.   };
  129.  
  130.   // 重写初始化的方法
  131.   RanPosBall.prototype.initial = function() {
  132.    // 设置背景
  133.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  134.   }
  135.  
  136.   for (var i = 0; i < 1000; i++) {
  137.    var  ranPosBall = new  RanPosBall("outer", "inner");
  138.   };
  139.  
  140.  
  141.  </script>
  142. </body>
  143. </html>

使用CSS3平移控制的碰壁反弹

重写evaluatePos方法

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7.  <style>
  8.   .box {
  9.    position: relative;
  10.    width: 600px;
  11.    height: 400px;
  12.    margin: 30px auto;
  13.    border: 1px solid #fcf;
  14.   }
  15.   .box div {
  16.    position: absolute;
  17.    width: 10px;
  18.    height: 10px;
  19.    background-color: #eee;
  20.    border-radius: 50%;
  21.   }
  22.  </style>
  23. </head>
  24. <body>
  25.  <div class="box" id="outer">
  26.  
  27.  </div>
  28.  <script>
  29.   function Bounce(parentId) {
  30.    var _this = this;
  31.  
  32.    this.outer = document.getElementById(parentId);
  33.    this.inner = document.createElement("div");
  34.    this.outer.appendChild(this.inner);
  35.    // 修改初始位置为随机产生
  36.    this.posX = Math.ceil(Math.random() * 550);
  37.    this.posY = Math.ceil(Math.random() * 350);
  38.    this.moveX = true;
  39.    this.moveY = true;
  40.    this.limitX = this.outer.clientWidth - this.inner.offsetWidth;
  41.    this.limitY = this.outer.clientHeight - this.inner.offsetHeight;
  42.    // 添加速度
  43.    this.speed = 3;
  44.  
  45.    // 调用运动函数
  46.    this.timer = setTimeout(function() {
  47.     _this.move();
  48.     // 注意指向问题
  49.     setTimeout(arguments.callee, 16);
  50.    });
  51.   }
  52.  
  53.   /*
  54.    * [move 运动函数]
  55.    * @return {[type]} [description]
  56.    */
  57.   Bounce.prototype.move = function() {
  58.    // 水平方向
  59.    if (this.moveX) {
  60.     this.posX += this.speed;
  61.     if (this.posX >= this.limitX) {
  62.      this.posX = this.limitX;
  63.      this.moveX = false;
  64.     };
  65.    } else {
  66.     this.posX -= this.speed;
  67.     if (this.posX <= 0) {
  68.      this.posX = 0;
  69.      this.moveX = true;
  70.     };
  71.    }
  72.  
  73.    // 垂直方向
  74.    if (this.moveY) {
  75.     this.posY += this.speed;
  76.     if (this.posY >= this.limitY) {
  77.      this.posY = this.limitY;
  78.      this.moveY = false;
  79.     };
  80.    } else {
  81.     this.posY -= this.speed;
  82.     if (this.posY <= 0) {
  83.      this.posY = 0;
  84.      this.moveY = true;
  85.     };
  86.    }
  87.    this.evaluatePos();
  88.   };
  89.  
  90.   Bounce.prototype.evaluatePos = function() {
  91.    // 赋值
  92.    this.inner.style.left = this.posX + "px";
  93.    this.inner.style.top = this.posY + "px";   
  94.   }
  95.  
  96.   // var bounce = new Bounce("outer", "inner");
  97.  
  98.   // 随机颜色的球球
  99.   function RanPosBall(parentId) {
  100.    // 继承属性
  101.    Bounce.call(this, parentId);
  102.    // 增加三种颜色属性
  103.    this.colorR = Math.floor(Math.random() * 256);
  104.    this.colorG = Math.floor(Math.random() * 256);
  105.    this.colorB = Math.floor(Math.random() * 256);
  106.    // 重写速度属性
  107.    this.speed = Math.floor(Math.random() * 3 + 1);
  108.    this.moveX =  Math.floor(Math.random() * 2);
  109.    this.moveY =  Math.floor(Math.random() * 2);
  110.    if (this.moveX == 1) {
  111.     this.moveX = true;
  112.    } else {
  113.     this.moveX = false;
  114.    }
  115.    if (this.moveY == 1) {
  116.     this.moveY = true;
  117.    } else {
  118.     this.moveY = false;
  119.    }
  120.  
  121.    // 调用重写的初始化方法
  122.    this.initial();
  123.   }
  124.  
  125.   // 继承方法
  126.   for (var i in Bounce.prototype) {
  127.    RanPosBall.prototype[i] = Bounce.prototype[i];
  128.   };
  129.  
  130.   // 重写初始化的方法
  131.   RanPosBall.prototype.initial = function() {
  132.    // 设置背景
  133.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  134.   }
  135.  
  136.  
  137.   function TranslateBall(parentId) {
  138.    // 属性继承
  139.    RanPosBall.call(this, parentId);
  140.   }
  141.  
  142.   // 方法继承
  143.   for (var i in RanPosBall.prototype) {
  144.    TranslateBall.prototype[i] = RanPosBall.prototype[i]
  145.   };
  146.  
  147.   // 重写初始化方法
  148.   TranslateBall.prototype.initial = function() {
  149.    // 设置背景
  150.    this.inner.style.backgroundColor = "rgb(" + this.colorR + ", " + this.colorG + ", " + this.colorB + ")";
  151.   }
  152.  
  153.   // 重写样式赋值方法
  154.   TranslateBall.prototype.evaluatePos = function() {
  155.    this.inner.style.webkitTransform =  "translateX(" + this.posX +"px ) translateY(" + this.posY + "px)";   
  156.   }
  157.  
  158.   for (var i = 0; i < 300; i++) {
  159.    var translateBall = new TranslateBall("outer");
  160.   };
  161.  </script>
  162. </body>
  163. </html>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：原生JavaScript setInterval的相关问题 下一篇：如何在对象原型上添加方法，在对象原型上添加方法会有什么问题？