Skip to content

Commit d55d193

Browse files
nakomochinakomochi
committed
Merge branch 'main' into stage
2 parents fb3725b + 2095d5c commit d55d193

File tree

22 files changed

+546
-507
lines changed

22 files changed

+546
-507
lines changed

public/assets/thumbnaildev.png renamed to public/assets/thumbnail1-1.png

File renamed without changes.

‎public/assets/thumbnail1-2.png‎

381 KB
Loading

‎public/assets/thumbnail1-3.png‎

381 KB
Loading

‎routes/+page.svelte‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,62 @@
1-
<!-- <h1>Welcome!</h1>
2-
3-
<section>
4-
<h2>World 1</h2>
5-
<a href="/game?stage=1">Stage 1</a>
6-
<a href="/game?stage=2">Stage 2</a>
7-
<a href="/game?stage=3">Stage 3</a>
8-
<a href="/game?stage=4">Stage 4</a>
9-
<a href="/game?stage=5">Stage 5</a>
10-
<a href="/game?stage=6">Stage 6</a>
11-
<a href="/game?stage=7">Stage 7</a>
12-
<a href="/game?stage=8">Stage 8</a>
13-
</section>
14-
15-
<section>
16-
<h2>World 3</h2>
17-
<a href="/game?stage=3-1">Stage 1</a>
18-
<a href="/game?stage=3-2">Stage 2</a>
19-
<a href="/game?stage=3-3">Stage 3</a>
20-
<a href="/game?stage=3-4">Stage 4</a>
21-
</section>
22-
23-
<section>
24-
<h2>World 4</h2>
25-
<a href="/game?stage=4-1">Stage 1</a>
26-
<a href="/game?stage=4-2">Stage 2</a>
27-
</section>
28-
29-
<p>
30-
<a href="/stage-select">Stage-Select</a>
31-
</p> -->
32-
331
<script lang="ts">
34-
import { onDestroy } from "svelte";
2+
import { onDestroy, onMount } from "svelte";
3+
import "@/ui-components/menu/menu.css";
354
5+
onMount(() => {
6+
const userAgent = navigator.userAgent.toLowerCase();
7+
if (
8+
userAgent.includes("android") ||
9+
userAgent.match(/iphone|ipad|ipod/) ||
10+
(userAgent.includes("macintosh") && navigator.maxTouchPoints >= 1) /* recent iPad */
11+
) {
12+
window.alert("このゲームはPC用です。キーボードが接続されていない端末ではプレイできません。");
13+
}
14+
});
3615
onDestroy(() => {
3716
// document.body.style.backgroundColor = "black";
3817
});
18+
19+
let btn1: HTMLElement;
20+
let btn2: HTMLElement;
21+
function handleKeyDown(e: KeyboardEvent) {
22+
const buttons = [btn1, btn2];
23+
const currentIndex = buttons.indexOf(document.activeElement as HTMLElement);
24+
if (e.key === "ArrowUp") {
25+
if (currentIndex > 0) {
26+
buttons[currentIndex - 1].focus();
27+
} else {
28+
buttons[buttons.length - 1].focus();
29+
}
30+
e.preventDefault();
31+
} else if (e.key === "ArrowDown") {
32+
if (currentIndex < buttons.length - 1) {
33+
buttons[currentIndex + 1].focus();
34+
} else {
35+
buttons[0].focus();
36+
}
37+
e.preventDefault();
38+
} else if (e.key === " ") {
39+
(document.activeElement as HTMLElement)?.click?.();
40+
e.preventDefault();
41+
}
42+
}
43+
$effect(() => {
44+
document.addEventListener("keydown", handleKeyDown);
45+
return () => {
46+
document.removeEventListener("keydown", handleKeyDown);
47+
};
48+
});
3949
</script>
4050

4151
<div id="container" class="fixed inset-0">
42-
<div class="fixed inset-0 backdrop-blur-xs">
43-
<div class="flex flex-col gap-5 mt-30 m-10 p-5 bg-yellow-400/85 rounded-lg">
44-
<h1 class="text-center mt-6 mb-2">Shortcut Game</h1> <!--TODO: 題名-->
45-
<a class="btn modal-btn text-2xl" href="/game?stage=1"> Start </a>
46-
<a class="btn modal-btn text-2xl" href="/stage-select"> Stage Select </a>
52+
<div class="fixed inset-0 backdrop-blur-xs flex flex-col justify-center">
53+
<div class="flex flex-col gap-5 mb-20 m-10 p-5 bg-yellow-400/85 rounded-lg">
54+
<h1 class="text-center mt-6 mb-2">Shortcut Game</h1>
55+
<!--TODO: 題名-->
56+
<a class="btn modal-btn text-2xl" href="/game?stage=1-1" bind:this={btn1} tabindex="1"> Start from 1-1 </a>
57+
<a class="btn modal-btn text-2xl" href="/stage-select" bind:this={btn2} tabindex="2"> Stage Select </a>
4758
<p class="bg-white/90 p-2 rounded-lg">
48-
Move: &#x21E6; &#x21E8; or A D<br />
59+
Move: &#x21E6; &#x21E8; or A D<br />
4960
Jump: &#x21E7; or W or Space<br />
5061
Ability: Ctrl + ?
5162
</p>
@@ -56,10 +67,12 @@ onDestroy(() => {
5667
<style>
5768
#container {
5869
background-color: black;
59-
background-image: url('/assets/home.png'), url('/assets/home-block.png');
70+
background-image: url("/assets/home.png"), url("/assets/home-block.png");
6071
background-size: 100%, 100%;
6172
background-repeat: no-repeat, repeat-y;
62-
background-position: left top, left, top;
63-
backdrop-filter: blur(10px);
73+
background-position:
74+
left top,
75+
left,
76+
top;
6477
}
6578
</style>

‎routes/clear/+page.svelte‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<script>
2+
import { goto } from "$app/navigation";
3+
import { onMount } from "svelte";
4+
5+
let confetti = $state(false);
6+
7+
onMount(() => {
8+
// Simulate confetti animation
9+
setTimeout(() => {
10+
confetti = true;
11+
}, 100);
12+
});
13+
</script>
14+
15+
<main class="clear-screen">
16+
<div class="content">
17+
<h1 class="title">Congratulations!</h1>
18+
<h2 class="subtitle">You've completed the game!</h2>
19+
<div class="confetti">
20+
<div class="confetti-piece" style="--delay: 0s"></div>
21+
<div class="confetti-piece" style="--delay: 0.1s"></div>
22+
<div class="confetti-piece" style="--delay: 0.2s"></div>
23+
<div class="confetti-piece" style="--delay: 0.3s"></div>
24+
<div class="confetti-piece" style="--delay: 0.4s"></div>
25+
</div>
26+
<a class="restart-btn" href="/">
27+
Play Again
28+
</a>
29+
</div>
30+
</main>
31+
32+
<style>
33+
.clear-screen {
34+
width: 100vw;
35+
height: 100vh;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
40+
color: white;
41+
overflow: hidden;
42+
position: relative;
43+
}
44+
45+
.content {
46+
text-align: center;
47+
padding: 2rem;
48+
}
49+
50+
.title {
51+
font-size: 3rem;
52+
margin-bottom: 1rem;
53+
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
54+
}
55+
56+
.subtitle {
57+
font-size: 1.5rem;
58+
margin-bottom: 2rem;
59+
opacity: 0.9;
60+
}
61+
62+
.confetti {
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
width: 100%;
67+
height: 100%;
68+
pointer-events: none;
69+
}
70+
71+
.confetti-piece {
72+
position: absolute;
73+
width: 10px;
74+
height: 10px;
75+
background: white;
76+
border-radius: 50%;
77+
animation: fall 3s ease-in-out forwards;
78+
}
79+
80+
.confetti-piece:nth-child(1) { left: 10%; }
81+
.confetti-piece:nth-child(2) { left: 30%; }
82+
.confetti-piece:nth-child(3) { left: 50%; }
83+
.confetti-piece:nth-child(4) { left: 70%; }
84+
.confetti-piece:nth-child(5) { left: 90%; }
85+
86+
@keyframes fall {
87+
from {
88+
transform: translateY(-100vh) rotate(0deg);
89+
opacity: 0;
90+
}
91+
to {
92+
transform: translateY(100vh) rotate(360deg);
93+
opacity: 1;
94+
}
95+
}
96+
97+
.restart-btn {
98+
padding: 1rem 2rem;
99+
font-size: 1.2rem;
100+
background: white;
101+
color: #3498db;
102+
border: none;
103+
border-radius: 5px;
104+
cursor: pointer;
105+
transition: all 0.3s ease;
106+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
107+
}
108+
109+
.restart-btn:hover {
110+
transform: translateY(-2px);
111+
box-shadow: 0 6px 8px rgba(0,0,0,0.2);
112+
}
113+
</style>

0 commit comments

Comments
 (0)