网页小实验——在平面空间建立大量“可思考的”对象

实验目标:建立大量对象(万级),为每个对象设置自身逻辑,并实现对象之间的交互,以原生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 }

六、总结

以上完成了一个最基础的多单位思考与交互框架,在此基础上可以编辑更多种类的单位和更复杂思考方式,但框架尚存在问题,比如缺少单位间碰撞检测(或多层堆叠限制),这会导致所有单位最终重叠为一点,比如视角控制方式不流畅,比如三个循环未分离等等。

(0)

相关推荐

  • 3D网页小实验——将txt配置文本转化为3D陈列室

    设计目标:借鉴前辈编程者的经验将简单的配置文本转化为3D场景,并根据配置文件在场景中加入图片和可播放的视频,最终形成可浏览的3D陈列室. 一.使用效果 1.txt配置文件: (博客园的富文本编辑器会改 ...

  • 来个小实验,看看你是不是“良性手抖”

    很多手抖病人,在这里给大家讲解一下这个疾病,我们平时的手抖在医学上称为震颤.什么样的手抖是不正常的?我们可以做个小实验来判断.把双手伸直,与肩膀高度保持一致,不要借助任何辅助,在手上面放一张纸,手会有 ...

  • Z172.新能源(盐水)小车||亲子科学小实验

    [实验展示] [实验认知]    新能源小车,就是用盐水进行发电前行的小车,属于绿色能源小车,目前还不能实际应用.通过化学反应(在正负极发生不同的氧化还原反应)使闭合电路中产生电子流,从而产生电流. ...

  • Z171.自制显微镜||亲子科学小实验

    [实验展示] [实验认知]      放大镜是凸透镜的一种,以前人们利用放大镜到的比较小的物体.但是为了看到更小的物体,后利用2个放大镜,将物体的像再次放大,这样就可以 物体了.科学家们通过显微镜首次 ...

  • 【优秀作文】奇妙的小实验

    奇妙的小实验 北京市西城区志成小学三年级四班  王一珑 指导老师  何娜 科学老师曾经对我们说过:"生活中处处有科学!"我对这句话一直都是一知半解,可没想到,语文何老师却让我明白了 ...

  • 家庭化学小实验-脱水水果

    每一种新鲜的水果都含有水分,把水分从水果中分离出来的过程叫做脱水.这是食品经历物理变化的一个例子,也是食品保存的方法之一.物理方法通常是可逆的,这一点与化学变化不同.在这个实验中,你将测试并观察水果脱 ...

  • 三年级语文下册习作《我做了一项小实验》

    三年级语文下册习作《我做了一项小实验》

  • 银湖实验 胡允泽 || 神奇的小实验

    郁达夫少年文学院会员优秀习作 神奇的小实验 银湖实验 三年级 胡允泽 每一次上意林小作家的课,我都很期待,因为老师总是用各种有趣的方法激发我们的想象力,活跃我们的课堂,让我们对课堂所学记忆深刻. 今天 ...

  • 富春三小 胡雅文《走进亚林所,做起小实验》

    郁达夫少年文学院"走近亚林所,探索植物的奥秘"活动习作之17 走进亚林所,做起小实验 富春三小  二年级  胡雅文 迎着灿烂的阳光,爸爸把我送进了亚林所,亚林所里种着好多树,各种各 ...