[READ-ONLY] Mirror of https://github.com/flo-bit/shadow-shmup. Fun and casual top-down, roguelike shoot 'em up browsergame with shadow elements and colorful neon effects
flo-bit.dev/shadow-shmup/
browsergame
pixijs
rapier2d
roguelike
shoot-em-up
typescript
webgame
make a bit more mobile friendly
+84
-8
+5
-3
index.html
+5
-3
index.html
···
1
1
<!doctype html>
2
-
<html lang="en" class="m-0">
2
+
<html lang="en" class="m-0 overflow-hidden overscroll-none">
3
3
<head>
4
4
<meta charset="UTF-8" />
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<meta name="apple-mobile-web-app-capable" content="yes">
7
+
6
8
<title>shadow shooter</title>
7
9
8
10
<script src="https://cdn.tailwindcss.com"></script>
9
11
</head>
10
-
<body class="m-0 bg-black">
12
+
<body class="m-0 bg-black overflow-hidden overscroll-none">
11
13
<script src="src/app.ts" type="module"></script>
12
14
13
15
<!-- ui: title, play button -->
14
16
<div
15
17
id="ui"
16
-
class="absolute inset-0 h-screen w-screen z-10 text-white flex items-center justify-between flex-col"
18
+
class="absolute inset-0 h-[100dhv] w-screen z-10 text-white flex items-center justify-between flex-col"
17
19
>
18
20
<div></div>
19
21
<div class="flex flex-col items-center">
+7
-1
src/app.ts
+7
-1
src/app.ts
···
15
15
import ProjectileManager, { ProjectileData } from './projectile-manager.js';
16
16
17
17
import { sound } from '@pixi/sound';
18
+
import Controls from './controls.js';
18
19
19
20
export default class Game {
20
21
container: PIXI.Container;
···
37
38
38
39
playing: boolean = false;
39
40
41
+
controls: Controls;
42
+
40
43
constructor() {
41
44
this.setup();
42
45
···
44
47
45
48
window.container = this.container;
46
49
window.game = this;
50
+
51
+
this.controls = new Controls();
47
52
48
53
sound.add('music-intro', {
49
54
url: '/shadow-shmup/music-intro.mp3'
···
251
256
252
257
this.projectileManager?.update(deltaTime);
253
258
254
-
if (this.playerManager?.players[0].health <= 0) {
259
+
let player = this.playerManager?.players[0];
260
+
if (player && player.health <= 0) {
255
261
this.enemyManager?.killAll();
256
262
this.projectileManager?.clearAllProjectiles();
257
263
+68
src/controls.ts
+68
src/controls.ts
···
1
+
export default class Controls {
2
+
keys: Record<string, boolean> = {};
3
+
4
+
constructor() {
5
+
window.addEventListener('keydown', (e) => {
6
+
this.keys[e.key.toLowerCase()] = true;
7
+
console.log(this.keys);
8
+
});
9
+
window.addEventListener('keyup', (e) => {
10
+
this.keys[e.key.toLowerCase()] = false;
11
+
});
12
+
13
+
window.addEventListener('blur', () => {
14
+
this.keys = {};
15
+
});
16
+
17
+
let startX: number | undefined, startY: number | undefined;
18
+
// mobile controls, if touch is moved at least 10 pixels in any direction, it will be considered
19
+
let min = 20;
20
+
window.addEventListener('touchstart', (e) => {
21
+
let touch = e.touches[0];
22
+
startX = touch.clientX;
23
+
startY = touch.clientY;
24
+
});
25
+
26
+
window.addEventListener('touchmove', (e) => {
27
+
let touch = e.touches[0];
28
+
if (startX === undefined || startY === undefined) return;
29
+
30
+
let dx = touch.clientX - startX;
31
+
let dy = touch.clientY - startY;
32
+
33
+
if (Math.abs(dx) > min) {
34
+
this.keys[dx > 0 ? 'd' : 'a'] = true;
35
+
} else {
36
+
this.keys['d'] = false;
37
+
this.keys['a'] = false;
38
+
}
39
+
40
+
if (Math.abs(dy) > min) {
41
+
this.keys[dy > 0 ? 's' : 'w'] = true;
42
+
} else {
43
+
this.keys['s'] = false;
44
+
this.keys['w'] = false;
45
+
}
46
+
});
47
+
48
+
window.addEventListener('touchend', (e) => {
49
+
this.keys['w'] = false;
50
+
this.keys['a'] = false;
51
+
this.keys['s'] = false;
52
+
this.keys['d'] = false;
53
+
});
54
+
}
55
+
56
+
get left() {
57
+
return this.keys['a'] || this.keys['arrowleft'];
58
+
}
59
+
get right() {
60
+
return this.keys['d'] || this.keys['arrowright'];
61
+
}
62
+
get up() {
63
+
return this.keys['w'] || this.keys['arrowup'];
64
+
}
65
+
get down() {
66
+
return this.keys['s'] || this.keys['arrowdown'];
67
+
}
68
+
}
+4
-4
src/player.ts
+4
-4
src/player.ts
···
165
165
if (this.game.playing) {
166
166
let dx = 0,
167
167
dy = 0;
168
-
if (keys['w']) dy -= 1;
169
-
if (keys['s']) dy += 1;
170
-
if (keys['a']) dx -= 1;
171
-
if (keys['d']) dx += 1;
168
+
if (this.game.controls.up) dy -= 1;
169
+
if (this.game.controls.down) dy += 1;
170
+
if (this.game.controls.left) dx -= 1;
171
+
if (this.game.controls.right) dx += 1;
172
172
173
173
// Normalize diagonal movement
174
174
if (dx !== 0 && dy !== 0) {