added scene transitions
This commit is contained in:
parent
686608ba9f
commit
6e5e9947a4
@ -60,8 +60,13 @@ class OverworldEvent {
|
||||
}
|
||||
|
||||
changeMap(resolve) {
|
||||
const sceneTransition = new SceneTransition();
|
||||
sceneTransition.init(document.querySelector(".game-container"), () => {
|
||||
this.map.overworld.startMap(window.OverworldMaps[this.event.map]);
|
||||
resolve();
|
||||
|
||||
sceneTransition.fadeOut();
|
||||
});
|
||||
}
|
||||
|
||||
init() {
|
||||
|
26
SceneTransition.js
Normal file
26
SceneTransition.js
Normal file
@ -0,0 +1,26 @@
|
||||
class SceneTransition {
|
||||
constructor() {
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
createElement() {
|
||||
this.element = document.createElement("div");
|
||||
this.element.classList.add("SceneTransition");
|
||||
}
|
||||
|
||||
fadeOut() {
|
||||
this.element.classList.add("fade-out");
|
||||
this.element.addEventListener("animationend", () => {
|
||||
this.element.remove();
|
||||
}, { once: true })
|
||||
}
|
||||
|
||||
init(container, callback) {
|
||||
this.createElement();
|
||||
container.appendChild(this.element);
|
||||
|
||||
this.element.addEventListener("animationend", () => {
|
||||
callback();
|
||||
}, { once: true });
|
||||
}
|
||||
}
|
@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles/global.css">
|
||||
<link rel="stylesheet" href="styles/TextMessage.css">
|
||||
<link rel="stylesheet" href="styles/SceneTransition.css">
|
||||
<title>witchday</title>
|
||||
</head>
|
||||
<body>
|
||||
@ -23,6 +24,7 @@
|
||||
<script src="/TextMessage.js"></script>
|
||||
<script src="/KeyPressListener.js"></script>
|
||||
<script src="/RevealingText.js"></script>
|
||||
<script src="/SceneTransition.js"></script>
|
||||
<script src="/init.js"></script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user