本文共 3405 字，大约阅读时间需要 11 分钟。
最近在搞一个游戏遇到了最短路径的常规问题，基于写了个A算法的WebGL 3D呈现，算法基于开源的javascript实现。作为一个2D例子也很不错，但我总觉得所有A算法的可视化实现都是平面的不够酷，而且还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。
实现代码比较容易，一百多行，但算法核心在astar.js里，界面核心在里面了，我只需要构建网格信息，监听用户点击，然后调用astar.js进行最短路径计算，将结果通过动画的方式呈现出走动的过程，所有代码如下：
function init() { w = 40; m = 20; d = w * m / 2; gridRows = []; dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); g3d.setGridVisible(true); g3d.setGridColor('#BBBBBB'); g3d.setGridSize(m); g3d.setGridGap(w); g3d.addToDOM(); g3d.sm().setSelectionMode('none'); anim = startBall = endBall = null; g3d.getView().addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){ if(!anim){ var p = g3d.getHitPosition(e); var x = Math.floor((p[0] + d)/ w); var y = Math.floor((p[2] + d)/ w); var endBall = dm.getDataByTag("cell_" + x + "_" + y); if(endBall && endBall.s('batch') !== 'wall'){ if(startBall.a('x') === x && startBall.a('y') === y){ return; } var g = new Graph(gridRows, { diagonal: formPane.v('diagonal') }); var start = g.grid[startBall.a('x')][startBall.a('y')]; var end = g.grid[x][y]; var result = astar.search(g, start, end, { closest: formPane.v('closest') }); if(!result.length){ return; } x = result[result.length-1].x; y = result[result.length-1].y; endBall = dm.getDataByTag("cell_" + x + "_" + y); endBall.s('3d.visible', true); startBall.s('3d.visible', false); formPane.setDisabled(true); anim = ht.Default.startAnim({ duration: 700, finishFunc: function(){ for(var i=0; i 只从iOS8支持WebGL后在移动终端上测试3D应用比当前的大部分Android平板舒服多了，上述例子在iOS系统下呈现和算法都挺流畅，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D空间最短路径，但还是足够解决很多实际应用问题了。
最近在搞一个游戏遇到了最短路径的常规问题，基于写了个A算法的WebGL 3D呈现，算法基于开源的javascript实现。作为一个2D例子也很不错，但我总觉得所有A算法的可视化实现都是平面的不够酷，而且还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。
实现代码比较容易，一百多行，但算法核心在astar.js里，界面核心在里面了，我只需要构建网格信息，监听用户点击，然后调用astar.js进行最短路径计算，将结果通过动画的方式呈现出走动的过程，所有代码如下：
function init() { w = 40; m = 20; d = w * m / 2; gridRows = []; dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); g3d.setGridVisible(true); g3d.setGridColor('#BBBBBB'); g3d.setGridSize(m); g3d.setGridGap(w); g3d.addToDOM(); g3d.sm().setSelectionMode('none'); anim = startBall = endBall = null; g3d.getView().addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){ if(!anim){ var p = g3d.getHitPosition(e); var x = Math.floor((p[0] + d)/ w); var y = Math.floor((p[2] + d)/ w); var endBall = dm.getDataByTag("cell_" + x + "_" + y); if(endBall && endBall.s('batch') !== 'wall'){ if(startBall.a('x') === x && startBall.a('y') === y){ return; } var g = new Graph(gridRows, { diagonal: formPane.v('diagonal') }); var start = g.grid[startBall.a('x')][startBall.a('y')]; var end = g.grid[x][y]; var result = astar.search(g, start, end, { closest: formPane.v('closest') }); if(!result.length){ return; } x = result[result.length-1].x; y = result[result.length-1].y; endBall = dm.getDataByTag("cell_" + x + "_" + y); endBall.s('3d.visible', true); startBall.s('3d.visible', false); formPane.setDisabled(true); anim = ht.Default.startAnim({ duration: 700, finishFunc: function(){ for(var i=0; i 只从iOS8支持WebGL后在移动终端上测试3D应用比当前的大部分Android平板舒服多了，上述例子在iOS系统下呈现和算法都挺流畅，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D空间最短路径，但还是足够解决很多实际应用问题了。
转载地址：http://lwjbz.baihongyu.com/