-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
323 lines (282 loc) · 8.57 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<html>
<head>
<title>THE BOX GAME</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<script>
// Canvas initialization code ------------------------------------------//
// Store size of the browser window into width and height variables
var CANVAS_WIDTH = window.innerWidth;
var CANVAS_HEIGHT = window.innerHeight;
// Create canvas element. This is where we draw our graphics
var canvasElement = document.createElement("canvas");
canvasElement.width = CANVAS_WIDTH;
canvasElement.height = CANVAS_HEIGHT;
// We need the "canvas context" to draw graphics
// We'll just grab it here and store it in a variable
var canvas = canvasElement.getContext("2d");
// Append canvas to div
var div = document.createElement("div");
div.setAttribute("align", "center");
div.appendChild(canvasElement);
// Add the div with the canvas to the body
document.body.appendChild(div);
// Assign function to onresize event
window.onresize = function() {
// Resize canvas to fit the browser window
CANVAS_WIDTH = window.innerWidth;
CANVAS_HEIGHT = window.innerHeight;
canvasElement.width = CANVAS_WIDTH;
canvasElement.height = CANVAS_HEIGHT;
canvas.textAlign = "center";
canvas.font = "30px Roboto";
};
/*
FPS variable is obviously defining the frames per second. This is how
often we're going to update the screen. The setInterval function calls
the draw() function approximately 60 times a second (approximately
because setInterval allows for some inconsistencies if the function
can't be called 60 times)
*/
var FPS = 24;
setInterval(
function() {
//update();
draw();
},
1000/FPS
);
canvas.textAlign = "center";
canvas.font = "30px Roboto";
//----------------------------------------------------------------------//
var score = 0;
/*
This array stores all our boxes. We're going to use an array because
we want to have multiple boxes on the screen
*/
var boxes = [];
/*
This is needed so that the user can eliminate the boxes by dragging
the mouse while pressing the mouse button. Check onmousemove event
of the canvasElement variable
*/
var mousePressed = false;
// Grabbed from:
// http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
/*
This is the box class. Don't ask me why we have to pass a parameter to
this. I saw it done this way on html5rocks and it works perfectly so
I'm going to leave it with a parameter
*/
function Box(B)
{
/*
We'll initialize the parameter with an empty array. This is needed
because we're going to be "returning" B from this function/class
at the end and we need an empty array if there was no parameter
passed
*/
B = B || {};
B.active = true;
// Assign random color to each box created
B.color = getRandomColor();
// Generate value which will be used to decrement the box size (aka age)
B.decrement = Math.floor(Math.random() * 10) + 1;
/*
This variable defines the "age" of this box. The age determines
the size of the box. This is the variable we will decrement
while time passes
*/
B.age = Math.floor(Math.random() * CANVAS_WIDTH/4) + CANVAS_WIDTH/10;
// We'll call this function when the box is clicked (or pressed)
B.click = function()
{
B.active = false;
}
// Check if box is active. The box is active if the age > 0
B.isActive = function()
{
if (B.age > 0 && B.active)
{
return true;
}
else
{
return false;
}
};
/*
Function to check if the box is dead. We'll reset the score if
this is the case
*/
B.isDead = function()
{
if (B.age <= 0) return true;
else return false;
};
/*
Randomly generate the x and y coordinates for this box. We're
subtracting the age from the width and height to make sure that
the box isn't displayed off screen
*/
B.x = Math.floor( Math.random() * (CANVAS_WIDTH - B.age) );
B.y = Math.floor( Math.random() * (CANVAS_HEIGHT - B.age) );
// Function which is called to draw the rectangle each frame
B.draw = function()
{
// Draw a black rectangle with the current specs on the canvas
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.age, this.age);
// Decrement the age so that the rectangle keeps decreasing in size
this.age -= this.decrement;
};
// Return our box object so we can use it and assign it to variables
return B;
}
/*
Collision detection function. We'll use this to determine if two boxes
are overlapping.
*/
function collides(a, b)
{
return a.x < b.x + b.age &&
a.x + a.age > b.x &&
a.y < b.y + b.age &&
a.y + a.age > b.y;
}
function removeBox(box)
{
var index = boxes.indexOf(box);
if (index > -1) {
boxes.splice(index, 1);
}
}
/*
We'll assign this function to the mouse and touch events so that we can
detect if the clicked/touched area is within a box. If it is, then we
remove the box which was clicked/touched from the array. The mouse/touch
events use clientX and clientY from the event to determine the location
of the click/touch
*/
function checkInput()
{
// The code in the comments was ommited but it would become necessary if
// the canvas wasn't fit onto the screen
// This variable defines the boundaries of our canvas
// var cRect = canvasElement.getBoundingClientRect();
// var x = event.clientX - cRect.left;
// var y = event.clientY - cRect.top;
// X and Y coordinates of event are stored in x and y
var x = event.clientX;
var y = event.clientY;
boxes.forEach(
function(box)
{
// If click/touch was within boundaries of the box ...
if (
box.x <= x && box.x + box.age >= x &&
box.y <= y && box.y + box.age >= y
)
{
// ... then remove the box from the array and increment
// the score and add a new box
removeBox(box);
score++;
boxes.push(Box());
}
}
);
}
/*
The mouse is pressed when the onmousedown event occurs. We also want
the program to be aware of this through the mousePressed variable
*/
canvasElement.onmousedown = function()
{
mousePressed = true;
checkInput();
};
// Mouse isn't pressed anymore when the onmouseup event occurs
canvasElement.onmouseup = function()
{
mousePressed = false;
};
/*
If the mouse is pressed while the mouse is moving, we'll allow the user
to eliminate the boxes!
*/
canvasElement.onmousemove = function()
{
if (mousePressed)
{
checkInput();
}
};
// This stuff for mobile devices hasn't been tested, but its here
canvasElement.touchstart = checkInput;
canvasElement.touchmove = checkInput;
// Add one box to the boxes array to start with
boxes.push(Box());
// This is where the magic happens
function draw()
{
/*
First of all, we'll clear the screen. This needs to be done so
that the residue from the previous frame isn't visible in the
current frame
*/
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
// Draw all the boxes in the array
boxes.forEach(
function(box)
{
box.draw();
// If user resizes window and the box is outside the screen
// we'll delete the box and add a new one
if (box.x >= CANVAS_WIDTH || box.y >= CANVAS_WIDTH)
{
removeBox(box);
boxes.push(Box());
}
}
);
// Remove all the inactive boxes
boxes = boxes.filter(
function(box)
{
return box.isActive();
}
);
displayScore();
// If the boxes array has nothing in it, then we'll add a box and
// reset the score
if (boxes.length <= 0)
{
boxes.push(Box());
score = 0;
}
}
function displayScore()
{
canvas.fillStyle = "black";
canvas.fillText("Score: " + score + " ", CANVAS_WIDTH/2, 50);
}
</script>
</body>
</html>