-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
114 lines (102 loc) · 2.52 KB
/
main.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
let gameStart = false;
let gamePause = false;
let game = null;
const renderStars = () => {
const stars = document.getElementById("stars");
stars.innerHTML = [...Array(100)]
.map((__) => {
return `<div
class="star"
style="
top: ${Math.random() * 100}%;
left: ${Math.random() * 100}%;
animation-delay: ${Math.random() * 1.5}s;
"
></div>`;
})
.join("");
};
const canvas = document.getElementById("gameGui");
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
const context = canvas.getContext("2d");
const pauseBtn = document.getElementById("pauseBtn");
const startBtn = document.getElementById("startBtn");
const resumeBtn = document.getElementById("resumeBtn");
const gameModal = document.getElementById("gameModal");
const gameModalMessage = document.getElementById("gameModalMessage");
const audio = document.getElementById("game-audio");
const onClickPause = () => {
if (!gameStart) return;
gameModalMessage.innerText = "pause";
gamePause = true;
setGameStart(false);
game.pauseGame();
};
pauseBtn.addEventListener("click", onClickPause);
const onClickStart = () => {
if (gameStart) return;
setGameStart(true);
game = new Game(context, (status) => {
setGameStart(false);
if (status.clear) {
gameModalMessage.innerText = "win!";
startBtn.innerText = "again?";
} else {
gameModalMessage.innerText = "lose...";
startBtn.innerText = "restart";
}
});
game.run();
};
startBtn.addEventListener("click", onClickStart);
const onClickResume = () => {
if (gameStart) return;
if (!gamePause) return;
gamePause = false;
setGameStart(true);
game.resumeGame();
};
resumeBtn.addEventListener("click", onClickResume);
const setGameStart = (gameStartState) => {
gameStart = gameStartState;
setAudioState();
renderModal();
renderPauseBtn();
renderStartBtn();
};
const setAudioState = () => {
if (gameStart) {
audio.play();
} else {
audio.pause();
}
};
const renderModal = () => {
if (!gameStart) {
gameModal.style.visibility = "visible";
} else {
gameModal.style.visibility = "hidden";
}
};
const renderPauseBtn = () => {
if (gamePause) {
resumeBtn.style.display = "block";
} else {
resumeBtn.style.display = "none";
}
};
const renderStartBtn = () => {
if (gamePause) {
startBtn.style.display = "none";
} else {
startBtn.style.display = "block";
}
};
const render = () => {
renderModal();
renderStartBtn();
renderPauseBtn();
};
renderStars();
render();