Up-in-the-Air – commitdiff
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f7029b9)
raw | patch | inline | side by side (parent: f7029b9)
| author | Julian Fietkau <git@fietkau.software> | |
| Sun, 22 Sep 2024 22:51:40 +0000 (00:51 +0200) | ||
| committer | Julian Fietkau <git@fietkau.software> | |
| Sun, 22 Sep 2024 22:51:40 +0000 (00:51 +0200) |
| index.html | patch | blob | history | |
| main.js | patch | blob | history |
diff --git a/index.html b/index.html
index 0589ebe661b01c80e0f4bcb2b0f58c0f2c981314..e1d0b74cc415b5334c7d92c752f6a43c1095b4b5 100644 (file)
--- a/index.html
+++ b/index.html
color: #c50031;
text-decoration: none;
}
- .ui-page .area a {
- color: #d53c59;
- }
.ui-page a:hover {
text-decoration: underline;
}
font-size: 1.4em;
font-weight: bold;
}
+ .ui-page .area a {
+ color: #d53c59;
+ }
.ui-page .area p {
margin: 0;
padding: 0;
line-height: 1em;
font-family: Cookie;
}
+ .ui-page.options select {
+ font-family: 'Jersey 10';
+ font-size: 1em;
+ }
.ui-page.outro {
padding: 1em;
display: flex;
line-height: 1em;
font-family: Cookie;
}
+ .ui-page.pause {
+ background: #000b;
+ padding: 1em;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1em;
+ }
+ .ui-page.pause h2 {
+ color: #fff;
+ }
+ .ui-page.pause button {
+ width: 8em;
+ padding: .45em .6em;
+ font-size: 2.5em;
+ line-height: 1em;
+ font-family: Cookie;
+ }
+ .ui-page.pause button.small {
+ width: 5em;
+ padding: .45em .6em;
+ font-size: 1.6em;
+ }
.ui-page.gameplay, .ui-page.openingcutscene, .ui-page.endingcutscene {
cursor: none;
}
<div class="ui-page outro">
<button class="goto title">Return to Title Screen</button>
</div>
+<div class="ui-page pause">
+<h2>Game Paused</h2>
+<button class="goto gameplay">Continue</button>
+<button class="goto title small">Exit</button>
+</div>
<div class="ui-page gameplay">
<canvas width="800" height="800"></canvas>
<div class="options" style="display: none">
index 8b9601f5e9968c1f665e137cbc5043e73f4795db..8ec743e655f04aeb250cbf17ad2d8b716914852d 100644 (file)
--- a/main.js
+++ b/main.js
game.objects.feather.speed.add(vector);
}
-function start(game) {
-}
-
function init(game, canvas) {
game.timeProgress = 0;
);
game.view.camera.position.set(-5, -game.courseRadius, game.view.camera.position.z);
+ game.view.scene = scene;
function pinwheelPositionUpdate(game, viewportX, viewportY) {
const vFOV = THREE.MathUtils.degToRad(game.view.camera.fov);
renderer.setAnimationLoop(() => { animate(game, renderer, scene); });
}
+function reset(game) {
+ game.ui.reachedEnd = false;
+ for(let i = 0; i < 6; i++) {
+ game.view.materials['cloud' + i].uniforms.lerp.value = 0.0;
+ }
+ game.view.scene.add(game.objects.startingWindowsill);
+ game.view.scene.remove(game.objects.endingWindowsill);
+ game.objects.feather.position.set(-11.45, -game.courseRadius - 4.2, -6.6);
+ game.objects.feather.rotation.set(Math.PI, 0, Math.PI / 2.1);
+ game.objects.pinwheel.material[4].opacity = 0.0;
+ game.objects.words.collectedCount = 0;
+ for(let word of game.objects.words) {
+ word.collected = null;
+ }
+ game.ui.root.querySelector('.ui-page.title').classList.remove('end');
+}
+
function animate(game, renderer, scene) {
if(!('startTime' in game)) {
game.startTime = game.view.clock.getElapsedTime();
}
+ if(game.ui.currentPage == 'pause') {
+ return;
+ }
let delta = Math.min(game.view.clock.getDeltaTime(), 1 / 12);
game.timeProgress = (game.timeProgress + delta);
}
} else if(game.ui.currentPage == 'openingcutscene') {
if(game.ui.reachedEnd) {
- game.ui.reachedEnd = false;
- for(let i = 0; i < 6; i++) {
- game.view.materials['cloud' + i].uniforms.lerp.value = 0.0;
- }
- scene.add(game.objects.startingWindowsill);
- scene.remove(game.objects.endingWindowsill);
- game.objects.feather.position.set(cameraX - 6.45, -game.courseRadius - 4.2, -6.6);
- game.objects.feather.rotation.set(Math.PI, 0, Math.PI / 2.1);
- game.objects.words.collectedCount = 0;
- for(let word of game.objects.words) {
- word.collected = null;
- }
- game.ui.root.querySelector('.ui-page.title').classList.remove('end');
+ reset(game);
}
cameraSwayFactor = 1 - (game.timeProgress / 8);
cameraX = -5 + Math.pow(Math.max(0, game.timeProgress - 3) / 5, 1.6) * 5;
game.objects.pinwheel.material[4].opacity = easeInOut(Math.max(0, (game.timeProgress - 7)));
if(game.timeProgress >= 8) {
game.ui.moveToPage('gameplay', true);
- start(game);
}
} else if(game.ui.currentPage == 'endingcutscene') {
cameraSwayFactor = game.timeProgress / 8;
if(game.timeProgress / game.timeTotal >= 1.0) {
game.ui.reachedEnd = true;
game.ui.moveToPage('endingcutscene', true);
- start(game);
}
const angle = 2 * Math.PI * (game.timeProgress / game.timeTotal);
targetElem.style.opacity = '1';
}, fadeDuration, targetElem);
}
+ if(target != 'pause' && game.ui.currentPage != 'pause') {
+ game.timeProgress = 0;
+ }
game.ui.currentPage = target;
- game.timeProgress = 0;
if(game.view) {
game.startTime = game.view.clock.getElapsedTime();
}
window.addEventListener('resize', () => {
game.ui.root.style.fontSize = (game.ui.root.clientWidth / 50) + 'px';
});
+window.addEventListener('blur', () => {
+ if(game.ui.currentPage == 'gameplay') {
+ game.ui.moveToPage('pause', true);
+ }
+});
+document.addEventListener('keydown', (e) => {
+ if(e.key == 'Escape') {
+ if(game.ui.currentPage == 'gameplay') {
+ game.ui.moveToPage('pause', true);
+ } else if(game.ui.currentPage == 'pause') {
+ game.ui.moveToPage('gameplay', true);
+ }
+ }
+});
+game.ui.root.querySelector('.ui-page.pause button.title').addEventListener('click', () => {
+ reset(game);
+});
loadAllAssets(game, (progress) => {
let percentage = Math.floor(100 * progress);
game.ui.root.querySelector('.ui-page.loading progress').value = percentage;