本文实例讲述了JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法。分享给大家供大家参考，具体如下：

原理可参考：https://pPointF); var finded = false; while ((openList.length > 0)) { var currPoint = openList.pop(); currPoint.state = 1; closeList.push(currPoint); finded = processCurrpoint(pathArr, openList, row, col, currPoint, end); if (finded) { break; } } if (finded) { var farr = []; var tp = end.parent; farr.push(end); while (tp != null) { farr.push(tp); tp = tp.parent; } return farr; } else { return null; } } //定位屏幕坐标到数组位置 function mapSCPos(i, j) { return [i / r | 0, j / r | 0]; } //检测数组中的位置是否存在方块 function mapHasRect(map, i, j) { return (map[i][j]); } var mapArr = primMaze(row, column); var startRect = { x: function () { for (var i = 0, len = mapArr.length; i < len; i++) { for (var j = 0, len1 = mapArr[i].length; j < len1; j++) { if (!mapArr[i][j]) { return j * r; break; } } } }(), y: function () { for (var i = 0, len = mapArr.length; i < len; i++) { for (var j = 0, len1 = mapArr[i].length; j < len1; j++) { if (!mapArr[i][j]) { return i * r; break; } } } }(), pos: function () { return [this.x, this.y]; } }, endRect = { hasCreate:false, x:null, y:null, pos: function () { return [this.x, this.y]; } }, startPoint = mapSCPos(startRect.pos()[1], startRect.pos()[0]), endPoint, path = null, next = null; //计算路经 function update() { ctx.clearRect(0, 0, 600, 600); drawGrid(ctx, 'lightgray', r, r); //根据地图二维数组创建色块 for (var i = 0, len = mapArr.length; i < len; i++) { for (var j = 0, len1 = mapArr[i].length; j < len1; j++) { if (mapArr[i][j]) { createRect(j * r, i * r, r, "black"); } } } //绘制开始方块 createRect(startRect.x, startRect.y, r, "red"); if (endRect.hasCreate) { //绘制跟随方块 createRect(endRect.pos()[0], endRect.pos()[1], r, "blue"); endPoint = mapSCPos(endRect.pos()[1], endRect.pos()[0]); if(path === null){ var ASmap = convertArrToAS(mapArr); path = findPathA(ASmap, startPoint, endPoint, ASmap.length, ASmap.length); }else{ next = path.pop(); startRect.y = next.x * r; startRect.x = next.y * r; if(path.length===0){ startPoint = mapSCPos(startRect.pos()[1], startRect.pos()[0]); path = null; endRect.hasCreate = false; } } } requestAnimationFrame(update); } update(); stage.addEventListener('click', function () { //标准的获取鼠标点击相对于canvas画布的坐标公式 var x = event.clientX - stage.getBoundingClientRect().left, y = event.clientY - stage.getBoundingClientRect().top; var endRectPos = mapSCPos(y, x);//[i,j] endRect.x = endRectPos[1]*r; endRect.y = endRectPos[0]*r; if (mapHasRect(mapArr, endRectPos[0], endRectPos[1])) { console.log('这个位置已经有方块啦！'); } else { endRect.pos(); endRect.hasCreate = true; } }) };</script></html>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行上述代码，可得到如下运行效果：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。