利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

上效果图：

#先看生成随机迷宫的代码吧↓

<html>
<head>
<title>生成随机迷宫v1.0</title>
</head>
<body>
<center style="margin-top: 20px;">
<canvas id="myCan1" title="作者：谢辉"></canvas>
<p>生成随机迷宫v1.0</p>
<button onclick="history.go(0);">刷新</button>
</center>
</body>
<script>
var width = 1600;
var height = 800;
var cellWidth = 40;
var canvas = document.getElementById("myCan1");
var cxt = canvas.getContext("2d");
// 初始化canvas容器
function initCanvas() {
canvas.width = width;
canvas.height = height;
canvas.style = "border-radius: 15px";
canvas.style.border = "1px solid #3b3b3b";
};
initCanvas();
// 初始化画布
function initContext(cxt) {
cxt.lineCap="round";
cxt.lineJoin="round";
cxt.lineWidth = 1;
}
initContext(cxt);
// 开始画迷宫
function drawMaze(cxt) {
drawSingleBox(8, 0, 0, cxt);
};
/*setInterval(function(){
cxt.clearRect(0, 0, width, height);
drawMaze(cxt);
}, 50);*/
drawMaze(cxt);
// 递归画单元格
function drawSingleBox(option, posX, posY, cxt){
//cxt.strokeStyle = getColor();
switch(option){
case 0:
cxt.beginPath();
cxt.moveTo(posX, posY);
cxt.lineTo(posX + cellWidth, posY);
cxt.stroke();
break;
case 1:
cxt.beginPath();
cxt.moveTo(posX + cellWidth, posY);
cxt.lineTo(posX + cellWidth, posY + cellWidth);
cxt.stroke();
break;
case 2:
cxt.beginPath();
cxt.moveTo(posX, posY + cellWidth);
cxt.lineTo(posX + cellWidth, posY + cellWidth);
cxt.stroke();
break;
case 3:
cxt.beginPath();
cxt.moveTo(posX, posY);
cxt.lineTo(posX, posY + cellWidth);
cxt.stroke();
break;
}
if(posX >= width - cellWidth && posY >= height - cellWidth) {
return;
} else {
posX += cellWidth;
if(posX >= width){
posX = 0;
posY += cellWidth;
}
drawSingleBox(Math.floor(Math.random()*4), posX, posY, cxt);
}
}
// 随机出任意颜色
function getColor(){
var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorElements.split(",");
var color ="#";
for(var i =0;i<6;i++){
color+=colorArray[Math.floor(Math.random()*16)];
}
return color;
}
</script>
</html>