js寻路算法

原创 2015年07月08日 14:54:57
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1{ height:auto; overflow:hidden; margin:20px auto; border:1px #000 solid; border-bottom:none; border-right:none;}
#ul1 li{border:1px #000 solid; border-top:none; border-left:none; float:left;}
#ul1 li.sty1{ background:red;}
#ul1 li.sty2{ background:green;}
#ul1 li.sty3{ background:blue;}
#input1{ width:100px; position:absolute; left:50%; margin-left:-50px;}
</style>
</head>

<body>
<ul id="ul1">
</ul>
<input type="button" value="开始寻路" id="input1">
<script>

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var oInput = document.getElementById('input1');
var beginLi = oUl.getElementsByClassName('sty1');
var endLi = oUl.getElementsByClassName('sty2');

var map = [
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,1,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,2,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
];

var cols = Math.sqrt(map.length);
var sizeGird = 20;
var openArr = [];
var closeArr = [];

init();

function init(){
    createMap();
    oInput.onclick = function(){
        openFn();
    };
}

function createMap(){
    
    oUl.style.width = cols * (sizeGird + 1) + 'px';
    
    for(var i=0;i<map.length;i++){
        var oLi = document.createElement('li');
        oLi.style.width = sizeGird + 'px';
        oLi.style.height = sizeGird + 'px';
        oUl.appendChild(oLi);
        
        if( map[i] == 1 ){
            oLi.className = 'sty1';
            openArr.push(oLi);
        }
        else if(map[i] == 2){
            oLi.className = 'sty2';
        }
        else if(map[i] == 3){
            oLi.className = 'sty3';
            closeArr.push(oLi);
        }
        
    }
}

function openFn(){
    
    var nowLi = openArr.shift();
    
    if( nowLi == endLi[0] ){
        showLine();
        return;
    }
    
    closeFn(nowLi);
    
    findLi(nowLi);
    
    //console.log( openArr );
    
    openArr.sort(function(li1,li2){
        return li1.num - li2.num;
    });
    
    //console.log( openArr );
    
    openFn();
    
}
function closeFn(nowLi){
    closeArr.push( nowLi );
}

function findLi(nowLi){
    var result = [];
    for(var i=0;i<aLi.length;i++){
        if( filter(aLi[i]) ){
            result.push( aLi[i] );
        }
    }
    function filter(li){
        for(var i=0;i<closeArr.length;i++){
            if( closeArr[i] == li ){
                return false;
            }
        }
        for(var i=0;i<openArr.length;i++){
            if( openArr[i] == li ){
                return false;
            }
        }
        return true;
    }
    
    for(var i=0;i<result.length;i++){
        if( (Math.abs(nowLi.offsetLeft - result[i].offsetLeft)<= sizeGird + 1) && (Math.abs(nowLi.offsetTop - result[i].offsetTop)<= sizeGird + 1) ){
            result[i].num = f(result[i]);
            result[i].parent = nowLi;
            openArr.push( result[i] );
        }
    }
    
}

function showLine(){
    var result = [];
    var lastLi = closeArr.pop();
    var iNow = 0;
    findParent(lastLi);
    function findParent(li){
        result.unshift(li);
        if( li.parent == beginLi[0] ){
            return;
        }
        findParent(li.parent);
    }
    
    var timer = setInterval(function(){
        
        result[iNow].style.background = 'red';
        iNow++;
        if(iNow == result.length){
            clearInterval(timer);
        }
    },500);
    
}

function f(nodeLi){
    return g(nodeLi) + h(nodeLi);
}
function g(nodeLi){
    var a = beginLi[0].offsetLeft - nodeLi.offsetLeft;
    var b = beginLi[0].offsetTop - nodeLi.offsetTop;
    return Math.sqrt(a*a + b*b);
}
function h(nodeLi){
    var a = endLi[0].offsetLeft - nodeLi.offsetLeft;
    var b = endLi[0].offsetTop - nodeLi.offsetTop;
    return Math.sqrt(a*a + b*b);
}

</script>
</body>
</html>

js实现A*寻路算法

js使用canvas绘制界面。
  • lj745280746
  • lj745280746
  • 2014年03月08日 00:00
  • 2120

前几天搞定了贪吃蛇自动寻路算法……

写了几天,搞定了贪吃蛇自动寻路……目前在20*20的格子上面可以稳定跑到100+分,200+的话……看运气吧o(╯□╰)o,总之算法还有很多可以修改的地方,而且UI部分还有部分没写的…… 总结下:这...
  • blankmanp
  • blankmanp
  • 2015年05月24日 22:42
  • 2763

js实现贪吃蛇

思想:1、设计蛇:属性有宽、高、方向、状态(有多少节),方法:显示,跑2、设计食物:属性宽、高3、显示蛇:根据状态向地图里加元素4、蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇...
  • snow_small
  • snow_small
  • 2018年01月19日 17:03
  • 13

js实现A*寻路算法

onLoad: function () {          var fg = [];            var map = {              rows:5,        //...
  • xinsong520
  • xinsong520
  • 2016年08月05日 11:44
  • 83

PatrolJS转as3版本的navmesh导航寻路源码

PatrolJS转as3版本的navmesh导航寻路源码
  • sjt223857130
  • sjt223857130
  • 2017年06月24日 14:37
  • 151

在WebGL场景中使用2DA-寻路

这篇文章将讨论如何在一个自定义的地面网格上进行简单的2D寻路,以及确定路径后如何使用基于物理引擎的运动方式使物体沿路径到达目标地点。读者需要预先对WebGL和Babylonjs知识有一些了解,可以参考...
  • zhanglao33
  • zhanglao33
  • 2017年08月18日 11:38
  • 155

如何用js得到当前页面的url信息方法(JS获取当前网址信息)

设置或获取对象指定的文件名或路径。 alert(window.location.pathname)   设置或获取整个 URL 为字符串。   alert(window.loca...
  • zh13544539220
  • zh13544539220
  • 2015年07月03日 15:09
  • 254

Html5游戏框架Craftyjs入门简单RPG及A*寻路

Crafty.js是一个比较简单轻量的Html5游戏框架,个人比较喜欢,是因为它足够简便(如果你只需要制作简单的小游戏,例如微信h5中的各种游戏)。 遗憾的是,Crafty.js的社区活跃的人越来越少...
  • dyyaries
  • dyyaries
  • 2016年10月29日 17:22
  • 1784

JS手撸数据结构系列(四) ——Prim算法与迷宫生成

迷宫问题一个100*100的方格的迷宫,障碍未知,只知道起点和终点,以第一视角进入,求最短距离路径。这是当时腾讯二面的面试官给我留的题目,当时只要求写出了BFS求最短路径的算法,那么就会很自然的想到如...
  • scargtt
  • scargtt
  • 2017年05月02日 10:40
  • 1294
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js寻路算法
举报原因:
原因补充:

(最多只允许输入30个字)