jQuery迷宫自动寻路特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery迷宫自动寻路特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            font-family: monospace;
        }

        h1 {
            font-size: 50px;
            font-family: Lobster;
            position: relative;
            margin: 0 0 20px 0;
            padding: 0;
            font-weight: 400;
            text-align: center;
            color: #333;
            text-shadow: 1px 1px 3px #777;
        }

        #btns {
            text-align: center;
            margin-bottom: 30px;
        }

        .btn {
            border: 7px solid rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: inline-block;
            padding: 5px 10px;
            cursor: pointer;
            color: #fff;
            position: relative;
            transition: all 0.2s ease;
            margin: 0 10px;
        }

        .btn.disabled {
            opacity: 0.5;
            pointer-events: none;
        }

        .btn:active {
            top: 1px;
        }

        #solve {
            background: #56bb56;
        }

        #solve:hover {
            background: #429142;
        }

        #solve:active {
            background: #7ADC7A;
        }

        #regen {
            background: #B52424;
        }

        #regen:hover {
            background: #8E1717;
        }

        #regen:active {
            background: #E63C3C;
        }

        #maze-holder {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 565px;
            display: table;
        }

        #maze {
            font-size: 0;
            width: 565px;
            height: 565px;
            border: 15px solid #ccc;
            border-radius: 15px;
            box-shadow: 0 0 0 1000000px #f0f0f0;
            z-index: -1;
        }

        .cell {
            color: #333;
            height: 23px;
            width: 23px;
            display: inline-block;
            box-sizing: border-box;
            margin: 0 -7px -7px 0;
            position: relative;
        }

        .cell[data-north=true] {
            border-top: 7px solid;
        }

        .cell[data-south=true] {
            border-bottom: 7px solid;
        }

        .cell[data-east=true] {
            border-right: 7px solid;
        }

        .cell[data-west=true] {
            border-left: 7px solid;
        }

        .cell[data-solution=true]:not([data-start=true]):not([data-end=true]):before {
            background: #E2E215;
            content: "a";
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: -1;
        }

        .cell[data-start=true] {
            background: #56bb56;
            z-index: 1;
        }

        .cell[data-end=true] {
            background: #B52424;
            z-index: 1;
        }
    </style>

    <script src="js/prefixfree.min.js"></script>

</head>

<body>
    <div id='maze-holder'>
        <h1>Just another maze</h1>
        <div id='btns'>
            <div class='btn' id='solve'>solve</div>
            <div class='btn' id='regen'>regenerate</div>
        </div>
        <div id='maze'></div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var html = $('#maze')function Cell(I,J){
	this.i = I;
	this.j = J;
	this.visited = false;
	this.start = false;
	this.end = false;
	this.path = false;
	this.correct_path = false;
	this.walls ={
	n:true,s:true,e:true,w:true}
;
	this.print = function(){
	return '<div id="cell_' + this.i +'_'+ this.j + '" data-solution="' + this.correct_path + '" data-west="' + this.walls.w + '" data-east="' + this.walls.e + '" data-north="' + this.walls.n + '" data-south="' + this.walls.s + '" class="cell" data-start="' + this.start + '" data-end="' + this.end + '" data-visited="' + this.visited + '"></div>'}
}
var maze ={
	height:35,width:35,visited_cells:[]}
maze.init = function(){
	maze.cells = [[]];
	for(i = 0;
	i < this.width;
	i++){
	maze.cells[i] = [];
	for(j = 0;
	j < this.height;
	j++){
	maze.cells[i][j] = new Cell(i,j);
}
}
maze.cells[0][0].start = true;
	maze.cells[this.width - 1][this.height - 1].end = true;
	maze.cells[this.width - 1][this.height - 1].walls.e = false;
	maze.cells[0][0].walls.w = false}
maze.print = function(){
	var new_html = '' for(i = 0;
	i < this.width;
	i++){
	for(j = 0;
	j < this.height;
	j++){
	new_html += this.cells[i][j].print()}
new_html += '<br style="clear:both"/>'}
html.html(new_html)}
maze.print_solution = function(){
	setTimeout(function(){
	var cell = maze.solution_copy.pop() document.getElementById('cell_' + cell.i + '_' + cell.j).setAttribute('data-solution',"true");
	if(maze.solution_copy.length != 0) maze.print_solution();
	else{
	$('#solve').text("solved").addClass('disabled') $('#regen').removeClass('disabled')}
}
,50)}
function RandomUniqueNumber(len){
	this.numbers = [];
	for(x = 0;
	x < len;
	x++) this.numbers[x] = x;
	this.get = function(){
	var i = Math.ceil(Math.random()*(this.numbers.length)) - 1;
	return this.numbers.splice(i,1)[0]}
}
maze.mazifiy = function(i,j){
	maze.visited_cells.push(maze.cells[i][j]);
	maze.cells[i][j].visited = true;
	var invalid = true var randomGen = new RandomUniqueNumber(4);
	var counter = 0 while(invalid && counter < 4){
	invalid = false counter ++ var randomSide = randomGen.get();
	if(randomSide == 0 && i > 0 && !maze.cells[i - 1][j].visited){
	maze.cells[i][j].walls.n = false;
	maze.cells[i - 1][j].walls.s = false maze.mazifiy(i - 1,j)}
else if(randomSide == 1 && i < maze.height - 1 && !maze.cells[i + 1][j].visited){
	maze.cells[i][j].walls.s = false;
	maze.cells[i + 1][j].walls.n = false maze.mazifiy(i + 1,j)}
else if(randomSide == 2 && j < maze.width - 1 && ! maze.cells[i][j + 1].visited){
	maze.cells[i][j].walls.e = false;
	maze.cells[i][j + 1].walls.w = false maze.mazifiy(i,j + 1)}
else if(randomSide == 3 && j > 0 && !maze.cells[i][j - 1].visited){
	maze.cells[i][j].walls.w = false;
	maze.cells[i][j - 1].walls.e = false maze.mazifiy(i,j - 1)}
else{
	invalid = true}
}
// Dead end maze.visited_cells.pop() var last = maze.visited_cells.pop() if(last != undefined) maze.mazifiy(last.i,last.j)}
maze.solve = function(i,j){
	var cell = maze.cells[i][j];
	if(cell.end) return true if(cell.path) return false cell.path = true if(i > 0 && !cell.walls.n){
	if(maze.solve(i - 1,j)){
	maze.solution.push(cell);
	return true;
}
}
if(i < maze.height - 1 && !cell.walls.s){
	if(maze.solve(i + 1,j)){
	maze.solution.push(cell);
	return true;
}
}
if(j > 0 && !cell.walls.w){
	if(maze.solve(i,j - 1)){
	maze.solution.push(cell);
	return true;
}
}
if(j < maze.width - 1 && !cell.walls.e){
	if(maze.solve(i,j + 1)){
	maze.solution.push(cell);
	return true;
}
}
return false;
}
maze.visited_cells = [];
	maze.solution = [];
	maze.init()maze.mazifiy(0,0);
	maze.print()$('#regen').click(function(){
	$('#solve').text("solve").removeClass('disabled') $(this).addClass('disabled') maze.visited_cells = [];
	maze.solution = [];
	maze.init() maze.mazifiy(0,0);
	maze.print() $(this).removeClass('disabled')}
)$('#solve').click(function(){
	$(this).text("solving...").addClass('disabled') $('#regen').addClass('disabled') maze.solution = [];
	maze.solve(0,0);
	maze.solution_copy = maze.solution.concat([]) maze.print_solution()}
)

CSS代码(style.css):

html,body{width:100%;height:100%;font-family:monospace;}
h1{font-size:50px;font-family:Lobster;position:relative;margin:0 0 20px 0;padding:0;font-weight:400;text-align:center;color:#333;text-shadow:1px 1px 3px #777;}
#btns{text-align:center;margin-bottom:30px;}
.btn{border:7px solid rgba(0,0,0,0.2);border-radius:5px;display:inline-block;padding:5px 10px;cursor:pointer;color:#fff;position:relative;transition:all 0.2s ease;margin:0 10px;}
.btn.disabled{opacity:0.5;pointer-events:none;}
.btn:active{top:1px;}
#solve{background:#56bb56;}
#solve:hover{background:#429142;}
#solve:active{background:#7ADC7A;}
#regen{background:#B52424;}
#regen:hover{background:#8E1717;}
#regen:active{background:#E63C3C;}
#maze-holder{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:565px;display:table;}
#maze{font-size:0;width:565px;height:565px;border:15px solid #ccc;border-radius:15px;box-shadow:0 0 0 1000000px #f0f0f0;z-index:-1;}
.cell{color:#333;height:23px;width:23px;display:inline-block;box-sizing:border-box;margin:0 -7px -7px 0;position:relative;}
.cell[data-north=true]{border-top:7px solid;}
.cell[data-south=true]{border-bottom:7px solid;}
.cell[data-east=true]{border-right:7px solid;}
.cell[data-west=true]{border-left:7px solid;}
.cell[data-solution=true]:not([data-start=true]):not([data-end=true]):before{background:#E2E215;content:"a";position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:-1;}
.cell[data-start=true]{background:#56bb56;z-index:1;}
.cell[data-end=true]{background:#B52424;z-index:1;}

附件:下载该文件资源,减少时间成本(增值服务)