-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (106 loc) Β· 4.11 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sokoban - εεΊ«ηͺ -</title>
<meta name="description" content="Sokoban-game developed by kagome 2024">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>
<script src="js/main.js" type="module"></script>
<link rel="icon" href="assets/sokoban-favicon.png" type="image/png">
</head>
<body>
<header>
<div id="page-title">
<img src="assets/sokoban-logo.png" alt="logo-image" />
<h1>Sokoban</h1>
</div>
<div id="header-nav-wrapper">
<!-- γγ«γγγΏγ³ -->
<svg id="how-to-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13 2h-2v4h2zm2 6H9v2H7v4h2v4h6v-4h2v-4h-2zm0 2v4h-2v2h-2v-2H9v-4zM9 20h6v2H9zm14-9v2h-4v-2zM5 13v-2H1v2zm12-7h2v2h-2zm2 0h2V4h-2zM5 6h2v2H5zm0 0V4H3v2z" />
</svg>
<!-- γ΅γ¦γ³γγγΏγ³ γγγγ -->
<div id="sound-setting-btn">
<div id="sound-off-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13 2h-2v2H9v2H7v2H3v8h4v2h2v2h2v2h2zM9 18v-2H7v-2H5v-4h2V8h2V6h2v12zm10-6.777h-2v-2h-2v2h2v2h-2v2h2v-2h2v2h2v-2h-2zm0 0h2v-2h-2z" />
</svg>
</div>
<div id="sound-on-btn" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M11 2h2v20h-2v-2H9v-2h2V6H9V4h2zM7 8V6h2v2zm0 8H3V8h4v2H5v4h2zm0 0v2h2v-2zm10-6h-2v4h2zm2-2h2v8h-2zm0 8v2h-4v-2zm0-10v2h-4V6z" />
</svg>
</div>
</div>
<!-- γ΅γ¦γ³γγγΏγ³ γγγΎγ§ -->
</div>
</header>
<main>
<section id="stage">
<svg id="prev-stage-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10 20H8V4h2v2h2v3h2v2h2v2h-2v2h-2v3h-2z" />
</svg>
<p>Stage: <span id="stage-index">1</span>/40</p>
<svg id="next-stage-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10 20H8V4h2v2h2v3h2v2h2v2h-2v2h-2v3h-2z" />
</svg>
</section>
<canvas width="264" height="216"></canvas>
<section id="controller">
<div class="btn-wrapper">
<button id="reset-btn">Reset</button>
<button id="undo-btn">Undo</button>
</div>
<div class="arrow-btn-wrapper">
<img id="up-btn" src="assets/controller-img/up.png" alt="up-btn">
<img id="left-btn" src="assets/controller-img/left.png" alt="left-btn">
<img id="right-btn" src="assets/controller-img/right.png" alt="right-btn">
<img id="down-btn" src="assets/controller-img/down.png" alt="down-btn">
</div>
</section>
</main>
<footer>
<p>Developed by <a href="https://github.com/kagomen/sokoban">kagome</a> 2024</p>
</footer>
<!-- γ―γͺγ’η»ι’γγγγ -->
<div id="clear-mask" class="mask" hidden></div>
<section id="clear-modal" class="modal" hidden>
<h2>Stage Clear!</h2>
<button id="clear-next-stage-btn">Next Stage</button>
<button id="close-btn">Close</button>
</section>
<!-- γ―γͺγ’η»ι’γγγΎγ§ -->
<!-- ιγ³ζΉη»ι’γγγγ -->
<div id="how-to-mask" class="mask" hidden></div>
<section id="how-to-modal" class="modal" hidden>
<h2>How to Play</h2>
<div>
<p>
Move<img src="assets/tiles/mouse.png" alt="mouse-image">to carry<img src="assets/tiles/cheese.png"
alt="cheese-image">to<img src="assets/tiles/goal.png" alt="goal-image">.
</p>
<section>
<h3>- For PC users -</h3>
<p>You can use arrow keys.</p>
<p>Press R for Reset.</p>
<p>Press Backspace for Undo.</p>
</section>
</div>
<button id="play-btn">Let's Play !</button>
</section>
<!-- ιγ³ζΉη»ι’γγγΎγ§ -->
<!-- γγΌγγ£γ³γ°η»ι’γγγγ -->
<div id="loading-screen">
<div id="loading-items-wrapper">
<div id="loading-img"></div>
<p>Loading<span>...</span></p>
</div>
</div>
<!-- γγΌγγ£γ³γ°η»ι’γγγΎγ§ -->
</body>
</html>