console
var w = 0;
var ctx;
var s = [];
var pos = 0;
var step = 0;
var state = 0;
var size,croad,cwall,thick;
var c;
var answer = [];
function init(){
size = parseInt('0' + localStorage.maze_size);
if (size < 10){size = 20;}
$('#size').val(size);
croad = localStorage.maze_croad;
if (!croad){croad = '#FFFFFF';}
$('#croad').val(croad);
cwall = localStorage.maze_cwall;
if (!cwall){cwall = '#000000';}
$('#cwall').val(cwall);
thick = parseInt('0' + localStorage.maze_thick);
if (thick < 1){thick = 4;}
$('#thick').val(thick);
c = document.getElementById("maze");
ctx = c.getContext("2d");
}
function reset(){
size = parseInt('0' + $('#size').val());;
if (size < 10 || size > 100){size = 20;}
localStorage.maze_size = size;
w = Math.floor($('.box').width() / size);
c.width = w * size;
c.height = w * size;
$('#maze').css('margin-left',($('.box').width() - w * size) / 2 + 'px');
croad = $('#croad').val();
if (!croad){croad = '#FFFFFF';}
localStorage.maze_croad = croad;
cwall = $('#cwall').val();;
if (!cwall){cwall = '#000000';}
localStorage.maze_cwall = cwall;
thick = parseInt('0' + $('#thick').val());;
if (thick < 1 || w - thick * 2 <= 0){thick = 2;}
localStorage.maze_thick = thick;
ctx.fillStyle = croad;
ctx.fillRect(0,0,w * size,w * size);
answer = [];
s = [];
pos = 0;
step = 0;
state = 0;
ctx.lineWidth = thick * 2;
ctx.strokeStyle = cwall;
for (var i = 0;i < size + 1;i++){
ctx.beginPath();
ctx.moveTo(0,i * w);
ctx.lineTo(size * w,i * w);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(i * w,0);
ctx.lineTo(i * w,size * w);
ctx.stroke();
s[i] = 0;
}
var vlist = [];
var now = 0;
vlist[0] = now;
while (vlist.length < size * size){
var x,y;
y = Math.floor(now / size);
x = now - y * size;
var nab = [];
if (x > 0 && $.inArray(now - 1,vlist) == -1){nab.push(now - 1);}
if (x < size - 1 && $.inArray(now + 1,vlist) == -1){nab.push(now + 1);}
if (y > 0 && $.inArray(now - size,vlist) == -1){nab.push(now - size);}
if (y < size - 1 && $.inArray(now + size,vlist) == -1){nab.push(now + size);}
if (nab.length > 0){
var dir = 0;
var next = nab[Math.floor(Math.random() * nab.length)];
if (next == now - size){dir = 1;s[now] |= 1;s[next] |= 4;}
if (next == now - 1){dir = 2;s[now] |= 2;s[next] |= 8;}
if (next == now + size){dir = 3;s[now] |= 4;s[next] |= 1;}
if (next == now + 1){dir = 4;s[now] |= 8;s[next] |= 2;}
chai(now,dir);
now = next;
vlist.push(now);
}else{
now = vlist[Math.floor(Math.random() * vlist.length)];
}
}
chai(0,1);
chai(size * size - 1,3);
draw(0,'red');
draw(size * size - 1,'#22F');
}
function chai(num,dir){
var x,y;
y = Math.floor(num / size);
x = num - y * size;
ctx.strokeStyle = croad;
switch (dir){
case 1:
ctx.beginPath();
ctx.moveTo(x * w + thick,y * w);
ctx.lineTo((x + 1) * w - thick,y * w);
ctx.stroke();
break;
case 2:
ctx.beginPath();
ctx.moveTo(x * w,y * w + thick);
ctx.lineTo(x * w,(y + 1) * w - thick);
ctx.stroke();
break;
case 3:
ctx.beginPath();
ctx.moveTo(x * w + thick,(y + 1) * w);
ctx.lineTo((x + 1) * w - thick,(y + 1) * w);
ctx.stroke();
break;
case 4:
ctx.beginPath();
ctx.moveTo((x + 1) * w,y * w + thick);
ctx.lineTo((x + 1) * w,(y + 1) * w - thick);
ctx.stroke();
break;
}
}
function move(dir){
if (state){return;}
var canmove = s[pos] & Math.pow(2,dir-1);
if (!canmove){return;}
var x,y;
canmove = false;
y = Math.floor(pos / size);
x = pos - y * size;
switch (dir){
case 1:
if (y > 0){
canmove = true;
y--;
}
break;
case 2:
if (x > 0){
canmove = true;
x--;
}
break;
case 3:
if (y < size - 1){
canmove = true;
y++;
}
break;
case 4:
if (x < size - 1){
canmove = true;
x++;
}
break;
}
if (canmove == true){
step++;
draw(pos,croad);
pos = x + y * size;
draw(pos,'red');
if (pos == size * size - 1){
alert('完成');
state = 1;
}
}
}
function draw(num,color){
var x,y;
y = Math.floor(num / size);
x = num - y * size;
ctx.fillStyle = color;
ctx.fillRect(x * w + thick,y * w + thick,w - thick * 2,w - thick * 2);
}
function show(){
answer = [];
for (var i = 0;i < size * size;i++){
answer[i] = 0;
}
flood(0,1);
console.log(answer[size * size - 1]);
path(size * size - 1);
}
function path(num){
var isfind = false;
var x,y;
y = Math.floor(num / size);
x = num - y * size;
var color = (answer[num]==2?'#F00':'#0F0');
if (x < size - 1 && !isfind){
if (s[num] & 8 && answer[num + 1] == answer[num] - 1){
isfind == true;
draw(num + 1,color);
path(num + 1);
}
}
if (y < size - 1 && !isfind){
if (s[num] & 4 && answer[num + size] == answer[num] - 1){
isfind == true;
draw(num + size,color);
path(num + size);
}
}
if (x > 0 && !isfind){
if (s[num] & 2 && answer[num - 1] == answer[num] - 1){
isfind == true;
draw(num - 1,color);
path(num - 1);
}
}
if (y > 0 && !isfind){
if (s[num] & 1 && answer[num - size] == answer[num] - 1){
isfind == true;
draw(num - size,color);
path(num - size);
}
}
}
function flood(num,level){
if (answer[num]){return;}
answer[num] = level;
var x,y;
y = Math.floor(num / size);
x = num - y * size;
if (x < size - 1){
if (s[num] & 8){
flood(num + 1,level + 1);
}
}
if (y < size - 1){
if (s[num] & 4){
flood(num + size,level + 1);
}
}
if (x > 0){
if (s[num] & 2){
flood(num - 1,level + 1);
}
}
if (y > 0){
if (s[num] & 1){
flood(num - size,level + 1);
}
}
}
$(function(){
init();
reset();
$(window).keydown(function (event){
switch (event.which){
case 38:
move(1);
break;
case 37:
move(2);
break;
case 40:
move(3);
break;
case 39:
move(4);
break;
}
});
});
<div class="box">
<canvas id="maze"></canvas>
<div class="ctrl">
<div class="pad">
<a href="javascript:;" onClick="move(1)"><i class="fa fa-arrow-up"></i></a>
<a href="javascript:;" onClick="move(2)"><i class="fa fa-arrow-left"></i></a>
<a href="javascript:;" onClick="move(3)"><i class="fa fa-arrow-down"></i></a>
<a href="javascript:;" onClick="move(4)"><i class="fa fa-arrow-right"></i></a>
</div>
<div class="set">
<p>迷宫尺寸 <input type="number" size="2" maxlength="1" id="size"></p>
<p>道路颜色 <input type="color" id="croad"></p>
<p>墙壁颜色 <input type="color" id="cwall"></p>
<p>墙壁厚度 <input type="number" size="2" maxlength="1" id="thick"></p>
<a href="javascript:;" onclick="show();">答案</a>
<a href="javascript:;" onclick="reset();">重置</a>
</div>
</div>
</div>
* {margin:0 auto; padding:0;list-style:none;text-decoration:none;}
body {background:#0e7142;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
body:after {content:'v1.0_0128';position:fixed;left:0;bottom:0;color:#0C6138;line-height:16px;font-size:12px;}
.box {width: 677px;}
.ctrl {width:100%;height:180px;padding:10px 0;background:#084428;border-radius:10px;color:#FFF;text-align:center;line-height:30px;margin-top:10px;}
.ctrl:after {content: '';display: block;height: 0;clear: both;}
.pad {width: 180px; height: 180px;position: relative;float: left;margin-left: 5px;}
.pad a {display: block;width: 60px;height: 60px;position: absolute;text-align: center;font-size: 20px;line-height: 60px;color: #FFF;background: #666;border-radius: 5px;box-shadow: 3px 3px 3px 1px #CCC inset,-3px -3px 3px 1px #333 inset;}
.pad a:nth-child(1) {top:0;left: 60px;}
.pad a:nth-child(2) {top:60px;left: 0;}
.pad a:nth-child(3) {top:120px;left: 60px;}
.pad a:nth-child(4) {top:60px;left: 120px;}
.set {width: 130px;float: right;}
.set a {display:inline-block;width:60px;height:30px;text-align:center;background:#C32641;color:#FFF;;border-radius:3px;}
.set input[type=number] {width: 42px;text-align: center;}