Skip to content

Commit 1917a81

Browse files
softvarsoftvar
committed
add info splash screen, minor bugfixes
1 parent f6dd7f7 commit 1917a81

File tree

1 file changed

+125
-54
lines changed

1 file changed

+125
-54
lines changed

‎src/menu.js‎

Lines changed: 125 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -76,57 +76,50 @@ Menu.prototype = {
7676
ctx.fillText(secondText, (w - m2.width) / 2, h / 3.5);
7777
ctx.lineWidth = 10;
7878

79-
var highestScoreText = 'BEST:' + G.highscore;
80-
highestScoreText = highestScoreText.split('').join(' ');
81-
ctx.fillStyle = '#fff';
82-
ctx.font = '35px Impact';
83-
ctx.fillText(highestScoreText, (w - ctx.measureText(highestScoreText).width) / 2, h / 2.1);
84-
85-
if (G.isGameOver) {
79+
if (!G.isInfoMenu) {
80+
var highestScoreText = 'BEST: ' + G.highscore;
81+
highestScoreText = highestScoreText.split('').join(' ');
8682
ctx.fillStyle = '#fff';
8783
ctx.font = '35px Impact';
88-
var karmaText = 'KARMA:' + G.karma;
89-
karmaText = karmaText.split('').join(' ');
90-
91-
ctx.fillText(karmaText, (w - ctx.measureText(karmaText).width) / 2, h / 2.5);
92-
ctx.lineWidth = 10;
84+
ctx.fillText(highestScoreText, (w - ctx.measureText(highestScoreText).width) / 2, h / 2.1);
9385

86+
// Sound circle
9487
ctx.beginPath();
95-
ctx.arc(w*(2/3), h/1.2, 30, 0, 2 * Math.PI, false);
88+
ctx.arc(w*(1/4), h/1.2, 30, 0, 2 * Math.PI, false);
9689
ctx.fillStyle = '#555';
9790
ctx.closePath();
9891
ctx.fill();
9992

93+
// Rules / Instructions circle
10094
ctx.beginPath();
101-
ctx.arc(w*(1/3), h/1.2, 30, 0, 2 * Math.PI, false);
95+
ctx.arc(w*(3/4), h/1.2, 30, 0, 2 * Math.PI, false);
10296
ctx.fillStyle = '#555';
10397
ctx.closePath();
10498
ctx.fill();
10599

106100
// sound icon
107101
ctx.beginPath();
108-
ctx.moveTo(w*(1/3) - 20, h/1.2 - 10);
109-
ctx.lineTo(w*(1/3) - 20, h/1.2 + 5);
110-
ctx.lineTo(w*(1/3) - 10, h/1.2 + 5);
111-
ctx.lineTo(w*(1/3) + 5, h/1.2 + 15);
112-
ctx.lineTo(w*(1/3) + 5, h/1.2 - 20);
113-
ctx.lineTo(w*(1/3) - 10, h/1.2 - 10);
102+
ctx.moveTo(w*(1/4) - 20, h/1.2 - 10);
103+
ctx.lineTo(w*(1/4) - 20, h/1.2 + 5);
104+
ctx.lineTo(w*(1/4) - 10, h/1.2 + 5);
105+
ctx.lineTo(w*(1/4) + 5, h/1.2 + 15);
106+
ctx.lineTo(w*(1/4) + 5, h/1.2 - 20);
107+
ctx.lineTo(w*(1/4) - 10, h/1.2 - 10);
114108
ctx.fillStyle = '#222';
115109
ctx.closePath();
116-
117110
if (G.isSound) {
118-
ctx.fillRect(w*(1/3) + 10, h/1.2 - 5, 3, 10);
119-
ctx.fillRect(w*(1/3) + 15, h/1.2 - 7, 3, 15);
120-
ctx.fillRect(w*(1/3) + 20, h/1.2 - 10, 3, 20);
111+
ctx.fillRect(w*(1/4) + 10, h/1.2 - 5, 3, 10);
112+
ctx.fillRect(w*(1/4) + 15, h/1.2 - 7, 3, 15);
113+
ctx.fillRect(w*(1/4) + 20, h/1.2 - 10, 3, 20);
121114
}
122115
ctx.fill();
123116

124-
// if no sound
117+
// if no sound, show / on icon
125118
if (!G.isSound) {
126119
ctx.save();
127120
ctx.beginPath();
128-
ctx.moveTo(w*(1/3) + 10, h/1.2 - 22);
129-
ctx.lineTo(w*(1/3) - 10, h/1.2 + 22);
121+
ctx.moveTo(w*(1/4) + 10, h/1.2 - 22);
122+
ctx.lineTo(w*(1/4) - 10, h/1.2 + 22);
130123
ctx.closePath();
131124
ctx.fill();
132125
ctx.lineWidth = 5;
@@ -135,38 +128,105 @@ Menu.prototype = {
135128
ctx.restore();
136129
}
137130

138-
// download icon
131+
// instructions icon
132+
ctx.fillRect(w*(3/4) - 2, h/1.2, 5, 15);
139133
ctx.beginPath();
140-
ctx.moveTo(w*(2/3) - 10, h/1.2 - 15);
141-
ctx.lineTo(w*(2/3) - 10, h/1.2 - 15 + 15);
142-
ctx.lineTo(w*(2/3) - 20, h/1.2 - 15 + 15);
134+
ctx.arc(w*(3/4), h/1.2 - 10, 5, 0, 2 * Math.PI, false);
135+
ctx.closePath();
136+
ctx.fillStyle = '#222';
137+
ctx.fill();
143138

144-
ctx.lineTo(w*(2/3), h/1.2 - 15 + 30);
145-
ctx.lineTo(w*(2/3) + 20, h/1.2 - 15 + 15);
139+
if (G.isGameOver) {
140+
ctx.fillStyle = '#fff';
141+
ctx.font = '35px Impact';
142+
var karmaText = 'KARMA: ' + G.karma;
143+
karmaText = karmaText.split('').join(' ');
146144

147-
ctx.lineTo(w*(2/3) + 10, h/1.2 - 15 + 15);
148-
ctx.lineTo(w*(2/3) + 10, h/1.2 - 15);
145+
ctx.fillText(karmaText, (w - ctx.measureText(karmaText).width) / 2, h / 2.5);
146+
ctx.lineWidth = 10;
149147

150-
ctx.fillStyle = '#222';
148+
ctx.beginPath();
149+
ctx.arc(w*(2/4), h/1.2, 30, 0, 2 * Math.PI, false);
150+
ctx.fillStyle = '#555';
151+
ctx.closePath();
152+
ctx.fill();
153+
154+
// download icon
155+
ctx.beginPath();
156+
ctx.moveTo(w*(2/4) - 10, h/1.2 - 15);
157+
ctx.lineTo(w*(2/4) - 10, h/1.2 - 15 + 15);
158+
ctx.lineTo(w*(2/4) - 20, h/1.2 - 15 + 15);
159+
160+
ctx.lineTo(w*(2/4), h/1.2 - 15 + 35);
161+
ctx.lineTo(w*(2/4) + 20, h/1.2 - 15 + 15);
162+
163+
ctx.lineTo(w*(2/4) + 10, h/1.2 - 15 + 15);
164+
ctx.lineTo(w*(2/4) + 10, h/1.2 - 15);
165+
166+
ctx.fillStyle = '#222';
167+
ctx.closePath();
168+
ctx.fill();
169+
}
170+
171+
// Play button
172+
ctx.beginPath();
173+
ctx.arc(w/2, h/1.6, 50, 0, 2 * Math.PI, false);
174+
ctx.fillStyle = '#793f02';
175+
ctx.closePath();
176+
ctx.fill();
177+
178+
var tw = 20, th = h/1.6 - tw;
179+
ctx.beginPath();
180+
ctx.moveTo(w/2 - tw/2, th);
181+
ctx.lineTo(w/2 + tw, th + 20);
182+
ctx.lineTo(w/2 - tw/2, th + 40);
183+
ctx.fillStyle = '#fff';
184+
ctx.closePath();
185+
ctx.fill();
186+
} else {
187+
// back button
188+
ctx.beginPath();
189+
ctx.arc(w/10, h/4.4, 30, 0, 2 * Math.PI, false);
190+
ctx.fillStyle = '#555';
151191
ctx.closePath();
152192
ctx.fill();
153-
}
154193

155-
// Play button
156-
ctx.beginPath();
157-
ctx.arc(w/2, h/1.6, 50, 0, 2 * Math.PI, false);
158-
ctx.fillStyle = '#793f02';
159-
ctx.closePath();
160-
ctx.fill();
161-
162-
var tw = 20, th = h/1.6 - tw;
163-
ctx.beginPath();
164-
ctx.moveTo(w/2 - tw/2, th);
165-
ctx.lineTo(w/2 + tw, th + 20);
166-
ctx.lineTo(w/2 - tw/2, th + 40);
167-
ctx.fillStyle = '#fff';
168-
ctx.closePath();
169-
ctx.fill();
194+
ctx.beginPath();
195+
ctx.moveTo(w/10, h/4.4-5);
196+
ctx.lineTo(w/10, h/4.4-5 - 10);
197+
ctx.lineTo(w/10 - 20, h/4.4-5 + 5);
198+
ctx.lineTo(w/10, h/4.4-5 + 20);
199+
ctx.lineTo(w/10, h/4.4-5 + 10);
200+
ctx.lineTo(w/10 + 20, h/4.4-5 + 10);
201+
ctx.lineTo(w/10 + 20, h/4.4-5);
202+
ctx.closePath();
203+
ctx.fillStyle = '#000';
204+
ctx.fill();
205+
206+
// show info
207+
var instructionLines = [
208+
'Save our planet Earth!',
209+
'Protect Forest! Don\'t burn them!',
210+
'Abrupt climatic changes. Time to worry!',
211+
'Extinguish fire on trees.',
212+
'Hit spacebar or tap to jump player.',
213+
'Earn Karma! Nature will show her love!',
214+
'JS13KGames 16 - hidden glitches',
215+
'Climate, Chipko movement(player stuck on tree)'
216+
];
217+
ctx.font = '20px Helvetica';
218+
ctx.fillStyle = '#fff';
219+
for (var l = 0; l < instructionLines.length; l++) {
220+
var line = instructionLines[l];
221+
if (l % 2 === 0) {
222+
ctx.beginPath();
223+
ctx.arc(w / 10, h/2.5 + l*50, 10, 0, 2*Math.PI, false);
224+
ctx.fill();
225+
ctx.closePath();
226+
}
227+
ctx.fillText(line, w/10 + 50, h/2.5 + l*50);
228+
}
229+
}
170230
rs();
171231
return canvas;
172232
},
@@ -212,16 +272,27 @@ Menu.prototype = {
212272
// play btn clicked
213273
G.menu = null;
214274
G.restart();
215-
} else if (x >= w*(2/3) - 30 && x <= w*(2/3) + 30 &&
275+
} else if (x >= w*(2/4) - 30 && x <= w*(2/4) + 30 &&
216276
y >= h/1.2 - 30 && y <= h/1.2 + 30) {
217277
// download clicked
218278
downloadCanvas();
219-
} else if (x >= w*(1/3) - 30 && x <= w*(1/3) + 30 &&
279+
} else if (x >= w*(1/4) - 30 && x <= w*(1/4) + 30 &&
220280
y >= h/1.2 - 30 && y <= h/1.2 + 30) {
221281
// sound clicked
282+
!G.isSound && SU.play('moveAhead');
222283
G.isSound = +(!G.isSound);
223284
utils.setLocalStorageData(G.isSound, true);
224285
MN.heat = MN.getHeatMap();
286+
} else if (x >= w*(3/4) - 30 && x <= w*(3/4) + 30 &&
287+
y >= h/1.2 - 30 && y <= h/1.2 + 30) {
288+
// info clicked
289+
G.isInfoMenu = true;
290+
MN.heat = MN.getHeatMap();
291+
} else if (x >= w*(1/10) - 30 && x <= w*(1/10) + 30 &&
292+
y >= h/4.4 - 30 && y <= h/4.4 + 30) {
293+
// info clicked
294+
G.isInfoMenu = false;
295+
MN.heat = MN.getHeatMap();
225296
}
226297
},
227298
update: function () {

0 commit comments

Comments
 (0)