使用HTML5动画演示A*最短路径算法

A* Search Algorithm with HTML5 animation 点击目标位置，自动寻找和绘制起点和终点之间的最短路径。

html5, 算法

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3319
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// demo.js
// Sets up the page with a graph

var css = { start: "start", finish: "finish", wall: "wall", active: "active" };

编译

CSS

html,
body {
    height: 100%;
    margin: 0;
}
#content {
    margin: 0 auto;
    width: 750px;
}
#header,
#footer {
    width: 100%;
    background: #99b;
}
#header {
    border-bottom: solid 2px #fff;
    margin-bottom: 15px;
    padding-bottom: 5px;
}
#footer {
    border-top: solid 2px #fff;
    margin-top: 20px;
    padding-top: 5px;
}
#header a,
#footer a {
    color: #fff;
    font-size: 1.2em;
}
ul.basics {
    list-style-type: none;
}
ul.basics li {
    margin-bottom: .45em;
}
.result-panel {
    width: 80%;
    padding: 10px;
    margin: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
}
pre {
    padding-left: 10px;
    border-left: solid 5px #99b;
}
.result-panel pre {
    border-left: solid 5px #b99;
}
.result-panel pre span {
    font-size: 1.4em;
    color: #f11;
    font-weight: bold;
}
pre span.key {
    color: #f11;
    font-weight: normal;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#message {
    color: #f00;
    font-size: 1.2em;
}
#controls {
    border: dashed 3px #9999BB;
    border-left: none;
    border-right: none;
    margin-bottom: 25px;
    padding: 5px 0;
    width: 650px;
}
#search_grid {
    width: 650px;
    height: 650px;
    position: relative;
}
.grid_item {
    display: block;
    border: 1px solid #bbb;
    float: left;
    line-height: 12px;
    font-size: 10px;
}
.grid_item.wall {
    background-color: #9CA69D;
}
.grid_item.start {
    background-color: #FF703F;
}
.grid_item.active {
    background-color: #FF703F;
}
.grid_item.finish {}

HTML

<div id="content">
    <h2>A* Search Algorithm with HTML5 animation</h2>

<label for="selectWallFrequency">Wall Frequency: </label>
        <select id="selectWallFrequency">
            <option value=".1">10%</option>
            <option value=".2">20%</option>
            <option value=".3">30%</option>
            <option value=".4">40%</option>
        </select>
        <br />
        <label for="selectGridSize">Grid Size: </label>
        <select id="selectGridSize" name="selectGridSize">
            <option value="10">10x10</option>
            <option value="15">15x15</option>
            <option value="20">20x20</option>
            <option value="30">30x30</option>
            <option value="40" selected="selected">40x40</option>
            <option value="50">50x50</option>
            <option value="100">100x100</option>
        </select>

<br />
        <label for="checkDebug">Show search info?</label>
        <input type="checkbox" name="checkDebug" id="checkDebug" />
        <br />
        <input type="button" id="btnGenerate" value="Generate New Map" />
        <br />
        <span id="message">Click on a grid position to search</span>
    </div>

<div id="main">
        <div id="search_grid">Loading grid...</div>
    </div>

</div>
<div id="footer"></div>

var $grid = $("#search_grid");
        var $selectWallFrequency = $("#selectWallFrequency");
        var $selectGridSize = $("#selectGridSize");
        var $checkDebug = $("#checkDebug");

var opts = {
            wallFrequency: $selectWallFrequency.val(),
            gridSize: $selectGridSize.val(),
            debug: $checkDebug.attr("checked")
        };

var grid = new GraphSearch($grid, opts, astar.search);

$("#btnGenerate").click(function() {
            grid.initialize();
        });

$selectWallFrequency.change(function() {
            grid.setOption({
                wallFrequency: $(this).val()
            });
            grid.initialize();
        });

$selectGridSize.change(function() {
            grid.setOption({
                gridSize: $(this).val()
            });
            grid.initialize();
        });

$checkDebug.change(function() {
            grid.setOption({
                debug: $(this).attr("checked")
            });
        });

});
</script>

A* Search Algorithm with HTML5 animation 点击目标位置，自动寻找和绘制起点和终点之间的最短路径。

html5, 算法

编辑器支持Emmet

快捷键

A* Search Algorithm with HTML5 animation 点击目标位置，自动寻找和绘制起点和终点之间的最短路径。

html5, 算法

HTML5使用柏林噪音算法实现的泼油漆动画

HTML5/Canvas使用单纯形噪音算法实现的粒子乱流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：