-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (106 loc) · 4.57 KB
/
index.html
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
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./styles/main.css">
<script src="https://pixijs.download/release/pixi.min.js"></script>
</head>
<body>
<script type="module">
import { drawWorld } from "./world.js";
import { Submarine } from "./submarine.js";
import { initFishes, Fish } from "./fishes.js";
import { initBoats, Boat } from "./boats.js";
import { initKelp } from "./ground.js";
import { initClouds } from "./clouds.js";
import { initOilRigs } from "./platform.js";
import { initCollidable } from "./collidable.js";
import { Bullet, initBullets } from "./bullet.js";
import { doInterpolate, linspace } from "./splines/spline.js";
const n_points = 300
const deepness_scale = 80
function isInWater(x, y) {
let Xidx = Math.floor(x / 20);
let Yidx = Math.floor(y / 20);
return !(heightmap[Xidx] == undefined || -heightmap[Xidx] <= Yidx || y < 0);
}
window.isInWater = isInWater;
function findRandomPositionInWater() {
let x = Math.random() * heightmap.length * 20;
let y = Math.random() * deepness_scale * 20;
while (!isInWater(x, y)) {
x = Math.random() * heightmap.length * 20;
y = Math.random() * deepness_scale * 20;
}
return [x, y];
}
window.findRandomPositionInWater = findRandomPositionInWater;
const app = new PIXI.Application();
app.stage.interactive = true;
await app.init({ width: 1024, height: 720 });
const screen = new PIXI.Container();
screen.interactive = true;
screen.buttonMode = true;
screen.x = -900
app.renderer.background.color = 0x87CEEB; // Bleu ciel plus naturel
document.body.appendChild(app.canvas);
await PIXI.Assets.load('assets/ferris.svg');
await PIXI.Assets.load('assets/submarine.png');
let bullet_asset = await PIXI.Assets.load('assets/bullet.png');
let heightmap = [];
const ys = [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, -0, -1, -2, -2, -2, -2, -3, -3, -2, -4, -4, -5, -5, -5, -6, -6.1, -6, -5, -5.4, -5.2, -5., -4, -4, -4.1, -4.2, -4.3, -4.4, -4.5, -6, -6, -6.4, -6.8, -7.2, -7, -7, -8, -9, -9.5, -9.8, -11, -14, -14, -14, -14, -13, -13, -12, -12, -12, -11, -10, -9, -9, -8.5, -8.5, -8, -7.9, -7.7, -6.2, -6.4, -5.6, -5, -5, -4.8, -4, -4, -4, -4, -3.8, -3, -2, -2, -2, -1.8, -1, -0.5, -0.5, -0, -0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]
const min = 14
for (let i = 0; i < ys.length; i++) {
ys[i] /= min
}
const xs = linspace(-1, 1, ys.length)
let [pxs, pys] = doInterpolate(xs, ys, n_points);
for (let i = 0; i < pys.length; i++) {
heightmap.push(pys[i]*deepness_scale);
}
app.stage.addChild(screen);
drawWorld(screen, heightmap);
window.heightmap = heightmap;
initFishes(app, screen);
initBoats(app, screen);
initClouds(app, screen);
initOilRigs(app, screen);
initKelp(screen);
initCollidable(app);
await initBullets(app);
const keys = new Set();
// Add keyboard event listeners
window.addEventListener("keydown", (e) => {
keys.add(e.key);
});
window.addEventListener("keyup", (e) => {
keys.delete(e.key);
});
app.ticker.add(() => {
submarine.move(keys);
});
screen.onmousedown = (e) => {
let x = e.screen.x - app.screen.width/2;
let y = e.screen.y - app.screen.height/2;
submarine.fire(x, y);
};
let submarine_sprite = PIXI.Sprite.from('assets/submarine.png');
let submarine = new Submarine(app, screen, submarine_sprite, bullet_asset);
screen.addChild(submarine_sprite);
screen.hitArea = new PIXI.Rectangle(-heightmap.length*20, - app.screen.height*4, heightmap.length*20*2, app.screen.height*8);
const audio = new Audio('assets/bb-shark.mp3');
audio.loop = true; // Permet de jouer la musique en boucle
audio.volume = 0.5; // Ajustez le volume si nécessaire
audio.play().catch((error) => {
console.warn('L\'autoplay a été bloqué par le navigateur. L\'utilisateur doit interagir avec la page pour commencer la lecture.', error);
});
// Astuce pour les navigateurs modernes qui bloquent l'autoplay
document.body.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch((error) => {
console.warn('Lecture échouée après l\'interaction de l\'utilisateur.', error);
});
}
});
</script>
</body>
</html>