html
html
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Maze generator</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://fonts.googleapis.com/css?family=Bellefair' rel='stylesheet'>
</head>
<body><h2>Maze generator:</h2></body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
body {
background-color: #333;
color: #FFF;
text-align: center;
font-family: Bellefair;
}
canvas {
left: 0px;
position: absolute;
width: 100%;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
var W = 300;
var canvas = $('<canvas>').attr({
'width':W,
'height':W
});
var c = canvas[0].getContext('2d');
$('body').append(canvas);
var w = 15;
var rows = Math.floor(W/w);
var cells = [];
for(var y = 0; y < W; y += w){
for(var x = 0; x < W; x += w){
cells.push({
x:x,
y:y,
visited:false,
walls:[true,true,true,true],
color:'#000',
draw :function(){
c.fillStyle = this.color;
c.fillRect(this.x,this.y,w,w);
for(var b in this.walls){
if(this.walls[b]){
c.beginPath();
c.strokeStyle = '#0AF';
c.lineWidth = 1;
var coords = [
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run