Skip to content

Commit 5cd6658

Browse files
author
Eoin McGrath
committed
adds loading screen, title music and lives
1 parent bd280e6 commit 5cd6658

22 files changed

+435
-37
lines changed

‎a/gecko.gif

0 Bytes
Loading

‎a/loader.gif

11.6 KB
Loading

‎game.zip

12.5 KB
Binary file not shown.

‎index.html

+50-5
Large diffs are not rendered by default.

‎promo/arcadia/gamecarousel-320x380.png

134 KB
Loading

‎promo/arcadia/gamepage-1060x644.png

656 KB
Loading

‎promo/arcadia/gametile-320x320.png

127 KB
Loading

‎public/game.js

+152-10
Large diffs are not rendered by default.

‎public/index.html

+49-4
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,22 @@
99
/>
1010
<style type="text/css">
1111
body,
12-
html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
12+
html {
13+
width: 100%;
14+
height: 100%;
15+
margin: 0; padding: 0; overflow: hidden; }
1316
canvas.fullscreen { position: absolute; margin: 0; }
1417
canvas { position: absolute; left: 50%; top: 50%; }
15-
h1 { left: 0; line-height: 200px; margin-left: 25%; margin-top: -100px; position: absolute; top: 50%; text-align: center; width: 50%; }
16-
#l { color: #fff; font-size: 150%; }
18+
h1 {
19+
margin-left: 15vw;
20+
padding: 2rem 0;
21+
position: absolute;
22+
top: 15vh;
23+
height: 30vw;
24+
width: 70vw; background: #000;
25+
padding-left: 1rem;
26+
color: #fff;
27+
}
1728
body {
1829
margin: 0;
1930
padding: 0;
@@ -23,6 +34,7 @@
2334
-webkit-user-select: none;
2435
-moz-user-select: none;
2536
user-select: none; }
37+
body.loading { background: blue; }
2638
canvas#c {
2739
background: #000;
2840
margin: 0 auto;
@@ -41,10 +53,43 @@
4153
60% { transform: translate(-6px, 3px) rotate(0deg); }
4254
80% { transform: translate(-6px, -3px) rotate(1deg); }
4355
100% { transform: translate(3px, -5px) rotate(-1deg); } }
56+
57+
.loading {
58+
background-color:blue;
59+
color:yellow;
60+
height:100vh;
61+
overflow:hidden;
62+
position:relative;
63+
}
64+
65+
.loading:before {
66+
background-image:repeating-linear-gradient(
67+
transparent,
68+
transparent 3vh,
69+
yellow 1vh,
70+
yellow 4vh
71+
);
72+
content:"";
73+
height:200%;
74+
left:0;
75+
position:absolute;
76+
top:-100%;
77+
width:100vw;
78+
}
79+
80+
.loading:before {
81+
animation:downwards 8s ease-in infinite;
82+
}
83+
84+
@keyframes downwards {
85+
0% { transform:translate(0); }
86+
100% { transform:translate(0, 100vh) scale(2.5); }
87+
}
88+
4489
</style>
4590
</head>
4691
<body>
47-
<div id="l"><h1 id="h">Loading</h1></div>
92+
<div id="l"><h1 id="h">loading...</h1></div>
4893
<canvas id="c" width="320" height="480"></canvas>
4994
<script src="./game.js"></script>
5095
</body>

‎public/t.mp3

8.22 KB
Binary file not shown.

‎src/engine/game.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export default class Game {
6565
this.c = document.querySelector('#c');
6666
this.input = new Input(this.c, this);
6767
document.title = this.o.title;
68+
document.body.classList.add('loading');
6869

6970
// this.stats = new Stats();
7071
// this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
@@ -73,21 +74,23 @@ export default class Game {
7374
loader.start().then((imgs) => {
7475
this.imgs = imgs;
7576
window.setTimeout(() => {
76-
this.c.classList.add("active");
77+
this.c.classList.add('active');
7778
this.draw = new Draw(this.o.w, this.o.h, this.o.pal);
7879
this.scene = new this.scenes[this.sceneName](this);
7980
this.scaleUp('dot', [0, 2, 3, 8, 11]);
8081
this.scaleUp('circle', [0, 2, 3, 8, 11]);
8182
this.scaleUp('bridge');
8283
this.scaleUp('spark', [0, 2, 3, 8, 11]);
84+
document.body.classList.remove('loading');
8385
Setup(this);
8486

8587
this.track1 = new P8(this.p8S, this.p8M);
88+
this.track2 = new P8(this.p8S2, this.p8M2);
8689
this.favIcon(this.draw.resize(this.imgs.gecko, 8));
8790
document.querySelector('#l').style.display = 'none';
8891
this.c.style.display = "block";
8992
this.loop();
90-
}, 400);
93+
}, 2000);
9194
});
9295
}
9396

‎src/game/data/base.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Sfx from './sfx';
33

44
export default {
55
title: 'Gecko Blaster',
6-
start: 'Title',
6+
start: 'Loader',
77
w: 270,
88
h: 480,
99
pal: [ // AndroidArts16 - https://androidarts.com/palette/16pal.htm

‎src/game/data/images.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/game/data/sfx.js

+1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ export default {
99
// win: [1.06,,299,,.3,.23,,.04,-2.6,4.3,,,.19,,,,,.74,.17,.4],
1010
// tap: [1,, 0.1953,, 0.1186, 0.2659,,,,,,,,,,,,, 1,,, 0.1,, 0.5],
1111
powerup: [1.1,,698,.07,.23,.25,,1.5,,,103,.07,.09,,,.1,,.5,.22,.39],
12+
hurt: [,,448,.01,.1,.3,3,.39,-0.5,,,,,,.2,.1,.08],
1213
boss: [1.04,,612,.01,.17,.41,,.3,,,,,.17,,,.2,,.62,.25,.27],
1314
}

‎src/game/ents/p1.js

+25-2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export default class P1 extends Sprite {
2323
this.shotDelay = 50;
2424

2525
this.powerups = 0;
26+
this.lives = 2;
27+
this.hurtTimeMaster = 250;
2628

2729
this.minX = 0;
2830
this.maxX = this.g.w - this.w;
@@ -90,11 +92,15 @@ export default class P1 extends Sprite {
9092
}
9193

9294
this.shotDelay--;
95+
console.log(this.hurt);
9396

9497
}
9598

9699
render() {
97100
this.g.draw.img(this.shadow, this.x + 6, this.y + 12);
101+
if (this.hurt) {
102+
this.g.draw.ctx.globalAlpha = this.g.fader > 0 ? 0.25 : 0.5;
103+
}
98104
this.g.draw.img(this.imgs[`${this.dir}${this.frame}`], this.x, this.y + 6);
99105
let last = { x: this.x, y: this.y }
100106
let r = 8;
@@ -109,6 +115,7 @@ export default class P1 extends Sprite {
109115
last = t;
110116
this.tailxOff += this.tailxDir;
111117
})
118+
this.g.draw.ctx.globalAlpha = 1;
112119
}
113120

114121
receiveDamage(o) {
@@ -119,6 +126,20 @@ export default class P1 extends Sprite {
119126

120127

121128
kill(booms = 3) {
129+
130+
if (this.hurt) return;
131+
this.lives -= 1;
132+
this.hurt = true;
133+
this.hurtTime = this.hurtTimeMaster;
134+
135+
if (this.lives >= 0) {
136+
console.log('NOT DEAD YET!');
137+
this.g.shake();
138+
this.g.spawn("Boom", { x: this.x, y: this.y, key: "boom" });
139+
this.g.sfx('hurt');
140+
return;
141+
}
142+
122143
const x = this.x,
123144
y = this.y,
124145
w = this.w / 2;
@@ -141,8 +162,10 @@ export default class P1 extends Sprite {
141162

142163
fall() {
143164
this.kill(0);
144-
this.g.sfx('fall');
145-
this.p.initGameOver();
165+
if (this.lives < 0) {
166+
this.g.sfx('fall');
167+
this.p.initGameOver();
168+
}
146169
}
147170

148171
shoot() {

‎src/game/ents/spider.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Baddie from "./baddie";
22

33
export default class Spider extends Baddie {
44
constructor(g, o) {
5-
o.x = g.H.rndArray([0, g.w]);
5+
o.x = o.p.p1.x > g.w / 2 ? 0 : g.w;
66
o.i = 'spider';
77
o.frames = 2;
88
o.scale = 3;

‎src/game/scenes/loader.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
export default class Loader {
2+
constructor(g) {
3+
this.g = g;
4+
5+
this.f = g.H.mkFont(g, 5, 2);
6+
7+
this.bg = g.draw.resize(g.imgs['loader'], 2);
8+
9+
g.addEvent({
10+
t: 100,
11+
cb: () => {
12+
this.ready = true;
13+
}
14+
})
15+
16+
this.loaded = 0;
17+
this.incrementLoad();
18+
}
19+
20+
update(dt) {
21+
this.g.ents.forEach((e) => {
22+
e.update(dt);
23+
});
24+
25+
if (~~this.titleAlpha < 1) {
26+
this.titleAlpha += this.titleAlphaInc;
27+
if (~~this.titleAlpha === 1) {
28+
// this.g.shake();
29+
}
30+
}
31+
32+
if (this.g.input.firstTouch && this.ready) {
33+
this.g.changeScene('Title');
34+
}
35+
36+
}
37+
38+
render() {
39+
const g = this.g;
40+
g.draw.img(this.bg, 0, 0);
41+
42+
if (this.ready && this.g.fader > 0) {
43+
g.draw.text(g.mobile ? 'TAP ME' : 'CLICK ME',
44+
this.f, false, 200);
45+
}
46+
47+
48+
49+
g.ents.forEach((e) => {
50+
e.render();
51+
});
52+
53+
for (let n = 0; n <= 10; n += 1) {
54+
g.draw.rect(0, 48 * n, g.w, 48 - this.loaded, 0);
55+
}
56+
57+
if (!g.mobile) {
58+
g.draw.img(g.imgs['pointer'], g.input.mx, g.input.my);
59+
}
60+
61+
}
62+
63+
incrementLoad() {
64+
if (this.loaded >= 48) { return; }
65+
66+
this.g.addEvent({
67+
t: 1,
68+
cb: () => {
69+
this.loaded += 1;
70+
this.incrementLoad();
71+
}
72+
})
73+
}
74+
75+
spawnStartButton() {
76+
this.g.spawn('Button', {
77+
y: this.g.h - 90,
78+
clickCol: 11,
79+
col: 4,
80+
text: 'START',
81+
cb: () => {
82+
this.g.changeScene('Title');
83+
}
84+
});
85+
}
86+
87+
}
88+
89+

‎src/game/scenes/play.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,6 @@ export default class Play {
2525
this.scoreFont = g.H.mkFont(g, 4, 2);
2626
this.gameOver = false;
2727

28-
// g.tune = g.zzfxM(...g.SONG);
29-
// g.audio = g.zzfxP(...g.tune);
30-
// g.audio.loop = true;
31-
32-
// this.M = new P8(g.p8S, g.p8M);
33-
// this.g.playing = this.M.music(0);
34-
3528
this.g.audio = this.g.track1.music(0);
3629

3730
window.P = this;
@@ -107,7 +100,11 @@ export default class Play {
107100
}
108101

109102
let score = Math.round(this.score);
110-
g.draw.text(g.H.pad(score), this.scoreFont, false, 20);
103+
g.draw.text(g.H.pad(score), this.scoreFont, 20, 20);
104+
105+
for (let n = 0; n < this.p1.lives; n += 1) {
106+
this.g.draw.img(this.g.imgs['heart'], 200 + (n * 30), 20);
107+
}
111108

112109
if (this.gameOver && !this.g.mobile) {
113110
this.g.draw.img(this.g.imgs['pointer'], this.g.input.mx, this.g.input.my);

‎src/game/scenes/test.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ export default class Test {
44

55
this.bgPos = 0;
66

7-
this.f = g.H.mkFont(g, 6, 2);
7+
this.f = g.H.mkFont(g, 5, 2);
88

9-
this.p1 = this.g.spawn('P1', {p: this});
109

1110
}
1211

@@ -31,6 +30,8 @@ export default class Test {
3130
e.render();
3231
});
3332

33+
g.draw.text('KILL BADDIES', this.f, false, 200);
34+
3435
}
3536
}
3637

‎src/game/scenes/title.js

+12
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ export default class Title {
1010

1111
this.bgPos = 0;
1212
this.bgSpeed = 0.25;
13+
g.voice.play();
1314

1415
g.spawn('Button', {
1516
y: this.g.h - 130,
1617
clickCol: 11,
1718
col: 4,
1819
text: 'PLAY',
1920
cb: () => {
21+
g.audio.stop();
2022
g.changeScene(g.plays === 0 ? 'Tut' : 'Play');
2123
}
2224
});
@@ -40,6 +42,16 @@ export default class Title {
4042
});
4143
this.bling();
4244

45+
g.voice.play();
46+
47+
48+
g.addEvent({
49+
t: 20,
50+
cb: () => {
51+
this.g.audio = this.g.track2.music(0);
52+
}
53+
})
54+
4355
}
4456

4557
update(dt) {

0 commit comments

Comments
 (0)