-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
118 lines (118 loc) · 2.62 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
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Flood It</title>
</head>
<body>
<center>
<h1>Flood-It</h1>
<button type="button" onclick="window.location.reload();"> New Game </button>
<br><br>
<canvas id="grid" width=280 height=280 style="border:8px solid #000000;">
</canvas><br>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
var grid = document.getElementById('grid');
var context = grid.getContext('2d');
var arr = new Array(14);
for (var i = 0; i < 14; i++)
{
arr[i] = new Array(14);
}
for(var i=0;i<14;i++)
{
for(var j=0;j<14;j++)
{
arr[i][j] = Math.floor(Math.random()*6);
}
}
function paint()
{
var xpos=0,ypos=0;
for(var i=0;i<14;i++)
{
xpos=0;
for(var j=0;j<14;j++)
{
if(arr[i][j]==0)
context.fillStyle = "rgb(255,0,0)";
else if(arr[i][j]==1)
context.fillStyle = "rgb(92, 214, 92)";
else if(arr[i][j]==2)
context.fillStyle = "rgb(0, 204, 255)";
else if(arr[i][j]==3)
context.fillStyle="rgb(255, 174, 51)";
else if(arr[i][j]==4)
context.fillStyle="rgb(255, 255, 0)";
else
context.fillStyle="rgb(153, 102, 255)";
context.fillRect(xpos,ypos, 20, 20);
xpos+=20;
}
ypos+=20;
}
}
function floodfill4x(originalColor,newColor,i,j)
{
if(i<0 || j<0 || i>13 || j>13)
return;
if(arr[i][j]!=originalColor)
return;
else {
arr[i][j]=newColor;
floodfill4x(originalColor,newColor,i+1,j);
floodfill4x(originalColor,newColor,i-1,j);
floodfill4x(originalColor,newColor,i,j+1);
floodfill4x(originalColor,newColor,i,j-1);
}
}
function checkwin()
{
for(var i=0;i<14;i++) {
for(var j=0;j<14;j++) {
if(arr[i][j]!=arr[0][0])
return false;
}
}
return true;
}
paint();
var chances=25;
var played=0;
$('#grid').click(function(e) {
if(played<25) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var colorcode=arr[Math.floor((y-8)/20)][Math.floor((x-8)/20)];
var win;
if(colorcode!=arr[0][0]) {
played++;
floodfill4x(arr[0][0],colorcode,0,0);
win=checkwin();
paint();
}
if(win)
$('#result').html("YOU WIN");
if(!win && played==25)
$('#result').html("YOU LOSE")
$('#status').html(played+"/"+chances);
}
});
</script>
<div id="status"></div>
<h3 id="result"></div>
</center>
</body>
</html>