-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsketch.js
121 lines (93 loc) · 13.2 KB
/
sketch.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
//mouse states and mouse events on sprites
//click and hold the mouse button while overing on the sprites
var frog1, frog2;
var sleep1, sleep2, thursday1, thursday2;
let count = 0;
let fontRegular;
var soundThursday, soundHayfork, soundCamp, soundFun;
function preload() {
soundFormats('mp3', 'ogg');
soundThursday = loadSound('assets/thursday.mp3');
soundHayfork = loadSound('assets/hayfork.mp3');
soundCamp = loadSound('assets/camp.mp3');
soundFun = loadSound('assets/fun.mp3');
fontRegular = loadFont('assets/AdobeClean-Bold.otf')
}
function setup() {
resetSketch();
}
function resetSketch() {
createCanvas(300, 400);
frameRate(15);
frog1 = createSprite(100, 200);
frog1.addAnimation('sleep1', 'assets/frog_5.png');
frog1.addAnimation('thursday1', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_7.png', 'assets/frog_7.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog1.addAnimation('hayfork1', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog1.addAnimation('camp1', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_7.png', 'assets/frog_7.png', 'assets/frog_7.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog1.addAnimation('fun1', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog2 = createSprite(200, 200);
frog2.addAnimation('sleep2', 'assets/frog_5.png');
frog2.addAnimation('thursday2', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_7.png', 'assets/frog_7.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog2.addAnimation('hayfork2', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_5.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_8.png', 'assets/frog_9.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog2.addAnimation('camp2', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_7.png', 'assets/frog_7.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
frog2.addAnimation('fun2', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_2.png', 'assets/frog_1.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_10.png', 'assets/frog_7.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png', 'assets/frog_6.png');
}
function draw() {
background(255, 255, 255);
textSize(12);
textAlign(CENTER);
fill(116, 126, 128);
textFont(fontRegular);
text('CLICK FROGS TO ASK A QUESTION', 150, 320);
text('(may only work on desktop)', 150, 335);
textSize(20);
text('FROGQUENTLY', 150, 65);
text('ASKED QUESTIONS', 150, 90);
drawSprites();
}
function mouseClicked() {
count++;
if (count == 1) {
soundThursday.play();
frog1.changeAnimation('thursday1');
frog2.changeAnimation('thursday2');
}
else if (count == 2) {
soundThursday.stop();
frog1.changeAnimation('sleep1');
frog2.changeAnimation('sleep2');
} else if (count == 3) {
soundHayfork.play();
frog1.changeAnimation('hayfork1');
frog2.changeAnimation('hayfork2');
}
else if (count == 4) {
soundHayfork.stop();
frog1.changeAnimation('sleep1');
frog2.changeAnimation('sleep2');
}
else if (count == 5) {
soundCamp.play();
frog1.changeAnimation('camp1');
frog2.changeAnimation('camp2');
}
else if (count == 6) {
soundCamp.stop();
frog1.changeAnimation('sleep1');
frog2.changeAnimation('sleep2');
}
else if (count == 7) {
soundFun.play();
frog1.changeAnimation('fun1');
frog2.changeAnimation('fun2');
}
else if (count == 8) {
soundFun.stop();
frog1.remove();
frog2.remove();
count = 0;
resetSketch();
frog1.changeAnimation('sleep1');
frog2.changeAnimation('sleep2');
}
}