HTML5人工智能基础及实践

简介

成都创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为怀来企业提供专业的网站制作、网站设计，怀来网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。

基础类

二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现，用(x, y)表示。 Vector2亦用来表示空间中的点(point)，而不另建类。先看代码：

 
 
 
  
  
  var Vector2 = function(x, y) { 
  
  
           this.x = x || 0; 
  
  
           this.y = y || 0; 
  
  
       }; 
  
  
       Vector2.prototype = { 
  
  
           set: function(x, y) { 
  
  
               this.x = x; 
  
  
               this.y = y; 
  
  
               return this; 
  
  
           }, 
  
  
           sub: function(v) { 
  
  
               return new Vector2(this.x - v.x, this.y - v.y); 
  
  
           }, 
  
  
           multiplyScalar: function(s) { 
  
  
               this.x *= s; 
  
  
               this.y *= s; 
  
  
               return this; 
  
  
           }, 
  
  
           divideScalar: function(s) { 
  
  
               if (s) { 
  
  
                   this.x /= s; 
  
  
                   this.y /= s; 
  
  
               } else { 
  
  
                   this.set(0, 0); 
  
  
               } 
  
  
               return this; 
  
  
           }, 
  
  
           length: function() { 
  
  
               return Math.sqrt(this.lengthSq()); 
  
  
           }, 
  
  
           normalize: function() { 
  
  
               return this.divideScalar(this.length()); 
  
  
           }, 
  
  
           lengthSq: function() { 
  
  
               return this.x * this.x + this.y * this.y; 
  
  
           }, 
  
  
           distanceToSquared: function(v) { 
  
  
               var dx = this.x - v.x, 
  
  
               dy = this.y - v.y; 
  
  
               return dx * dx + dy * dy; 
  
  
           }, 
  
  
           distanceTo: function(v) { 
  
  
               return Math.sqrt(this.distanceToSquared(v)); 
  
  
           }, 
  
  
           setLength: function(l) { 
  
  
               return this.normalize().multiplyScalar(l); 
  
  
           } 
  
  
       }; 
  
  
       window.Vector2 = Vector2; 
  
  
   } (window));

使用该类需要特别注意和区分的地方是：

它什么时候代表点、什么时候代表向量。

当其代表向量的时候，它的几何意义是什么？

不能把其当成一个黑盒来调用，需要知其然并知其所以然。

在下面的使用的过程当中，我会特别标注其代表点还是向量；代表向量时，其几何意义是什么？

给小球赋予智商，顾名思义需要小球类：

 
 
 
  
  
  (function(window) { 
  
  
      var Ball = function(r, v, p, cp) { 
  
  
          this.radius = r; 
  
  
          this.velocity = v; 
  
  
          this.position = p; 
  
  
          this.collectionPosition = cp
  
  
      } 
  
  
      Ball.prototype = { 
  
  
          collection: function(v) { 
  
  
              thisthis.velocity = this.collectionPosition.sub(this.position).setLength(v) 
  
  
          }, 
  
  
          disband: function() { 
  
  
              this.velocity = new Vector2(MathHelp.getRandomNumber( - 230, 230), MathHelp.getRandomNumber( - 230, 230)) 
  
  
          } 
  
  
      } 
  
  
      window.Ball = Ball 
  
  
  } (window));

其中

小球拥有4个属性，分别是：radius半径、velocity速度（Vector2）、position位置(Vector2)、collectionPosition集合点/小球的家(Vector2)。

小球拥有2个方法，分别是：collection集合、disband解散。

小球的集合方法所传递的参数为集合的速度，因为小球都有一个集合点的属性，所以这里不用再传入集合点/家给小球。

这里详细分析一下collection方法，这也是整个demo的关键代码。

 
 
 
  
  
  collection: function (v) { 
  
  
  thisthis.velocity =this.collectionPosition.sub(this.position).setLength(v); 
  
  
  },

因为setLength设置向量的长度：

 
 
 
  
  
  setLength: function (l) { 
  
  
   return this.normalize().multiplyScalar(l); 
  
  
  
  
  
   }

所以collection可以改成：

 
 
 
  
  
  thisthis.velocity = this.collectionPosition.sub(this.position).normalize().multiplyScalar(v);

normalize是获取单位向量，也可以改成：

 
 
 
  
  
  this.collectionPosition.sub(this.position).divideScalar(this.length()).multiplyScalar(v);

整个Vector2黑盒就全部展现出来，其整个过程都是向量的运算，代表含义如下所示：

this.collectionPosition

.sub(this.position) 获取小球所在位置指向小球集合位置的向量；

.divideScalar(this.length()) 得到该向量的单位向量；

.multiplyScalar(v); 改变该向量的长度。

最后把所得到的向量赋给小球的速度。

上面我们还是用到了解散方法，其过程是帮小球生成一个随机速度，用到了MathHelp类的一个静态方法：

 
 
 
  
  
  (function (window) { 
  
  
  var MathHelp = {}; 
  
  
  MathHelp.getRandomNumber = function (min, max) { 
  
  
  return (min + Math.floor(Math.random() * (max - min + 1))); 
  
  
  } 
  
  
  window.MathHelp = MathHelp; 
  
  
  
  
  
  } (window));

粒子生成

写了Vector2、Ball、MathHeper三个类之后，终于可以开始实现一点东西出来！

 
 
 
  
  
  var ps = [], 
  
  
  balls = []; 
  
  
  function init(tex) { 
  
  
  balls.length = 0; 
  
  
  ps.length = 0; 
  
  
  cxt.clearRect(0, 0, canvas.width, canvas.height); 
  
  
  cxt.fillStyle = "rgba(0,0,0,1)"; 
  
  
  cxt.fillRect(0, 0, canvas.width, canvas.height); 
  
  
  cxt.fillStyle = "rgba(255,255,255,1)"; 
  
  
  cxt.font = "bolder 160px 宋体"; 
  
  
  cxt.textBaseline = 'top'; 
  
  
  cxt.fillText(tex, 20, 20); 
  
  
  
  
  
  //收集所有像素 
  
  
  for (y = 1; y < canvas.height; y += 7) { 
  
  
  for (x = 1; x < canvas.width; x += 7) { 
  
  
  imageData = cxt.getImageData(20 + x, 20 + y, 1, 1); 
  
  
  mageData.data[0] > 170) { 
  
  
  ps.push({ 
  
  
  px: 20 + x, 
  
  
  py: 20 + y 
  
  
  }) 
  
  
  } 
  
  
  } 
  
  
  }; 
  
  
  cxt.fillStyle = "rgba(0,0,0,1)"; 
  
  
  cxt.fillRect(20, 20, canvas.width, canvas.height); 
  
  
    
  
  
  //像素点和小球转换 
  
  
  for (var i in ps) { 
  
  
  var ball = new Ball(2, new Vector2(0, 0), new Vector2(ps[i].px, ps[i].py), new Vector2(ps[i].px, ps[i].py)); 
  
  
  balls.push(ball); 
  
  
  }; 
  
  
    
  
  
  cxt.fillStyle = "#fff"; 
  
  
  for (i in balls) { 
  
  
  cxt.beginPath(); 
  
  
  cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true); 
  
  
  cxt.closePath(); 
  
  
  cxt.fill(); 
  
  
  } 
  
  
  
  
  
  //解散：生成随机速度 
  
  
  for (var i in balls) { 
  
  
  balls[i].disband();

其中分三个步骤：收集所有像素、像素点和小球转换、生成随机速度。整个demo我们需要一个loop：

 
 
 
  
  
  var time = 0; 
  
  
  var cyc = 15; 
  
  
  var a = 80; 
  
  
  var collectionCMD = false; 
  
  
  setInterval(function() { 
  
  
  cxt.fillStyle = "rgba(0, 0, 0, .3)"; 
  
  
  cxt.fillRect(0, 0, canvas.width, canvas.height); 
  
  
  cxt.fillStyle = "#fff"; 
  
  
  time += cyc; 
  
  
  for (var i in balls) { 
  
  
  if (collectionCMD === true && balls[i].position.distanceTo(balls[i].collectionPosition) <  
  
  
  { 
  
  
  balls[i].velocity.y = 0; 
  
  
  balls[i].velocity.x = 0; 
  
  
  CMD = true; 
  
  
  for (var i in balls) { 
  
  
  balls[i].collection(230); 
  
  
  } 
  
  
  } 
  
  
  if (time === 7500) { 
  
  
  time = 0; 
  
  
  collectionCMD = false; 
  
  
  or (var i in balls) { 
  
  
  balls[i].velocity.y * cyc / 1000; 
  
  
  balls[i].position.x += balls[i].velocity.x * cyc / 1000; 
  
  
  } 
  
  
  }, 
  
  
  
  
  
  cyc);

这里使用time整体控制，使其无限loop。ps:这里还有一点不够OO的地方就是应当为ball提供一个draw方法。

其中的balls[i].position.distanceTo(balls[i].collectionPosition) 代表了点与点之间的距离，这里判断小球是否到了集合点或家。这里其几何意义就不再向量了。

在线演示

请移步原文

文章题目：HTML5人工智能基础及实践
地址分享：http://www.gawzjz.com/qtweb2/news24/27074.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容