-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
107 lines (87 loc) · 1.67 KB
/
index.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<title>Recursive Fill</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body{
background-color:black;
}
.row div{
width:50px;
height:50px;
display:inline-block;
}
.white{
background-color:white;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript">
var world = [
[1,1,1,0,0,0,0,3,2,2],
[0,0,0,0,1,0,0,3,3,3],
[0,2,2,0,1,0,0,0,0,0],
[0,2,2,0,1,1,1,1,0,0],
[0,2,2,0,1,0,0,0,0,3],
[0,2,2,0,1,0,0,3,3,3],
[0,0,0,0,1,0,0,3,3,3]];
var mapping = {
0: 'white',
1: 'red',
2: 'yellow',
3: 'blue',
4: 'green'
}
function drawWorld()
{
var output = '';
for(var i=0; i<world.length; i++)
{
output += '<div class="row">';
for(var j=0; j<world[i].length; j++)
{
output += "<div class='"+mapping[world[i][j]]+"'></div>";
}
output += '</div>';
}
document.getElementById('container').innerHTML = output;
// console.log(output);
}
document.onclick = function(e)
{
// console.log('Coordinate Clicked', e.x, e.y);
var x = Math.floor(e.x/50);
var y = Math.floor(e.y/50);
// console.log('X, Y', x, y);
// console.log('Original Color', world[y][x]);
console.log('Replace color', world[y][x], ' with color 4 starting from x:', x, 'y:', y);
fill(x, y, world[y][x], 4);
}
function fill(x,y,original_color, color)
{
//your recursion codes here
world[y][x] = color;
// your recursion codes here
drawWorld();
}
drawWorld();
</script>
</body>
</html>