-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.js
176 lines (155 loc) · 6.98 KB
/
main.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
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
"use strict";
(function(){
var global = {};
class Level {
constructor(url,waldoX,waldoY,waldoR,aura) {
this.ready = false;
this.image = new Image();
var theThis = this;
this.image.addEventListener("load",
function() {
theThis.ready = true;
if(typeof(theThis.callback) === "function")
theThis.callback();
});
this.image.src = url;
this.width = this.image.width;
this.height = this.image.height;
this.x = 0;
this.y = 0;
this.aura = aura || 1;
this.waldoRPx = waldoR;
this.waldoXPx = waldoX;
this.waldoYPx = waldoY;
}
}
function scale() {
if(global.level.image.width / self.innerWidth < global.level.image.height / self.innerHeight) {
global.level.height = self.innerHeight;
global.level.width = global.level.image.width / global.level.image.height * global.level.height;
global.level.x = (self.innerWidth - global.level.width) / 2;
global.level.y = 0;
} else {
global.level.width = self.innerWidth;
global.level.height = global.level.image.height / global.level.image.width * global.level.width;
global.level.x = 0;
global.level.y = (self.innerHeight - global.level.height) / 2;
}
global.level.aura *= global.level.width * global.level.height / 20000;
global.level.waldoX = global.level.x + global.level.waldoXPx / global.level.image.width * global.level.width;
global.level.waldoY = global.level.y + global.level.waldoYPx / global.level.image.height * global.level.height;
global.level.waldoR = global.level.waldoRPx / global.level.image.width * self.innerWidth;
global.main.width = self.innerWidth;
global.main.height = self.innerHeight;
global.drawable.fillStyle = "#000";
global.drawable.fillRect(0,0,self.innerWidth,self.innerHeight);
global.rgradient.width = global.level.aura * 2 + 3;
global.rgradient.height = global.rgradient.width;
var c = global.rgradient.getContext("2d");
c.fillStyle = c.createRadialGradient(global.level.aura,global.level.aura,global.level.aura,global.level.aura,global.level.aura,global.level.aura / 2);
c.fillStyle.addColorStop(1,'rgba(0,0,0,0)');
c.fillStyle.addColorStop(0,'rgba(0,0,0,1)');
c.fillRect(0,0,global.rgradient.width,global.rgradient.height);
global.lgradient.width = self.innerWidth;
global.lgradient.height = self.innerHeight;
var gwidth = global.level.image.width * 0.05;
c = global.lgradient.getContext("2d");
c.fillStyle = c.createLinearGradient(global.level.x,0,global.level.x+gwidth,0);
c.fillStyle.addColorStop(0,"rgba(0,0,0,1)");
c.fillStyle.addColorStop(1,"rgba(0,0,0,0)");
c.fillRect(global.level.x-1,global.level.y,gwidth,global.level.height);
c.fillStyle = c.createLinearGradient(global.level.x+global.level.width-gwidth,0,global.level.x+global.level.width,0);
c.fillStyle.addColorStop(0,"rgba(0,0,0,0)");
c.fillStyle.addColorStop(1,"rgba(0,0,0,1)");
c.fillRect(global.level.x+global.level.width-gwidth+1,global.level.y,gwidth,global.level.height);
c.fillStyle = c.createLinearGradient(0,global.level.y,0,global.level.y+gwidth);
c.fillStyle.addColorStop(0,"rgba(0,0,0,1)");
c.fillStyle.addColorStop(1,"rgba(0,0,0,0)");
c.fillRect(global.level.x,global.level.y-1,global.level.width,global.level.y+gwidth);
c.fillStyle = c.createLinearGradient(0,global.level.y+global.level.height-gwidth,0,global.level.y+global.level.height);
c.fillStyle.addColorStop(1,"rgba(0,0,0,1)");
c.fillStyle.addColorStop(0,"rgba(0,0,0,0)");
c.fillRect(global.level.x,global.level.y+global.level.height-gwidth+1,global.level.width,gwidth);
}
function redraw(e) {
global.drawable.fillStyle = "#000";
global.drawable.fillRect(0,0,self.innerWidth,self.innerHeight);
global.drawable.save();
global.drawable.beginPath();
global.drawable.moveTo(e.clientX-global.level.aura,e.clientY);
global.drawable.lineWidth = 1;
global.drawable.arcTo(e.clientX,e.clientY + Math.PI * 21 * global.level.aura,e.clientX+global.level.aura,e.clientY,global.level.aura);
global.drawable.arcTo(e.clientX,e.clientY - Math.PI * 21 * global.level.aura,e.clientX-global.level.aura,e.clientY,global.level.aura);
global.drawable.closePath();
global.drawable.clip();
global.drawable.drawImage(global.level.image,global.level.x,global.level.y,global.level.width,global.level.height);
global.drawable.restore();
global.drawable.drawImage(global.rgradient,e.clientX - global.level.aura - 1,e.clientY - global.level.aura);
global.drawable.drawImage(global.lgradient,0,0,self.innerWidth,self.innerHeight);
global.mouseX = e.clientX;
global.mouseY = e.clientY;
}
function begin() {
scale();
window.addEventListener("resize",scale);
window.addEventListener("mousemove",redraw);
window.addEventListener("dblclick",clickHandler);
}
(function() {
var aura_modifier = 2;
global.levels =
[
new Level("https://www.dropbox.com/s/2fo8vgk946g74az/level0.jpg?dl=0",1738,431,28,aura_modifier),
new Level("https://www.dropbox.com/s/kob1xwk7mi6lgxg/level1.jpg?dl=0",1148,1152,28,aura_modifier),
new Level("https://www.dropbox.com/s/evzsih06h6ywk1o/level2.jpg?dl=0",1015,1153,29,aura_modifier),
new Level("https://www.dropbox.com/s/l9cs3u4jc7v3utg/level3.jpg?dl=0",314,1707,25,aura_modifier)
];
global.levelI = 0;
global.level = global.levels[global.levelI];
global.rgradient = document.createElement("canvas");
global.lgradient = document.createElement("canvas");
global.main = document.createElement("canvas");
global.main.height = self.innerHeight;
global.main.width = self.innerWidth;
global.main.style.top = 0;
global.main.style.left = 0;
global.main.style.position = "fixed";
global.main.style.cursor = "crosshair";
window.addEventListener("load",
function() {
document.body.appendChild(global.main);
global.drawable = global.main.getContext("2d");
global.level.callback = begin;
if(global.level.ready)
global.level.callback();
}
);
global.screen_width = self.innerWidth;
global.screen_height = self.innerHeight;
})();
window.addEventListener("contextmenu",function(e){e.preventDefault()});
function clickHandler(e) {
var diffX = e.clientX - global.level.waldoX;
var diffY = e.clientY - global.level.waldoY;
if(Math.sqrt(diffX * diffX + diffY * diffY) <= global.level.waldoR) {
window.removeEventListener("resize",scale);
window.removeEventListener("mousemove",redraw);
window.removeEventListener("dblclick",clickHandler);
global.drawable.fillStyle = "#FFEC8B";
global.drawable.fillRect(0,0,self.innerWidth,self.innerHeight);
alert("You find the Waldo! You can now continue the level " + ((global.levelI+=1)+1));
global.level = global.levels[global.levelI];
global.level.callback = begin;
if(global.level.ready)
global.level.callback();
global.drawable.fillStyle = "#000";
global.drawable.fillRect(0,0,self.innerWidth,self.innerHeight);
} else {
global.drawable.fillStyle = "#B0E2FF";
global.drawable.fillRect(0,0,self.innerWidth,self.innerHeight);
alert("Really?! That's your Waldo!");
global.drawable.fillStyle = "#000";
global.drawable.fillRect(0,0,self.innerWidth,self.innerHeight);
}
}
})();