A* 算法(4个方向)

by redky

HTML

<body>
<div id="box" class="box"></div>
</body>

CSS

body, dl, dd { margin:0; padding:0; }
html { font-size:12px; background:#F5F5F5; }
.block { border:1px solid #eaeaea; width:30px; background:#FFF; }
.start, .start.path { background-color:#007de7; }
.end, .end.path { background-color:#333; }
.fence { background-color:#d1d1d1; }
.path { background-color:#57e700; -webkit-transition:.5s all ease; }

JavaScript

window.onload = function () {
    var oBox = document.getElementById('box');  // 主容器
    //创建一个文档碎片，把所有的新结点附加上，然后把文档碎片的内容一次性添加到document中，只需要一次页面刷新就可
    var oFrag = document.createDocumentFragment();  // 存放临时文档碎片
    var oStart = null;  // 起始点
    var oEnd = null;  // 结束点  
    var aPoint = oBox.getElementsByTagName('div');  // 存放地图元素
    var aMaps = [];  // 存放地图数据
    var maps = [];
    //参数设置
    var iRnd = 100;  // 随机障碍数
    var iRow = 30;  // 存放行数
    var iCol = 30;  // 存放列数
    var iWidth = 20;  // 单元格宽
    var iHeight = 20;  // 单元格高
    var iTime = 50;  // 动画延时
    //创建div元素，加入到oBox中
    function render() {
        oBox.innerHTML = '';        
        for (var i = 0; i < iRow; i++) {
            for (var j = 0; j < iCol; j++ ) {
                var oBlock = document.createElement('div');
                oBlock.className = 'block';
                oBlock.row = i;
                oBlock.col = j;
                oBlock.style.position = 'absolute';
                oBlock.style.left = iWidth * j + 'px';
                oBlock.style.top = iHeight * i + 'px';
                oBlock.style.width = iWidth - 1 + 'px';
                oBlock.style.height = iHeight - 1 + 'px';
                //先加入到文档碎片中
                oFrag.appendChild(oBlock);
            }
        }
        //再将文档碎片加入oBox中
        oBox.appendChild(oFrag);
        oBox.style.width = iWidth * iCol + 'px';
        oBox.style.height = iHeight * iRow + 'px';
        oBox.style.position = 'absolute';
        oBox.style.left = '50%';
        oBox.style.top = '50%';
        oBox.style.marginLeft = -oBox.offsetWidth / 2 + 'px';
        oBox.style.marginTop = -oBox.offsetHeight / 2 + 'px';
    }    
    //将oBox中的div添加到aMaps中（创建地图）
    function module() {
        aMaps = [];
        aPoint = oBox.getElementsByTagName('div');//此时已经有div加入到oBox中        
        for (var i = 0; i < iRow; i++) {
            aMaps[i] = [];
            for (var j = 0; j < iCol; j++) {
                aMaps[i][j] = aPoint[i * iCol +...