- A+
所属分类：Web前端
实验目标：建立大量对象（万级），为每个对象设置自身逻辑，并实现对象之间的交互，以原生DOM为渲染方式。主干在于对象逻辑，可根据需求换用其他渲染方式。
一、html舞台：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>比较整体重绘和移动重绘的效率</title> 6 <link href="../../CSS/newland.css" rel="stylesheet"> 7 <style> 8 div{position: absolute} 9 #div_allbase,#div_map{background-color: darkseagreen} 10 .div_unit{background-repeat: no-repeat;background-size: 100% 100%} 11 </style> 12 <script src="../../JS/MYLIB/newland.js"></script> 13 <script src="./ais.js"></script> 14 <script src="./dos.js"></script> 15 <script src="./commands.js"></script> 16 <script src="./vectorTools.js"></script> 17 </head> 18 <body> 19 <div id="div_allbase" style="width: 100%;height: 100%"> 20 <div id="div_map" ></div> 21 <div id="fps" style="z-index: 302;position:fixed"></div> 22 <div id="div_console" style="z-index: 302;position: fixed;height: 60px;width: 100%;bottom:0px;background-color: #cccccc"> 23 <div id="div_minimap" style="position:fixed;height:60px;width: 80px;left:0px;bottom:0px;background-color: darkseagreen;overflow: hidden"> 24 <div id="div_miniview" style="position:absolute;background-color: #ffffff"></div> 25 </div> 26 <button class="btn_console" onclick="changeView('上')">上</button> 27 <button class="btn_console" onclick="changeView('下')">下</button> 28 <button class="btn_console" onclick="changeView('左')">左</button> 29 <button class="btn_console" onclick="changeView('右')">右</button> 30 <button class="btn_console" onclick="changeView('放大')">放大</button> 31 <button class="btn_console" onclick="changeView('缩小')">缩小</button> 32 <br> 33 <button class="btn_console" onclick="runOneStep()">步进</button> 34 <button class="btn_console" onclick="runLoop()">自动</button> 35 <button class="btn_console" onclick="stopRunLoop()">暂停</button> 36 </div> 37 38 </div> 39 </body> 40 <script> 41 //主体程序入口 42 </script> 43 </html>
其中“div_map”是大量单位的绘制区域，“fps”是显示帧率的标签没有使用，“div_console”是位于屏幕底部的控制区域，其中包括一些控制场景运行的按钮和一个显示窗口位置的迷你地图。
二、场景初始化
1、初始化前的准备：
1 window.onload=beforeInit; 2 function beforeInit() 3 { 4 //这里可以做一些运行环境检测和渲染方式选择操作 5 Init(); 6 } 7 var obj_units={};//用id索引所有单位 8 var obj_unitclassed={};//用class索引所有单位类型 9 var arr_part=[];//多重数组，地图分块，优化单位查找速度，最下层是数组 10 var arr_partowner=[];//多重数组，用来分块优化势力占据，最下层是对象 11 var obj_owners={ 12 red:{color:"red",name:"red",arr_unit:[],countAlive:0}, 13 blue:{color:"blue",name:"blue",arr_unit:[],countAlive:0} 14 }//所有势力 15 var div_allbase,div_map; 16 var mapWidth=4096*2,mapHeight=3072*2,partSizeX=200,partSizeY=200;//地图宽度、地图高度、每个地图分块的尺寸 17 var flag_runningstate="beforeStart";//系统总体运行状态（未用到） 18 var flag_autorun=false;//是否自动运行，默认非自动运行，点击一次“步进”按钮计算一次。 19 function Init() 20 { 21 //初始化代码 22 }
其中arr_part和arr_partowner用来把地图分成多块，这样一个单位在寻找其他单位时就可以从临近的小块找起，不必遍历地图上的所有单位，把这样的数组称为“索引数组”。
2、初始化地图
1 //InitMap 2 div_allbase=document.getElementById("div_allbase"); 3 div_map=document.getElementById("div_map"); 4 div_map.style.width=mapWidth+"px"; 5 div_map.style.height=mapHeight+"px"; 6 var partCountX=Math.ceil(mapWidth/partSizeX); 7 var partCountY=Math.ceil(mapHeight/partSizeY); 8 for(var i=0;i<partCountX;i++)//为地图上的每个区域分配一个数组元素 9 { 10 var arr=[]; 11 for(var j=0;j<partCountY;j++) 12 { 13 arr.push([]); 14 } 15 arr_part.push(arr); 16 17 var arr=[]; 18 for(var j=0;j<partCountY;j++) 19 { 20 arr.push({}); 21 } 22 arr_partowner.push(arr); 23 }
3、初始化控制按钮
1 //InitUI 2 var arr_btn=document.getElementsByClassName("btn_console"); 3 arr_btn[0].onclick=function(){changeView('上')}; 4 arr_btn[1].onclick=function(){changeView('下')}; 5 arr_btn[2].onclick=function(){changeView('左')}; 6 arr_btn[3].onclick=function(){changeView('右')}; 7 arr_btn[4].onclick=function(){changeView('放大')}; 8 arr_btn[5].onclick=function(){changeView('缩小')}; 9 var div_miniview=document.getElementById("div_miniview"); 10 div_miniview.style.width=80*(window.innerWidth/mapWidth)/Math.pow(2,zoomRate)+"px"; 11 div_miniview.style.height=60*(window.innerHeight/mapHeight)/Math.pow(2,zoomRate)+"px"; 12 window.onresize=function(){ 13 var div_miniview=document.getElementById("div_miniview"); 14 div_miniview.style.width=80*(window.innerWidth/mapWidth)/Math.pow(2,zoomRate)+"px"; 15 div_miniview.style.height=60*(window.innerHeight/mapHeight)/Math.pow(2,zoomRate)+"px"; 16 }
其中“zoomRate”是地图的缩放比例，“div_miniview”在迷你地图里表示可视区域，当缩放比例放大时，单位变大，窗口中可见的单位变少，迷你地图的可视区域变小。
4、初始化单位类型：
1 //InitUnitCalss 2 var Yt=function(p){//构造野兔类，并且为它设置一些属性 3 this.className="Yt"; 4 this.hp=10; 5 this.mp=0; 6 this.sp=10; 7 this.at=2; 8 this.df=1; 9 this.clipSize=20;//碰撞尺寸 10 this.nearAttRange=20;//近战攻击范围 11 this.pic="./yetu.jpg"; 12 this.obj_skills={};//技能列表 13 this.left=p.left;//位置 14 this.top=p.top; 15 this.id=p.id; 16 this.owner=p.owner;//所属势力 17 this.doing="standing";//正在做的事 18 this.wanting="waiting";//想要做的事 19 this.being="free";//正在遭受 20 this.speed=50;//移动速度 21 this.view=500;//视野 22 } 23 Yt.prototype.render=function(){//渲染方法 24 if(this.doing=="dead") 25 { 26 return "<div class='div_unit' " + 27 "style='background-color:black;" + 28 "width:"+this.clipSize+"px ;height:"+this.clipSize+"px;left:"+this.left+"px;top:"+this.top+"px;" + 29 "border:2px solid "+this.owner.color+"'>" + 30 "</div>" 31 } 32 if(zoomRate>=2) 33 { 34 return "<div class='div_unit' " + 35 "style='background-image: url("+this.pic+");" + 36 "width:"+this.clipSize+"px ;height:"+this.clipSize+"px;left:"+this.left+"px;top:"+this.top+"px;" + 37 "border:2px solid "+this.owner.color+"'>" + 38 "<div style='background: inherit;width: 100%;height:100%;zoom: 0.1;font-size: 12px;overflow: hidden;color:"+this.owner.color+"'>" + 39 "<div style='top:20px'>doing:"+this.doing+"</div>" + 40 "<div style='top:40px'>wanting:"+this.wanting+"</div>" + 41 "<div style='top:60px'>being:"+this.being+"</div>" + 42 "</div>" + 43 "</div>" 44 } 45 else if(zoomRate>=-1) 46 { 47 return "<div class='div_unit' " + 48 "style='background-image: url("+this.pic+");" + 49 "width:"+this.clipSize+"px ;height:"+this.clipSize+"px;left:"+this.left+"px;top:"+this.top+"px;" + 50 "border:2px solid "+this.owner.color+"'>" + 51 "</div>" 52 } 53 else 54 { 55 return "<div class='div_unit' " + 56 "style='" + 57 "width:"+this.clipSize+"px ;height:"+this.clipSize+"px;left:"+this.left+"px;top:"+this.top+"px;" + 58 "border:2px solid "+this.owner.color+"'>" + 59 "</div>" 60 } 61 62 } 63 Yt.prototype.think=obj_ais.近战战士;//思考方式 64 Yt.prototype.do=obj_dos.DOM;//渲染方式，2d网页标签的渲染 65 obj_unitclassed.Yt=Yt;
这里根据当前缩放比例的不同为野兔设置了不同的渲染方式，缩放比例大时显示更多细节。其中“pic”属性是代表野兔的图片：
5、初始化单位：
1 //InitUnit 2 for(var i=0;i<10000;i++)//随机建立10000只野兔 3 { 4 var obj_yt=new obj_unitclassed.Yt({left:newland.RandomBetween(500,mapWidth-500),top:newland.RandomBetween(500,mapHeight-500) 5 ,id:"yt_"+i,owner:newland.RandomChooseFromObj(obj_owners)}); 6 obj_units[obj_yt.id]=obj_yt; 7 var arr_unit=obj_owners[obj_yt.owner.name].arr_unit; 8 obj_yt.ownerNumber=arr_unit.length; 9 arr_unit.push(obj_yt); 10 } 11 obj_owners.red.countAlive=obj_owners.red.arr_unit.length; 12 obj_owners.blue.countAlive=obj_owners.blue.arr_unit.length; 13 列方阵("blue",{left:2000,top:4000},Math.PI/6,100,20,obj_owners); 14 列方阵("red",{left:6000,top:4000},Math.PI*7/6,100,20,obj_owners); 15 for(var key in obj_units) 16 { 17 var obj_yt=obj_units[key]; 18 obj_yt.left=obj_yt.target[0].left; 19 obj_yt.top=obj_yt.target[0].top; 20 obj_yt.target=[]; 21 obj_yt.wanting="waiting"; 22 23 obj_yt.x=Math.floor(obj_yt.left/partSizeX); 24 obj_yt.y=Math.floor(obj_yt.top/partSizeY); 25 arr_part[obj_yt.x][obj_yt.y].push(obj_yt); 26 var obj_temp=arr_partowner[obj_yt.x][obj_yt.y]; 27 if(!obj_temp[obj_yt.owner.name]) 28 { 29 obj_temp[obj_yt.owner.name]=1; 30 } 31 else 32 { 33 obj_temp[obj_yt.owner.name]++; 34 } 35 }
其中“列方阵”方法是写在command.js中的一个“命令方法”，可以在程序运行时执行这些命令方法改变单位的wanting属性，进而引导单位接下来的行为，command.js内容如下：
1 function 列方阵(ownerName,pos,angle,col,dis,obj_owners)//势力名、方阵左上角位置、方阵从right方向起顺时针旋转角度、方阵每行最大人数（也就是最大列数）、单位间距、势力列表 2 { 3 var arr_unit=obj_owners[ownerName].arr_unit; 4 var len=arr_unit.length; 5 for(var i=0;i<len;i++) 6 { 7 var unit=arr_unit[i]; 8 if(unit.doing!="dead"&&unit.doing!="unconscious") 9 { 10 unit.wanting="lineup";//单位想要去排队 11 var left0=(i%col)*dis; 12 var top0=Math.floor(i/col)*dis; 13 var r0=Math.pow(left0*left0+top0*top0,0.5); 14 var angle0 15 if(left0==0) 16 { 17 angle0=Math.PI/2; 18 } 19 else 20 { 21 angle0=Math.atan(top0/left0); 22 } 23 var angle1=angle0+angle; 24 var left1=Math.max(pos.left+r0*Math.cos(angle1),0); 25 var top1=Math.max(pos.top+r0*Math.sin(angle1)); 26 unit.target=[{left:left1,top:top1}];//单位想要去这里 27 } 28 } 29 } 30 function 自由冲锋(ownerName,obj_owners,targetName){//为每个单位选择单独的目标最少需要消耗十几毫秒（加trycatch的情况下），去掉trycatch速度提升百倍 31 var arr_unit=obj_owners[ownerName].arr_unit; 32 var len=arr_unit.length; 33 for(var i=0;i<len;i++) 34 { 35 var unit=arr_unit[i]; 36 if(unit.doing!="dead"&&unit.doing!="unconscious") 37 { 38 unit.wanting="freecharge"; 39 unit.target=[targetName] 40 } 41 } 42 }
可以看到“列方阵”方法为势力中的所有对象分配了一个方阵位置，然后初始化方法直接把target设为单位当前位置，这样10000只野兔刚出场时就是排号方阵的。
接下来计算每个单位属于arr_part和arr_partowner的哪个小块。
6、初始化渲染和渲染循环：
1 //TestRender 2 div_map.style.zoom=Math.pow(2,zoomRate)+'';//对单位显示区应用地图缩放 3 renderMap(); 4 自由冲锋("blue",obj_owners,"red"); 5 自由冲锋("red",obj_owners,"blue"); 6 7 //InitRenderLoop 8 Loop();
其中renderMap方法用来绘制单位显示区：
function renderMap(){ //绘制整个地图，考虑到运行效率，只render当前显示范围内的！！！！,那么移动时也要重新绘制！！？？ var innerWidth=window.innerWidth; var innerHeight=window.innerHeight; var left=parseInt(div_map.style.left||0); var top=parseInt(div_map.style.top||0); var y1=(-top);///Math.pow(2,zoomRate);//画面缩小时，同样的地图位移意味着更多的距离 var x1=(-left);///Math.pow(2,zoomRate); var y2=y1+innerHeight/Math.pow(2,zoomRate); var x2=x1+innerWidth/Math.pow(2,zoomRate);//以上找到了可视区域 var arr_temp=[]; for(var key in obj_units) { var unit=obj_units[key]; if(unit.left>(x1-unit.clipSize)&&unit.left<x2&&unit.top>(y1-unit.clipSize)&&unit.top<y2) {//绘制可视区域内的单位 arr_temp.push(obj_units[key].render()); } } div_map.innerHTML=arr_temp.join("");//一次性绘制 }
绘制显示区有两种思路，一是一次性绘制显示区中的所有单位，这样移动视口时就不必重新绘制单位；而是只绘制显示在显示区域内的单位，视口改变时临时绘制新显示出的单位，经过实验，在当前配置下第二种方式的绘制速度远大于第一种。
绘制代码的最后，把每个单位的render方法返回的html文本合并起来一次性绘制，这样做的绘制速度远远高于分别绘制每一单位（数百倍到上千倍），其原理在于每条修改innerHTML或createElement的操作都会触发一次js引擎到浏览器渲染引擎的通信，之后浏览器渲染引擎将对页面进行绘制，而js引擎将挂起等待绘制完成，并且此过程中的js挂起时间远大于js计算和通信时间，一次性绘制则可以节省掉大量的页面绘制次数，能够大大提升渲染速度。
顺便记录这种一次性绘制与React“虚拟DOM”的关系——事实上React的底层绘制仍然是使用createElement建立每个标签，并没有实现一次性绘制，而虚拟DOM的特点在于“把所有createElement集中起来一起执行，在统一执行前，合并对同一标签的反复修改并检查虚拟DOM有无变化，如虚拟DOM无变化则不执行”，以此减少绘制次数。
可以用谷歌浏览器的performance功能配合以下程序测试这一区别：（以下内容缺乏大量充分试验，并且与本文主干无关）
组件：
1 import { Component, Fragment } from "react"; 2 3 //测试setState和传统dom操作的性能差距 4 class App extends Component { 5 constructor(props){ 6 super(); 7 this.state={ 8 arr:[], 9 } 10 11 } 12 onClick1=()=>{ 13 console.log(new Date().getTime()) 14 var arr=[]; 15 for(var i=0;i<10000;i++) 16 { 17 arr.push({key:i}); 18 } 19 this.setState({arr:arr}); 20 } 21 componentDidUpdate() 22 { 23 console.log(new Date().getTime()) 24 } 25 onClick2=()=>{ 26 console.log(new Date().getTime()); 27 var div_allbase=document.getElementById("div_allbase"); 28 for(var i=0;i<10000;i++) 29 { 30 var div=document.createElement("div") 31 div.innerHTML=i; 32 div_allbase.appendChild(div); 33 } 34 console.log(new Date().getTime()); 35 } 36 onClick3=()=>{ 37 console.log(new Date().getTime()); 38 var div_allbase=document.getElementById("div_allbase"); 39 var div0=document.createElement("div") 40 for(var i=0;i<10000;i++) 41 { 42 var div=document.createElement("div")//这一步还是有多余的js引擎到dom引擎的通信 43 div.innerHTML=i; 44 div0.appendChild(div); 45 } 46 div_allbase.appendChild(div0); 47 console.log(new Date().getTime()); 48 } 49 onClick4=()=>{ 50 console.log(new Date().getTime()); 51 var div_allbase=document.getElementById("div_allbase"); 52 var str=""; 53 var arr=[]; 54 for(var i=0;i<10000;i++) 55 { 56 arr.push("<div>"+i+"</div>"); 57 } 58 str=arr.join(""); 59 div_allbase.innerHTML=str; 60 console.log(new Date().getTime()); 61 } 62 render() { 63 const { count, price,show } = this.state; 64 return <Fragment> 65 <button onClick={()=>this.onClick1()}>setState方法</button> 66 <button onClick={()=>this.onClick2()}>Dom方法</button> 67 <button onClick={()=>this.onClick3()}>一次添加方法</button> 68 <button onClick={()=>this.onClick4()}>innerHTML方法</button> 69 <div id={"div_allbase"} style={{}}> 70 {this.state.arr.map(d=><div key={d.key}>{d.key}</div>) } 71 </div> 72 </Fragment> 73 } 74 } 75 76 export default App;
View Code
index.js
1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 import './index.css'; 4 import App from './test2/App4'; 5 6 ReactDOM.render( 7 <React.StrictMode> 8 <App /> 9 </React.StrictMode>, 10 document.getElementById('root') 11 );
View Code
package.json：
1 { 2 "name": "my-app4", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "@testing-library/jest-dom": "^5.11.4", 7 "@testing-library/react": "^11.1.0", 8 "@testing-library/user-event": "^12.1.10", 9 "antd": "^4.9.2", 10 "babylonjs": "^4.2.0", 11 "codeflask": "^1.4.1", 12 "moment": "^2.29.1", 13 "react": "^17.0.1", 14 "react-dom": "^17.0.1", 15 "react-router-dom": "^5.2.0", 16 "react-scripts": "4.0.1", 17 "web-vitals": "^0.2.4" 18 }, 19 "scripts": { 20 "start": "react-scripts start", 21 "build": "react-scripts build", 22 "test": "react-scripts test", 23 "eject": "react-scripts eject" 24 }, 25 "eslintConfig": { 26 "extends": [ 27 "react-app", 28 "react-app/jest" 29 ] 30 }, 31 "browserslist": { 32 "production": [ 33 ">0.2%", 34 "not dead", 35 "not op_mini all" 36 ], 37 "development": [ 38 "last 1 chrome version", 39 "last 1 firefox version", 40 "last 1 safari version" 41 ] 42 } 43 }
View Code
结果，单纯从一次渲染大量标签的速度来看React的setState<每个标签单独appendChild<先将大量标签放在一个容器中，然后把容器append到body<使用innerHTML一次性修改。
以下是分别渲染100000个div时的耗时情况：
7、视口移动和缩放
1 var sizeStep=250; 2 var zoomRate=-3; 3 var scrollTop=0,scrollLeft=0; 4 function changeView(type){ 5 var div_miniview=document.getElementById("div_miniview"); 6 if(type=="上") 7 { 8 scrollTop=scrollTop+sizeStep/Math.pow(2,zoomRate);//画面放大时，卷屏更慢 9 if(scrollTop>0) 10 { 11 scrollTop=0; 12 13 } 14 div_map.style.top=scrollTop+"px"; 15 renderMap(); 16 div_miniview.style.top=-60*(scrollTop/mapHeight)+"px"; 17 } 18 else if(type=="下") 19 { 20 scrollTop=scrollTop-sizeStep/Math.pow(2,zoomRate); 21 if(scrollTop<-mapHeight) 22 { 23 scrollTop=-mapHeight; 24 25 } 26 div_map.style.top=scrollTop+"px"; 27 renderMap(); 28 div_miniview.style.top=-60*(scrollTop/mapHeight)+"px"; 29 } 30 else if(type=="左") 31 { 32 scrollLeft=scrollLeft+sizeStep/Math.pow(2,zoomRate); 33 if(scrollLeft>0) 34 { 35 scrollLeft=0; 36 } 37 div_map.style.left=scrollLeft+"px"; 38 renderMap(); 39 div_miniview.style.left=-80*(scrollLeft/mapWidth)+"px"; 40 } 41 else if(type=="右") 42 { 43 scrollLeft=scrollLeft-sizeStep/Math.pow(2,zoomRate); 44 if(scrollLeft<-mapWidth) 45 { 46 scrollLeft=-mapWidth; 47 } 48 div_map.style.left=scrollLeft+"px"; 49 renderMap(); 50 div_miniview.style.left=-80*(scrollLeft/mapWidth)+"px"; 51 } 52 else if(type=="放大") 53 { 54 zoomRate++; 55 if(zoomRate>3) 56 { 57 zoomRate=3; 58 } 59 60 div_map.style.zoom=Math.pow(2,zoomRate); 61 renderMap(); 62 //zoomRate=zoomRate*2; 63 //div_map.style.zoom=zoomRate; 64 div_miniview.style.width=80*(window.innerWidth/mapWidth)/Math.pow(2,zoomRate)+"px"; 65 div_miniview.style.height=60*(window.innerHeight/mapHeight)/Math.pow(2,zoomRate)+"px"; 66 } 67 else if(type=="缩小") 68 { 69 zoomRate--; 70 if(zoomRate<-3) 71 { 72 zoomRate=-3; 73 } 74 div_map.style.zoom=Math.pow(2,zoomRate); 75 renderMap(); 76 div_miniview.style.width=80*(window.innerWidth/mapWidth)/Math.pow(2,zoomRate)+"px"; 77 div_miniview.style.height=60*(window.innerHeight/mapHeight)/Math.pow(2,zoomRate)+"px"; 78 // zoomRate=zoomRate/2; 79 // div_map.style.zoom=zoomRate; 80 } 81 }
View Code
主要是html标签的样式操作。
8、渲染循环
1 function runOneStep(){//遍历每个unit并决定它要做的事，runLoop也要调用这个方法，暂时把思考、行动、渲染放在同步的帧里，思考频率、移动速度、单位大小要相互和谐，以正常移动避免碰撞为标准 2 for(var key in obj_units)//思考 3 { 4 var unit=obj_units[key]; 5 if(unit.doing!="dead"&&unit.doing!="unconscious") 6 { 7 unit.think(unit,obj_units,arr_part); 8 } 9 } 10 for(var key in obj_units)//行动 11 { 12 var unit=obj_units[key]; 13 if(unit.doing!="dead"&&unit.doing!="unconscious") 14 { 15 unit.do(unit); 16 } 17 } 18 renderMap();//渲染 19 } 20 function runLoop(){ 21 flag_autorun=true; 22 } 23 function stopRunLoop(){ 24 flag_autorun=false; 25 } 26 var lastframe=new Date().getTime(); 27 function Loop() 28 { 29 if(flag_autorun) 30 { 31 runOneStep(); 32 var thisframe=new Date().getTime(); 33 console.log(thisframe-lastframe,"red:"+obj_owners.red.countAlive,"blue:"+obj_owners.blue.countAlive); 34 lastframe=thisframe; 35 } 36 window.requestAnimationFrame(function(){Loop()}); 37 }
事实上可思考的对象存在三个循环“思考循环”——比如最小间隔1秒考虑一次接下来做什么，“行动循环”——比如受到持续伤害时最小间隔0.2秒修改生命值，“渲染循环”——比如播放60帧每秒的模型动画，这里为了省事把三个循环合在一起执行。
三、思考
ais.js:
1 var obj_ais={};//ai列表 2 obj_ais.近战战士=function(unit,obj_units,arr_part){//通过原型方法调用，那么这里的this应该是谁？？ 3 if(unit.wanting=="lineup")//如果单位现在想列队，排队也有两种思路，一是靠临近人员自组织，二是获取所有单位统筹规划 4 {//这时应该有一个target参数指明单位要列队的地点，这个地点应该是队形中心还是单位的实际点？？ 5 //应该在列队开始时就为每个单位设置精确目标点，还是在运动中实时缩小范围？还是每个单位都在创建时就分配一个队伍位置？？ 6 var pos_target=unit.target[0]; 7 if(unit2isat(unit,pos_target)) 8 {//如果单位已经到位 9 unit.wanting="waiting"; 10 unit.doing="standing"; 11 unit.target=[]; 12 } 13 else 14 { 15 unit.doing="walk"; 16 if(unit2distance(unit,pos_target)<unit.speed)//如果目标已经在一次思考时间的移动范围内 17 { 18 unit.nextpos=pos_target; 19 } 20 else 21 {//计算下一步的位置 22 unit.nextpos=unit2add(unit2times(unit2normal(unit2substract(unit,pos_target)),unit.speed),unit); 23 } 24 } 25 26 27 28 29 } 30 if(unit.wanting=="freecharge") //冲锋过程中的每次思考都要重新规划目标 31 { 32 if(!unit.aimAt||unit.aimAt.doing=="dead")//如果还没有瞄准的目标，或者瞄准的目标已经死亡，则要寻找一个瞄准目标 33 { 34 var arr_res=findNearUnit(arr_part,0,20,"nearest-target-notdead-onlyone",unit.x,unit.y,unit,arr_partowner);//找到了一个目标 35 unit.aimAt=arr_res[0]; 36 } 37 if(unit.aimAt) 38 { 39 var dis=unit2distance(unit,unit.aimAt); 40 if(dis<unit.nearAttRange)//如果进入射程 41 { 42 unit.doing="nearattack"//近战普通攻击 43 } 44 else 45 { 46 47 if(dis<unit.speed)//如果目标已经在一次思考时间的移动范围内，移动要留下攻击目标的半径 48 { 49 unit.doing="chargeattack";//冲锋攻击 50 unit.nextpos=unit2substract(unit2times(unit2normal(unit2substract(unit,unit.aimAt)),unit.aimAt.clipSize/2),unit.aimAt,); 51 } 52 else 53 { 54 unit.doing="walk"; 55 unit.nextpos=unit2add(unit2times(unit2normal(unit2substract(unit,unit.aimAt)),unit.speed),unit); 56 } 57 } 58 } 59 else 60 { 61 unit.doing="standing";//如果已经找不到敌人则恢复静默状态 62 } 63 } 64 }
这里建立了一个叫做“近战战士”的思考方法，接着根据单位wanting属性的不同为他设置不同的doing、target、nextpos等属性。
四、行动
dos.js
1 var obj_dos={} 2 obj_dos.DOM=function(unit){ 3 if(unit.doing=="walk") 4 { 5 unit.left=Math.max(unit.nextpos.left,0); 6 unit.top=Math.max(unit.nextpos.top,0); 7 8 var x=Math.floor(unit.left/partSizeX); 9 var y=Math.floor(unit.top/partSizeY); 10 if(x!=unit.x||y!=unit.y)//更新索引位置 11 { 12 unit.x=x; 13 unit.y=y; 14 updatePart(unit,arr_part,arr_partowner); 15 } 16 } 17 else if(unit.doing=="nearattack") 18 { 19 var unitAimAt=unit.aimAt; 20 if(unitAimAt.doing!="dead") 21 { 22 if(unitAimAt.being=="free") 23 { 24 unitAimAt.being="hp-"+unit.at; 25 26 } 27 else 28 { 29 unitAimAt.being+=";hp-"+unit.at; 30 } 31 unitAimAt.hp-=unit.at; 32 if(unitAimAt.hp<1) 33 { 34 unitAimAt.doing="dead"; 35 obj_owners[unitAimAt.owner.name].countAlive--; 36 arr_partowner[unitAimAt.x][unitAimAt.y][unitAimAt.owner.name]--; 37 } 38 } 39 } 40 else if(unit.doing=="chargeattack") 41 { 42 unit.left=Math.max(unit.nextpos.left,0); 43 unit.top=Math.max(unit.nextpos.top,0); 44 var x=Math.floor(unit.left/partSizeX); 45 var y=Math.floor(unit.top/partSizeY); 46 if(x!=unit.x||y!=unit.y)//更新索引位置 47 { 48 unit.x=x; 49 unit.y=y; 50 updatePart(unit,arr_part,arr_partowner); 51 } 52 53 var unitAimAt=unit.aimAt; 54 if(unitAimAt.doing!="dead") 55 { 56 if(unitAimAt.being=="free") 57 { 58 unitAimAt.being="hp-"+unit.at; 59 60 } 61 else 62 { 63 unitAimAt.being+=";hp-"+unit.at; 64 } 65 unitAimAt.hp-=unit.at; 66 if(unitAimAt.hp<1) 67 { 68 unitAimAt.doing="dead"; 69 obj_owners[unitAimAt.owner.name].countAlive--; 70 arr_partowner[unitAimAt.x][unitAimAt.y][unitAimAt.owner.name]--; 71 } 72 } 73 } 74 }
根据单位doing属性的不同，修改单位自身或其他单位的属性。
五、平面向量计算与快速单位查找
vectorTools.js:
1 function findNearUnit(arr_part,start,count,type,x,y,unit,arr_partowner) 2 {//以自身为出发点，寻找附近的单位 3 var arr_res=[],arr_find1,arr_find2,arr_find3,arr_find4; 4 if(type=="all")//遍历所有格找寻所有符合条件的格 5 { 6 for (var i = start; i <= count; i++)//x.y相加的总步数，0就是本格 7 { 8 for (var xStep1 = 0; xStep1 <= i; xStep1++) 9 { 10 var yStep1 = i - Math.abs(xStep1); 11 //var yStep2 = -yStep1; 12 //var xStep2 = -xStep1; 13 //这里要注意处理数组为null的情况 14 var arr2 = arr_part[x + xStep1];//使用arr_part查找附近单位，避免遍历所有单位 15 arr_find1 = arr2 ? (arr2[y + yStep1]) : null; 16 arr_find2 = arr2 ? (arr2[y - yStep1]) : null; 17 arr2 = arr_part[x - xStep1]; 18 arr_find3 = arr2 ? (arr2[y + yStep1]) : null; 19 arr_find4 = arr2 ? (arr2[y - yStep1]) : null; 20 if(arr_find1) 21 { 22 arr_res=arr_res.concat(arr_find1); 23 } 24 if(arr_find2) 25 { 26 arr_res=arr_res.concat(arr_find2); 27 } 28 if(arr_find3) 29 { 30 arr_res=arr_res.concat(arr_find3); 31 } 32 if(arr_find4) 33 { 34 arr_res=arr_res.concat(arr_find4); 35 } 36 } 37 } 38 39 } 40 else if(type=="nearest"){//从近向远遍历，取并列最近的所有格，之后停止遍历 41 for (var i = start; i <= count; i++)//x.y相加的总步数，0就是本格 42 { 43 for (var xStep1 = 0; xStep1 <= i; xStep1++) { 44 var yStep1 = i - Math.abs(xStep1); 45 var yStep2 = -yStep1; 46 var xStep2 = -xStep1; 47 //这里要注意处理数组为null的情况 48 var arr2 = arr_part[x + xStep1]; 49 arr_find1 = arr2 ? (arr2[y + yStep1]) : null; 50 arr_find2 = arr2 ? (arr2[y - yStep1]) : null; 51 arr2 = arr_part[x - xStep1]; 52 arr_find3 = arr2 ? (arr2[y + yStep1]) : null; 53 arr_find4 = arr2 ? (arr2[y - yStep1]) : null; 54 if(arr_find1) 55 { 56 arr_res=arr_res.concat(arr_find1); 57 } 58 if(arr_find2) 59 { 60 arr_res=arr_res.concat(arr_find2); 61 } 62 if(arr_find3) 63 { 64 arr_res=arr_res.concat(arr_find3); 65 } 66 if(arr_find4) 67 { 68 arr_res=arr_res.concat(arr_find4); 69 } 70 } 71 if(arr_res.length>0) 72 { 73 break; 74 } 75 } 76 } 77 else if(type=="nearest-target-notdead-onlyone") 78 {//取最近的、属于规定势力的、没有死亡的、只取一个 79 var arr_res0=[]; 80 var owner_target=unit.target[0]; 81 for (var i = start; i <= count; i++)//x.y相加的总步数，0就是本格 82 { 83 for (var xStep1 = 0; xStep1 <= i; xStep1++) { 84 var yStep1 = i - Math.abs(xStep1); 85 var yStep2 = -yStep1; 86 var xStep2 = -xStep1; 87 //这里要注意处理数组为null的情况 88 //四个方向随机选择 89 //这里要避免单位不断遍历身边的大量己方单位！！ 90 //try catch对性能有额外消耗？？！！ 91 var count2=0; 92 // try{ 93 // count2+=arr_partowner[x + xStep1][y + yStep1][owner_target]||0; 94 // }catch(e){} 95 // try{ 96 // count2+=arr_partowner[x + xStep1][y - yStep1][owner_target]||0; 97 // }catch(e){} 98 // try{ 99 // count2+=arr_partowner[x - xStep1][y + yStep1][owner_target]||0; 100 // }catch(e){} 101 // try{ 102 // count2+=arr_partowner[x - xStep1][y - yStep1][owner_target]||0; 103 // }catch(e){} 104 var arr2=arr_partowner[x + xStep1]; 105 if(arr2) 106 { 107 var obj=arr2[y + yStep1]; 108 if(obj) 109 { 110 count2+=obj[owner_target]||0; 111 } 112 var obj=arr2[y - yStep1]; 113 if(obj) 114 { 115 count2+=obj[owner_target]||0; 116 } 117 } 118 var arr2=arr_partowner[x - xStep1]; 119 if(arr2) 120 { 121 var obj=arr2[y + yStep1]; 122 if(obj) 123 { 124 count2+=obj[owner_target]||0; 125 } 126 var obj=arr2[y - yStep1]; 127 if(obj) 128 { 129 count2+=obj[owner_target]||0; 130 } 131 } 132 if(count2>0)//如果找到了对应目标的领域，则认为一定能找到一个目标？？(活的)！！ 133 { 134 var arr2 = arr_part[x + xStep1]; 135 arr_find1 = arr2 ? (arr2[y + yStep1]) : []; 136 arr_find2 = arr2 ? (arr2[y - yStep1]) : []; 137 arr2 = arr_part[x - xStep1]; 138 arr_find3 = arr2 ? (arr2[y + yStep1]) : []; 139 arr_find4 = arr2 ? (arr2[y - yStep1]) : []; 140 if(arr_find1) 141 { 142 arr_res0=arr_res0.concat(arr_find1); 143 } 144 if(arr_find2) 145 { 146 arr_res0=arr_res0.concat(arr_find2); 147 } 148 if(arr_find3) 149 { 150 arr_res0=arr_res0.concat(arr_find3); 151 } 152 if(arr_find4) 153 { 154 arr_res0=arr_res0.concat(arr_find4); 155 } 156 var len2=arr_res0.length; 157 var nearestUnit=null; 158 for(var j=0;j<len2;j++) 159 { 160 161 var obj=arr_res0[j]; 162 if(obj.doing!="dead"&&obj.owner.name==owner_target) 163 { 164 165 if(!nearestUnit) 166 { 167 nearestUnit=obj; 168 } 169 else 170 { 171 if(unit2distance(obj,unit)<unit2distance(nearestUnit,unit)){ 172 nearestUnit=obj; 173 } 174 } 175 } 176 } 177 if(nearestUnit) 178 { 179 arr_res.push(nearestUnit); 180 } 181 182 } 183 } 184 if(arr_res.length>0) 185 { 186 //arr_res=[arr_res[newland.RandomChooseFromArray(arr_res)]]; 187 break; 188 } 189 } 190 } 191 return arr_res; 192 }//分隔线 193 function unit2distance(unit1,unit2)//两点间距离 194 { 195 return Math.pow(Math.pow((unit1.left-unit2.left),2)+Math.pow((unit1.top-unit2.top),2),0.5) 196 } 197 function unit2isat(unit,pos) 198 { 199 if(unit.left==pos.left&&unit.top==pos.top)//如果单位正好处于这个位置 200 { 201 return true; 202 } 203 else 204 { 205 return false; 206 } 207 } 208 function unit2substract(posFrom,posTo)//取两个二元向量的差向量 209 { 210 var posRes={left:posTo.left-posFrom.left,top:posTo.top-posFrom.top}; 211 return posRes; 212 } 213 function unit2normal(unit)//标准化二元向量 214 { 215 var length=Math.pow(unit.left*unit.left+unit.top*unit.top,0.5); 216 var posRes={left:unit.left/length,top:unit.top/length}; 217 return posRes; 218 } 219 function unit2times(unit,times)//二元向量伸缩 220 { 221 var posRes={left:unit.left*times,top:unit.top*times}; 222 return posRes; 223 } 224 function unit2add(unit1,unit2) 225 { 226 var posRes={left:unit1.left+unit2.left,top:unit1.top+unit2.top}; 227 return posRes; 228 } 229 function isTooNear(unit,arr,dis)//unit与arr中的对象是否过于接近，只要有一个就返回true 230 { 231 var len=arr.length; 232 if(!dis)//如果没有规定统一的最近距离， 233 { 234 for(var i=0;i<len;i++) 235 { 236 var obj=arr[i] 237 if(unit2distance(unit,obj)<(unit.clipSize+obj.clipSize)/2) 238 { 239 return true; 240 } 241 } 242 } 243 else 244 { 245 for(var i=0;i<len;i++) 246 { 247 var obj=arr[i] 248 if(unit2distance(unit,obj)<dis) 249 { 250 return true; 251 } 252 } 253 } 254 255 }//分隔线 256 function updatePart(unit,arr_part,arr_partowner){//更新两个索引数组 257 var x=unit.x; 258 var y=unit.y; 259 var arr_old=arr_part[x][y]; 260 var len=arr_old.length; 261 for(var i=0;i<len;i++) 262 { 263 if(arr_old[i].id==unit.id) 264 { 265 arr_old.splice(i,1); 266 arr_partowner[x][y][unit.owner.name]--; 267 break; 268 } 269 } 270 if(!arr_part[x]) 271 { 272 arr_part[x]=[]; 273 } 274 if(!arr_part[x][y]) 275 { 276 arr_part[x][y]=[]; 277 } 278 arr_part[x][y].push(unit); 279 if(!arr_partowner[x]) 280 { 281 arr_partowner[x]=[]; 282 } 283 if(!arr_partowner[x][y]) 284 { 285 arr_partowner[x][y]={}; 286 } 287 var obj_temp=arr_partowner[x][y]; 288 if(!obj_temp[unit.owner.name]) 289 { 290 obj_temp[unit.owner.name]=1; 291 } 292 else 293 { 294 obj_temp[unit.owner.name]++; 295 } 296 }
六、总结
以上完成了一个最基础的多单位思考与交互框架，在此基础上可以编辑更多种类的单位和更复杂思考方式，但框架尚存在问题，比如缺少单位间碰撞检测（或多层堆叠限制），这会导致所有单位最终重叠为一点，比如视角控制方式不流畅，比如三个循环未分离等等。
