Public Source Viewer
비나래아카이브 개발자 포털
실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.
view/hinana/tetris.ejs
공개 가능
1
<!DOCTYPE html>
2
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta charset="utf-8" />
5
<meta name="color-scheme" content="light dark">
6
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0">
7
<link rel="manifest" href="/manifest.json">
8
<meta name="theme-color" content="<%= (typeof theme !== 'undefined' && theme === 'dark') ? '#000000' : '#ffffff' %>">
9
<meta name="apple-mobile-web-app-title" content="비나래 아카이브 - 테트리스">
10
<meta property="og:image" content="/image/2.png" />
11
<meta property="og:description" content="morikubo"/>
12
<meta property="og:url" content="hinana.moe"/>
13
<meta property="og:title" content="비나래 아카이브 - 테트리스"/>
14
<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
15
<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
16
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
17
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
18
<link rel="stylesheet" href="/css/hinana.css" type="text/css">
19
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
20
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
21
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
22
<link rel="stylesheet" href="/css/hinana.css">
23
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
24
25
<style>
26
/* [Theme Variables] */
27
:root {
28
--bg-main: #e4dfd7; --bg-secondary: #f2f0eb; --bg-tertiary: #dcd6ce;
29
--text-primary: #3e3a36; --text-secondary: #69615c;
30
--accent-color: #b45309; --border-color: #ccc6bc;
31
--hinana-glow: rgba(255, 142, 13, 0.3);
32
--font-family: 'Noto Sans KR', sans-serif;
33
}
34
body.dark-mode {
35
--bg-main: #1c1917; --bg-secondary: #292524; --bg-tertiary: #44403c;
36
--text-primary: #e7e5e4; --text-secondary: #a8a29e;
37
--border-color: #44403c; --accent-color: #f59e0b;
38
--hinana-glow: rgba(245, 158, 11, 0.2);
39
}
40
41
html, body { height: 100%; margin: 0; background-color: var(--bg-main); color: var(--text-primary); overflow: hidden; touch-action: auto !important; font-family: var(--font-family); }
42
43
.global-header { height: 60px; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; transition: all 0.3s ease; }
44
.layout-container { display: flex; height: calc(100vh - 60px); transition: all 0.3s ease; }
45
46
.shelf-column { width: 300px; background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; }
47
.info-column { width: 260px; background-color: var(--bg-secondary); border-left: 1px solid var(--border-color); padding: 20px; }
48
49
.content-column {
50
flex: 1; display: flex; flex-direction: column;
51
align-items: center; justify-content: center;
52
background-color: var(--bg-main); position: relative;
53
background-image: radial-gradient(circle at center, var(--bg-secondary) 0%, var(--bg-main) 70%);
54
transition: all 0.3s ease;
55
}
56
57
.game-board-wrapper { display: flex; align-items: flex-start; gap: 15px; position: relative; z-index: 5; }
58
.side-panel { display: flex; flex-direction: column; gap: 10px; }
59
.panel-box { background: rgba(0,0,0,0.2); border: 2px solid var(--border-color); border-radius: 8px; padding: 10px; text-align: center; width: 90px; }
60
.panel-title { font-size: 0.8rem; font-weight: bold; color: var(--text-secondary); margin-bottom: 5px; }
61
62
canvas.main-canvas {
63
border: 3px solid var(--accent-color); border-radius: 8px;
64
background: radial-gradient(circle at center, #3a2e2e 0%, #1a1515 100%);
65
box-shadow: 0 10px 30px var(--hinana-glow), inset 0 0 20px rgba(0,0,0,0.5); display: block;
66
}
67
canvas.mini-canvas { display: block; margin: 0 auto; background: transparent; }
68
69
.game-info {
70
position: relative; width: 100%; text-align: center; z-index: 20; margin-bottom: 15px;
71
}
72
.game-info-inner { display: flex; justify-content: center; gap: 20px; align-items: baseline; }
73
.score-box { font-size: 2rem; font-weight: 800; color: var(--accent-color); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
74
.timer-box { font-size: 1rem; font-weight: bold; color: var(--text-secondary); }
75
.level-box { font-size: 1.2rem; font-weight: 800; color: #ff3385; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: transform 0.2s; }
76
.level-up-anim { color: #fff !important; transform: scale(1.5); text-shadow: 0 0 10px #ff3385; }
77
78
.start-overlay {
79
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
80
background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
81
display: flex; flex-direction: column;
82
justify-content: center; align-items: center; color: white; z-index: 100;
83
}
84
.btn-start {
85
padding: 15px 40px; font-size: 1.3rem; font-weight: bold;
86
background: linear-gradient(45deg, var(--accent-color), #ff8e0d);
87
border: none; color: white; border-radius: 50px; cursor: pointer;
88
box-shadow: 0 4px 15px var(--hinana-glow); transition: transform 0.2s;
89
}
90
.btn-start:hover { transform: scale(1.05); }
91
92
.ranking-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
93
.rank-tab-btn {
94
background: none; border: none; font-size: 0.9rem; font-weight: bold;
95
color: var(--text-secondary); cursor: pointer; padding-bottom: 5px;
96
border-bottom: 2px solid transparent; transition: all 0.2s;
97
}
98
.rank-tab-btn:hover { color: var(--text-primary); }
99
.rank-tab-btn.active { color: var(--accent-color); border-bottom: 2px solid var(--accent-color); }
100
101
.ranking-list { width: 100%; max-width: 240px; text-align: left; display: none; }
102
.ranking-list.active { display: block; }
103
104
.ranking-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border-color); font-size: 0.9rem; }
105
.ranking-item:last-child { border-bottom: none; }
106
.rank-num { font-weight: bold; color: var(--accent-color); width: 25px; }
107
.rank-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
108
.rank-score { font-weight: bold; color: var(--text-primary); }
109
110
.mobile-controls {
111
display: none; width: 100%; max-width: 400px;
112
margin-top: 25px; justify-content: space-between; align-items: center; z-index: 5;
113
padding: 0 15px;
114
}
115
.d-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; justify-items: center; align-items: center; }
116
.action-pad { display: flex; gap: 15px; }
117
.btn-ctrl {
118
width: 55px; height: 55px; border-radius: 16px;
119
background-color: var(--bg-tertiary); border: 2px solid var(--border-color);
120
color: var(--text-primary); font-size: 1.4rem;
121
display: flex; align-items: center; justify-content: center;
122
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
123
box-shadow: 0 4px 0 var(--border-color); transition: all 0.1s;
124
}
125
.btn-ctrl:active { transform: translateY(4px); box-shadow: none; background-color: var(--accent-color); color: white; border-color: var(--accent-color); }
126
.btn-big { width: 65px; height: 65px; font-size: 1.6rem; background-color: var(--accent-color); color: white; border: none; box-shadow: 0 4px 0 #964305; }
127
.btn-big:active { box-shadow: none; background-color: #d65f0a; }
128
.btn-hold { background-color: #6c757d; color: white; border: none; box-shadow: 0 4px 0 #495057; font-size: 1.2rem; }
129
.btn-hold:active { background-color: #5a6268; box-shadow: none; }
130
.grid-empty { visibility: hidden; }
131
132
.header-brand { display: flex; align-items: center; gap: 15px; }
133
.header-logo { height: 28px; width: auto; mix-blend-mode: multiply; }
134
body.dark-mode .header-logo { mix-blend-mode: screen; }
135
.header-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; align-items: center; z-index: 5; }
136
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); }
137
.nav-link:hover { color: var(--accent-color); }
138
.nav-link.active { color: var(--text-primary); }
139
.nav-divider { opacity: 0.3; color: var(--text-secondary); }
140
.login-link { color: var(--accent-color); font-weight: bold; }
141
.header-controls { display: flex; align-items: center; gap: 10px; z-index: 10; position: relative; }
142
.icon-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px; }
143
.icon-btn:hover { color: var(--text-primary); }
144
145
.info-card { background-color: var(--bg-main); border-radius: 12px; padding: 20px; border: 1px solid var(--border-color); box-shadow: 0 1px 2px 0 rgba(60, 50, 40, 0.08); margin-bottom: 20px; }
146
.info-card-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
147
.footer { text-align: center; margin-top: 20px; color: var(--text-secondary); font-size: 0.8rem; }
148
149
@media (max-width: 960px) {
150
html, body { overflow: auto !important; height: auto !important; touch-action: auto !important; }
151
.layout-container { flex-direction: column; height: auto !important; }
152
.content-column { width: 100%; height: auto !important; border: none; order: 1; overflow: visible; padding: 10px; }
153
154
.shelf-column {
155
display: flex; order: 2; width: 100%; max-width: 520px;
156
margin: 0 auto 20px auto; background-color: transparent;
157
border-right: none; border-bottom: 1px solid var(--border-color); padding-bottom: 20px;
158
}
159
.shelf-column > div { width: 100% !important; }
160
.ranking-list { max-width: 100%; }
161
162
.info-column {
163
order: 3; width: 100%; max-width: 520px; margin: 0 auto 30px auto;
164
height: auto; border-left: none; border-top: none; padding: 20px;
165
}
166
167
canvas.main-canvas { max-height: 50vh; width: auto; box-shadow: 0 5px 20px var(--hinana-glow); }
168
.mobile-controls { display: flex; }
169
.game-board-wrapper { gap: 8px; }
170
.panel-box { width: 70px; padding: 5px; }
171
canvas.mini-canvas { width: 60px; height: 60px; }
172
173
.global-header { flex-wrap: wrap; height: auto; padding: 10px 20px; }
174
.header-nav { position: static; transform: none; width: 100%; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); order: 3; }
175
.header-brand { flex: 1; order: 1; }
176
.header-controls { flex: auto; justify-content: flex-end; order: 2; }
177
}
178
.d-none { display: none !important; }
179
180
body.game-active { overflow: hidden !important; height: 100vh !important; height: 100dvh !important; touch-action: none !important; }
181
body.game-active .global-header, body.game-active .shelf-column, body.game-active .info-column, body.game-active footer, body.game-active .footer { display: none !important; }
182
body.game-active .layout-container { height: 100% !important; margin: 0; padding: 0; flex-direction: column; }
183
body.game-active .content-column { width: 100%; height: 100% !important; justify-content: flex-start; padding-top: 20px; }
184
body.game-active canvas.main-canvas { max-height: 60vh; }
185
body.game-active .game-info { position: relative; top: auto; margin-bottom: 10px; z-index: 20; }
186
body.game-active .game-info-inner { justify-content: center; gap: 20px; align-items: center; }
187
body.game-active .score-box { font-size: 2.2rem; margin: 0; }
188
body.game-active .level-box { font-size: 1.5rem; margin: 0; }
189
body.game-active .timer-box { font-size: 1.2rem; margin: 0; }
190
191
a.btn-guest-login,
192
a.btn-guest-login:link,
193
a.btn-guest-login:visited,
194
a.btn-guest-login:hover,
195
a.btn-guest-login:active,
196
a.btn-guest-login i {
197
background-color: #ffffff !important;
198
color: #000000 !important;
199
border: none !important;
200
font-weight: 800 !important;
201
transition: transform 0.2s;
202
opacity: 1 !important;
203
}
204
205
a.btn-guest-login:hover {
206
transform: scale(1.05);
207
background-color: #f0f0f0 !important;
208
}
209
</style>
210
</head>
211
212
<body class="<%= (typeof theme !== 'undefined' && theme === 'dark') ? 'dark-mode' : '' %>">
213
214
<header class="global-header">
215
<div class="header-brand">
216
<a href="/hinana/index">
217
<img src="/image/<%= (typeof theme !== 'undefined' && theme === 'dark') ? 'archive1.png' : 'archive.png' %>" alt="Hinana Archive" class="header-logo">
218
</a>
219
</div>
220
<nav class="header-nav">
221
<a href="/hinana/index" class="nav-link">Archive</a>
222
<a href="/hinana/info" class="nav-link active">Info</a>
223
<a href="/hinana/blog" class="nav-link">Blog</a>
224
<a href="/hinana/lounge" class="nav-link">Lounge</a>
225
<span class="nav-divider">|</span>
226
<% if(username) { %>
227
<a href="/logout?redirect=/hinana/info" class="nav-link text-danger fw-bold">Logout</a>
228
<% } else { %>
229
<a href="/login?redirect=/hinana/info" class="nav-link login-link fw-bold">Login</a>
230
<% } %>
231
</nav>
232
<div class="header-controls">
233
<a href="/hinana/gallery#brand-assets" class="nav-link" style="font-size:0.9rem;">사이트 맵</a>
234
<form action="/toggle-theme" method="POST" class="d-inline">
235
<button type="submit" class="icon-btn" title="테마 변경">
236
<i class="bi <%= (typeof theme !== 'undefined' && theme==='dark') ? 'bi-moon-stars-fill':'bi-sun-fill' %>"></i>
237
</button>
238
</form>
239
</div>
240
</header>
241
242
<div class="layout-container">
243
<div class="shelf-column">
244
<div class="text-center p-3 rounded w-75" style="background: var(--bg-main); border:1px solid var(--border-color);">
245
<h6 class="mb-3 fw-bold text-accent"><i class="bi bi-trophy-fill"></i> LEADERBOARD</h6>
246
<div class="ranking-tabs">
247
<button class="rank-tab-btn active" onclick="switchRank('hinana')">히나나 스코어</button>
248
<button class="rank-tab-btn" onclick="switchRank('pure')">총합점수</button>
249
</div>
250
<div id="rank-hinana" class="ranking-list active">
251
<% if (typeof leaderboard !== 'undefined' && leaderboard.length > 0) { %>
252
<% leaderboard.forEach((entry, index) => { %>
253
<div class="ranking-item">
254
<span class="rank-num"><%= index + 1 %></span>
255
<span class="rank-name"><%= entry.username %></span>
256
<span class="rank-score"><%= entry.hinanaScore.toLocaleString() %></span>
257
</div>
258
<% }); %>
259
<% } else { %>
260
<div class="text-center text-secondary small py-3">기록 없음</div>
261
<% } %>
262
</div>
263
<div id="rank-pure" class="ranking-list">
264
<% if (typeof pureLeaderboard !== 'undefined' && pureLeaderboard.length > 0) { %>
265
<% pureLeaderboard.forEach((entry, index) => { %>
266
<div class="ranking-item">
267
<span class="rank-num"><%= index + 1 %></span>
268
<span class="rank-name"><%= entry.username %></span>
269
<span class="rank-score"><%= entry.rawScore.toLocaleString() %></span>
270
</div>
271
<% }); %>
272
<% } else { %>
273
<div class="text-center text-secondary small py-3">기록 없음</div>
274
<% } %>
275
</div>
276
</div>
277
</div>
278
279
<div class="content-column">
280
<div class="game-info">
281
<div class="game-info-inner">
282
<div class="level-box" id="level">LV 1</div>
283
<div class="score-box" id="score">0</div>
284
<div class="timer-box" id="timer">00:00</div>
285
</div>
286
</div>
287
288
<div class="game-board-wrapper">
289
<div class="side-panel">
290
<div class="panel-box">
291
<div class="panel-title">HOLD</div>
292
<canvas id="hold" width="80" height="80" class="mini-canvas"></canvas>
293
</div>
294
</div>
295
296
<canvas id="tetris" width="200" height="400" class="main-canvas"></canvas>
297
298
<div class="side-panel">
299
<div class="panel-box">
300
<div class="panel-title">NEXT</div>
301
<canvas id="next" width="80" height="80" class="mini-canvas"></canvas>
302
</div>
303
</div>
304
</div>
305
306
<div class="mobile-controls">
307
<div class="d-pad">
308
<button class="btn-ctrl btn-hold" onpointerdown="triggerInput(16); event.preventDefault();"><i class="bi bi-arrow-repeat"></i></button>
309
<button class="btn-ctrl" onpointerdown="triggerInput(38); event.preventDefault();"><i class="bi bi-arrow-clockwise"></i></button>
310
<div class="grid-empty"></div>
311
<button class="btn-ctrl" onpointerdown="startMove(37); event.preventDefault();" onpointerup="stopMove(37)" onpointerleave="stopMove(37)"><i class="bi bi-caret-left-fill"></i></button>
312
<button class="btn-ctrl" onpointerdown="startMove(40); event.preventDefault();" onpointerup="stopMove(40)" onpointerleave="stopMove(40)"><i class="bi bi-caret-down-fill"></i></button>
313
<button class="btn-ctrl" onpointerdown="startMove(39); event.preventDefault();" onpointerup="stopMove(39)" onpointerleave="stopMove(39)"><i class="bi bi-caret-right-fill"></i></button>
314
</div>
315
<div class="action-pad">
316
<button class="btn-ctrl btn-big" onpointerdown="triggerInput(32); event.preventDefault();"><i class="bi bi-arrow-bar-down"></i></button>
317
</div>
318
</div>
319
320
<div class="start-overlay" id="overlay">
321
<div class="mb-2" style="font-size:3rem; font-weight:800; color:var(--accent-color); text-shadow: 2px 2px 0 #fff;">TETRIS</div>
322
323
<div class="mb-4 text-center">
324
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
325
<div class="text-warning mb-2 small fw-bold"><i class="bi bi-exclamation-triangle-fill"></i> 게스트로 플레이 중입니다</div>
326
327
<a href="/login?redirect=/hinana/tetris" class="btn btn-sm btn-guest-login rounded-pill px-4 shadow-sm">
328
<i class="bi bi-box-arrow-in-right"></i> 로그인하기
329
</a>
330
331
<% } else { %>
332
<div class="text-white mb-1">Player: <span class="fw-bold" style="color:var(--accent-color)"><%= username %></span></div>
333
<a href="/logout?redirect=/hinana/tetris" class="btn btn-sm btn-outline-light rounded-pill px-3" style="font-size: 0.8rem; opacity: 0.8;">
334
로그아웃
335
</a>
336
<% } %>
337
</div>
338
<div id="result-area" class="mb-4 text-center d-none">
339
<div class="h4 text-white">GAME OVER</div>
340
<div class="small text-light">Hinana Score</div>
341
<div class="h2 fw-bold text-warning" id="final-score">0</div>
342
</div>
343
<div id="bookmark-claim-area" class="mb-3 text-center d-none" style="background: rgba(255,255,255,0.1); border: 1px solid var(--accent-color); border-radius: 12px; padding: 15px 20px; max-width: 320px;">
344
<div class="small text-light mb-1"><i class="bi bi-bookmark-fill" style="color: var(--accent-color);"></i> 책갈피 전환</div>
345
<div class="h5 fw-bold text-warning mb-2" id="claim-amount">0개</div>
346
<div class="small text-light mb-3">이 게임 결과로 책갈피를 전환하시겠습니까?</div>
347
<div class="d-flex justify-content-center gap-2">
348
<button class="btn btn-sm btn-warning fw-bold px-4" onclick="claimBookmarks()">예</button>
349
<button class="btn btn-sm btn-outline-light fw-bold px-4" onclick="dismissClaim()">아니오</button>
350
</div>
351
<div id="claim-result" class="small mt-2 d-none"></div>
352
</div>
353
<button class="btn-start" onclick="startGame()"><i class="bi bi-play-fill"></i> GAME START</button>
354
</div>
355
</div>
356
357
<div class="info-column">
358
<div class="p-3 border rounded shadow-sm" style="background-color:var(--bg-main)!important; border-color:var(--border-color)!important;">
359
<small class="text-secondary fw-bold text-uppercase"><i class="bi bi-person-circle"></i> Player</small>
360
<div class="fw-bold fs-5 mb-3 text-truncate"><% if(username) { %><a href="/hinana/userInfo" style="color: inherit;"><%= username %></a><% } else { %>Guest<% } %></div>
361
<hr style="opacity:0.2">
362
<small class="text-secondary fw-bold text-uppercase"><i class="bi bi-palette"></i> Theme</small>
363
<form action="/toggle-theme" method="POST">
364
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
365
<button class="btn btn-sm btn-outline-secondary w-100 mt-2 fw-bold">
366
<%= theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode' %>
367
</button>
368
</form>
369
</div>
370
<div class="info-card mt-3" style="margin-top: 20px !important;">
371
<div class="info-card-title">System Info</div>
372
<ul class="small text-secondary list-unstyled mb-0">
373
<li class="mb-1 d-flex justify-content-between"><span>Version</span></li>
374
<li class="mb-1 d-flex justify-content-between"><span> Ver. 6.5.4.0-Kozeki Ui</span></li>
375
</ul>
376
</div>
377
378
<div style="text-align:center; margin-top: 20px;" class="footer">
379
<img src="/image/sign.png" id="fumika_sign" style="max-width:200px; width:80%; opacity:0.8; mix-blend-mode:multiply;" />
380
</div>
381
<footer class="text-center footer mt-2">
382
<p style="margin-bottom: 0rem; font-size: 0.8rem;">X - @NoctchillHinana</p>
383
<p style="margin-bottom: 0rem; font-size: 0.8rem;">ⓒ 2024~2026. 비나래 | hinana.moe All rights reserved.</p>
384
</footer>
385
</div>
386
</div>
387
388
<script>
389
const canvas = document.getElementById('tetris');
390
const context = canvas.getContext('2d');
391
const holdCanvas = document.getElementById('hold');
392
const holdCtx = holdCanvas.getContext('2d');
393
const nextCanvas = document.getElementById('next');
394
const nextCtx = nextCanvas.getContext('2d');
395
396
const scoreElement = document.getElementById('score');
397
const timerElement = document.getElementById('timer');
398
const levelElement = document.getElementById('level');
399
const overlay = document.getElementById('overlay');
400
const resultArea = document.getElementById('result-area');
401
const finalScoreElement = document.getElementById('final-score');
402
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
403
404
const BLOCK_SIZE = 20;
405
const MINI_BLOCK_SIZE = 20;
406
407
context.scale(BLOCK_SIZE, BLOCK_SIZE);
408
holdCtx.scale(MINI_BLOCK_SIZE, MINI_BLOCK_SIZE);
409
nextCtx.scale(MINI_BLOCK_SIZE, MINI_BLOCK_SIZE);
410
411
const colors = [ null, '#00FFFF', '#FF7F00', '#0000FF', '#FFFF00', '#FF0000', '#00FF00', '#800080' ];
412
413
// [★수정] SRS 표준 월 킥 데이터 (Wall Kick Data)
414
const JLSTZ_WALL_KICKS = {
415
'0-1': [[0,0], [-1,0], [-1,-1], [0,2], [-1,2]],
416
'1-0': [[0,0], [1,0], [1,1], [0,-2], [1,-2]],
417
'1-2': [[0,0], [1,0], [1,-1], [0,2], [1,2]],
418
'2-1': [[0,0], [-1,0], [-1,1], [0,-2], [-1,-2]],
419
'2-3': [[0,0], [1,0], [1,1], [0,-2], [1,-2]],
420
'3-2': [[0,0], [-1,0], [-1,-1], [0,2], [-1,2]],
421
'3-0': [[0,0], [-1,0], [-1,-1], [0,2], [-1,2]],
422
'0-3': [[0,0], [1,0], [1,1], [0,-2], [1,-2]]
423
};
424
425
const I_WALL_KICKS = {
426
'0-1': [[0,0], [-2,0], [1,0], [-2,-1], [1,2]],
427
'1-0': [[0,0], [2,0], [-1,0], [2,1], [-1,-2]],
428
'1-2': [[0,0], [-1,0], [2,0], [-1,2], [2,-1]],
429
'2-1': [[0,0], [1,0], [-2,0], [1,-2], [-2,1]],
430
'2-3': [[0,0], [2,0], [-1,0], [2,1], [-1,-2]],
431
'3-2': [[0,0], [-2,0], [1,0], [-2,-1], [1,2]],
432
'3-0': [[0,0], [1,0], [-2,0], [1,-2], [-2,1]],
433
'0-3': [[0,0], [-1,0], [2,0], [-1,2], [2,-1]]
434
};
435
436
let effects = [];
437
let shake = 0;
438
let lockResets = 0;
439
const LOCK_RESET_LIMIT = 15;
440
let stats = { startTime: 0, playTime: 0, totalLines: 0, tetrisLines: 0, tspinLines: 0 };
441
const keyState = {};
442
const keyTimers = {};
443
const DAS_DELAY = 130;
444
const ARR_DELAY = 30;
445
446
function switchRank(type) {
447
document.querySelectorAll('.rank-tab-btn').forEach(btn => btn.classList.remove('active'));
448
event.target.classList.add('active');
449
document.querySelectorAll('.ranking-list').forEach(list => list.classList.remove('active'));
450
document.getElementById('rank-' + type).classList.add('active');
451
}
452
453
function drawGrid() {
454
context.lineWidth = 0.05;
455
context.strokeStyle = 'rgba(255, 255, 255, 0.15)';
456
context.beginPath();
457
for (let x = 1; x < 10; x++) { context.moveTo(x, 0); context.lineTo(x, 20); }
458
for (let y = 1; y < 20; y++) { context.moveTo(0, y); context.lineTo(10, y); }
459
context.stroke();
460
context.closePath();
461
}
462
463
// [★수정] SRS 표준 형태 (SRS Spawn Orientations)
464
function createPiece(type) {
465
if (type === 'I') return [[0,0,0,0], [1,1,1,1], [0,0,0,0], [0,0,0,0]]; // Cyan
466
if (type === 'L') return [[0,0,2], [2,2,2], [0,0,0]]; // Orange
467
if (type === 'J') return [[3,0,0], [3,3,3], [0,0,0]]; // Blue
468
if (type === 'O') return [[4,4], [4,4]]; // Yellow
469
if (type === 'Z') return [[5,5,0], [0,5,5], [0,0,0]]; // Red
470
if (type === 'S') return [[0,6,6], [6,6,0], [0,0,0]]; // Green
471
if (type === 'T') return [[0,7,0], [7,7,7], [0,0,0]]; // Purple
472
}
473
474
const arena = createMatrix(10, 20);
475
476
const player = {
477
pos: {x: 0, y: 0},
478
matrix: null,
479
score: 0,
480
level: 1,
481
holdType: null,
482
nextType: null,
483
canHold: true,
484
currentType: null,
485
rotation: 0, // [★추가] 회전 상태 (0, 1, 2, 3)
486
lastMoveRotate: false
487
};
488
489
let bag = [];
490
function getNextPieceType() {
491
if (bag.length === 0) {
492
bag = 'ILJOTSZ'.split('');
493
for (let i = bag.length - 1; i > 0; i--) {
494
const j = Math.floor(Math.random() * (i + 1));
495
[bag[i], bag[j]] = [bag[j], bag[i]];
496
}
497
}
498
return bag.pop();
499
}
500
501
function createMatrix(w, h) {
502
const matrix = [];
503
while (h--) matrix.push(new Array(w).fill(0));
504
return matrix;
505
}
506
507
function draw() {
508
context.save();
509
context.setTransform(1, 0, 0, 1, 0, 0);
510
context.clearRect(0, 0, canvas.width, canvas.height);
511
context.restore();
512
513
context.save();
514
if (shake > 0) {
515
const dx = (Math.random() - 0.5) * shake * 0.1;
516
const dy = (Math.random() - 0.5) * shake * 0.1;
517
context.translate(dx, dy);
518
shake *= 0.9;
519
if (shake < 0.5) shake = 0;
520
}
521
522
drawGrid();
523
drawMatrix(arena, {x: 0, y: 0}, context);
524
525
// [★수정] 고스트(섀도우) 가독성 향상 적용됨
526
if (player.matrix) {
527
const ghost = { pos: { ...player.pos }, matrix: player.matrix };
528
while (!collide(arena, ghost)) { ghost.pos.y++; }
529
ghost.pos.y--;
530
531
ghost.matrix.forEach((row, y) => {
532
row.forEach((value, x) => {
533
if (value !== 0) {
534
const finalX = x + ghost.pos.x;
535
const finalY = y + ghost.pos.y;
536
537
// 1. 내부 옅게
538
context.fillStyle = colors[value];
539
context.globalAlpha = 0.3;
540
context.fillRect(finalX + 0.05, finalY + 0.05, 0.9, 0.9);
541
542
// 2. 테두리 진하게
543
context.globalAlpha = 0.8;
544
context.strokeStyle = colors[value];
545
context.lineWidth = 0.1;
546
context.strokeRect(finalX + 0.05, finalY + 0.05, 0.9, 0.9);
547
}
548
});
549
});
550
context.globalAlpha = 1.0;
551
}
552
553
drawMatrix(player.matrix, player.pos, context);
554
555
effects.forEach((effect, index) => {
556
context.globalAlpha = effect.life;
557
context.fillStyle = effect.color;
558
context.font = "bold 1px sans-serif";
559
context.textAlign = "center";
560
context.fillText(effect.text, effect.x, effect.y);
561
context.lineWidth = 0.05;
562
context.strokeStyle = 'black';
563
context.strokeText(effect.text, effect.x, effect.y);
564
effect.y -= 0.05;
565
effect.life -= 0.02;
566
if (effect.life <= 0) effects.splice(index, 1);
567
});
568
context.restore();
569
570
drawMiniPanel(holdCtx, player.holdType);
571
drawMiniPanel(nextCtx, player.nextType);
572
}
573
574
function drawMiniPanel(ctx, type) {
575
ctx.clearRect(0, 0, 4, 4);
576
if (!type) return;
577
const piece = createPiece(type);
578
const offsetX = (4 - piece[0].length) / 2;
579
const offsetY = (4 - piece.length) / 2;
580
drawMatrix(piece, {x: offsetX, y: offsetY}, ctx);
581
}
582
583
function drawMatrix(matrix, offset, ctx) {
584
matrix.forEach((row, y) => {
585
row.forEach((value, x) => {
586
if (value !== 0) {
587
const finalX = x + offset.x;
588
const finalY = y + offset.y;
589
const color = colors[value];
590
ctx.fillStyle = color;
591
ctx.fillRect(finalX + 0.05, finalY + 0.05, 0.9, 0.9);
592
ctx.lineWidth = 0.1;
593
ctx.strokeStyle = 'rgba(255,255,255,0.6)';
594
ctx.beginPath();
595
ctx.moveTo(finalX, finalY + 1); ctx.lineTo(finalX, finalY); ctx.lineTo(finalX + 1, finalY);
596
ctx.stroke();
597
ctx.strokeStyle = 'rgba(0,0,0,0.4)';
598
ctx.beginPath();
599
ctx.moveTo(finalX + 1, finalY); ctx.lineTo(finalX + 1, finalY + 1); ctx.lineTo(finalX, finalY + 1);
600
ctx.stroke();
601
}
602
});
603
});
604
}
605
606
function merge(arena, player) {
607
player.matrix.forEach((row, y) => {
608
row.forEach((value, x) => {
609
if (value !== 0) {
610
arena[y + player.pos.y][x + player.pos.x] = value;
611
}
612
});
613
});
614
}
615
616
// [★수정] 순수 매트릭스 회전 (시계/반시계)
617
function rotate(matrix, dir) {
618
for (let y = 0; y < matrix.length; ++y) {
619
for (let x = 0; x < y; ++x) {
620
[matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
621
}
622
}
623
if (dir > 0) matrix.forEach(row => row.reverse());
624
else matrix.reverse();
625
}
626
627
function playerReset() {
628
if (player.nextType === null) {
629
player.nextType = getNextPieceType();
630
}
631
632
player.currentType = player.nextType;
633
player.matrix = createPiece(player.currentType);
634
player.nextType = getNextPieceType();
635
636
player.pos.y = 0;
637
// SRS는 3x3일 경우 (3,0)에서 시작, 4x4일 경우 (3,0) or (3,-1)
638
player.pos.x = Math.floor((arena[0].length - player.matrix[0].length) / 2);
639
player.rotation = 0; // 초기화
640
player.canHold = true;
641
lockTimer = 0;
642
lockResets = 0;
643
player.lastMoveRotate = false;
644
645
if (collide(arena, player)) {
646
gameOver();
647
}
648
}
649
650
const loggedInUsername = '<%= username || "" %>';
651
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
652
let lastHinanaScore = 0;
653
654
function sat(x, cap) {
655
return cap * (1 - Math.exp(-x / cap));
656
}
657
658
function calcSkillHinanaScore(timeSec, lines, lines4, tspinLines) {
659
const t = Math.max(timeSec, 90);
660
const lpm = (lines * 60) / t;
661
const tpm = ((lines4 / 4) * 60) / t;
662
const tspm = (tspinLines * 60) / t;
663
return Math.round(1000 * sat(lpm, 35) + 400 * sat(tpm, 6) + 500 * sat(tspm, 8));
664
}
665
666
function gameOver() {
667
isPaused = true;
668
document.body.classList.remove('game-active');
669
670
resultArea.classList.remove('d-none');
671
const hinanaScore = calcSkillHinanaScore(stats.playTime, stats.totalLines, stats.tetrisLines, stats.tspinLines);
672
lastHinanaScore = hinanaScore;
673
finalScoreElement.innerText = hinanaScore.toLocaleString();
674
675
// 책갈피 전환 영역 초기화
676
const claimArea = document.getElementById('bookmark-claim-area');
677
const claimResult = document.getElementById('claim-result');
678
claimArea.classList.add('d-none');
679
claimResult.classList.add('d-none');
680
681
// Guest는 서버에 제출하지 않음
682
if (!loggedInUsername) {
683
let warningMsg = document.getElementById('score-warning');
684
if (!warningMsg) {
685
warningMsg = document.createElement('div');
686
warningMsg.id = 'score-warning';
687
warningMsg.className = 'small text-danger fw-bold mt-2';
688
resultArea.appendChild(warningMsg);
689
}
690
warningMsg.innerText = "※ 로그인 후 플레이하면 랭킹에 등록됩니다.";
691
overlay.style.display = 'flex';
692
return;
693
}
694
695
fetch('/hinana/tetris/score', {
696
method: 'POST',
697
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
698
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
699
score: player.score,
700
time: stats.playTime,
701
lines: stats.totalLines,
702
lines4: stats.tetrisLines,
703
tspinLines: stats.tspinLines
704
})
705
})
706
.then(res => res.json())
707
.then(data => {
708
if (data.success === false) {
709
let warningMsg = document.getElementById('score-warning');
710
if (!warningMsg) {
711
warningMsg = document.createElement('div');
712
warningMsg.id = 'score-warning';
713
warningMsg.className = 'small text-danger fw-bold mt-2';
714
resultArea.appendChild(warningMsg);
715
}
716
warningMsg.innerText = "※ " + (data.message || "랭킹에 반영되지 않았습니다.");
717
} else {
718
const warningMsg = document.getElementById('score-warning');
719
if (warningMsg) warningMsg.remove();
720
721
// 책갈피 전환 가능 여부 확인
722
const claimable = Math.min(Math.floor(hinanaScore / 10000), 10);
723
if (canClaimTetris && claimable > 0) {
724
document.getElementById('claim-amount').innerText = claimable + '개';
725
claimArea.classList.remove('d-none');
726
}
727
}
728
overlay.style.display = 'flex';
729
})
730
.catch(err => {
731
console.error("Score submit error:", err);
732
overlay.style.display = 'flex';
733
});
734
}
735
736
function claimBookmarks() {
737
fetch('/hinana/tetris/claim-bookmarks', {
738
method: 'POST',
739
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
740
[SECURITY REDACTED] 민감한 설정/인증/토큰 관련 코드입니다.
741
})
742
.then(res => res.json())
743
.then(data => {
744
const claimResult = document.getElementById('claim-result');
745
claimResult.classList.remove('d-none');
746
if (data.success) {
747
claimResult.className = 'small mt-2 text-warning fw-bold';
748
claimResult.innerText = '책갈피 ' + data.awarded + '개가 적립되었습니다! (총 ' + data.total + '개)';
749
canClaimTetris = false; // 오늘 전환 완료
750
} else {
751
claimResult.className = 'small mt-2 text-danger fw-bold';
752
claimResult.innerText = data.message || '전환에 실패했습니다.';
753
}
754
// 버튼 숨기기
755
document.querySelectorAll('#bookmark-claim-area button').forEach(btn => btn.style.display = 'none');
756
})
757
.catch(err => {
758
console.error("Claim error:", err);
759
});
760
}
761
762
function dismissClaim() {
763
document.getElementById('bookmark-claim-area').classList.add('d-none');
764
}
765
766
function playerHold() {
767
if (isPaused || !player.canHold) return;
768
769
if (player.holdType === null) {
770
player.holdType = player.currentType;
771
playerReset();
772
} else {
773
const temp = player.currentType;
774
player.currentType = player.holdType;
775
player.holdType = temp;
776
player.matrix = createPiece(player.currentType);
777
player.pos.y = 0;
778
player.pos.x = Math.floor((arena[0].length - player.matrix[0].length) / 2);
779
player.rotation = 0; // 홀드 시 회전 초기화
780
}
781
player.canHold = false;
782
lockTimer = 0;
783
lockResets = 0;
784
player.lastMoveRotate = false;
785
}
786
787
function playerHardDrop() {
788
if (isPaused) return;
789
while (!collide(arena, player)) { player.pos.y++; }
790
player.pos.y--;
791
merge(arena, player);
792
playerReset();
793
arenaSweep();
794
updateScore();
795
dropCounter = 0;
796
shake = 3;
797
player.lastMoveRotate = false;
798
}
799
800
function playerDrop() {
801
if (isPaused) return;
802
player.pos.y++;
803
if (collide(arena, player)) {
804
player.pos.y--;
805
return true;
806
}
807
player.lastMoveRotate = false;
808
return false;
809
}
810
811
function playerMove(dir) {
812
if (isPaused) return;
813
player.pos.x += dir;
814
if (collide(arena, player)) {
815
player.pos.x -= dir;
816
} else {
817
if (isGrounded() && lockResets < LOCK_RESET_LIMIT) { lockTimer = 0; lockResets++; }
818
player.lastMoveRotate = false;
819
}
820
}
821
822
// [★수정] SRS 기반 회전 로직 (Super Rotation System)
823
function playerRotate(dir) {
824
if (isPaused) return;
825
826
const originalPos = player.pos.x;
827
const originalY = player.pos.y;
828
const originalMat = player.matrix.map(row => [...row]); // 백업
829
const oldRotation = player.rotation;
830
831
// 1. 매트릭스 회전
832
rotate(player.matrix, dir);
833
834
// 2. 새 회전 상태 계산 (0->1->2->3 or 0->3->2->1)
835
let newRotation = (oldRotation + dir);
836
if (newRotation < 0) newRotation = 3;
837
if (newRotation > 3) newRotation = 0;
838
839
// 3. 킥 테이블 조회
840
const kickKey = oldRotation + '-' + newRotation;
841
let kicks;
842
843
if (player.currentType === 'I') {
844
kicks = I_WALL_KICKS[kickKey];
845
} else if (player.currentType === 'O') {
846
kicks = [[0,0]]; // O블록은 킥 없음
847
} else {
848
kicks = JLSTZ_WALL_KICKS[kickKey];
849
}
850
851
// 4. 테스트 (Wall Kick Test)
852
let rotated = false;
853
for (let i = 0; i < kicks.length; i++) {
854
const [ox, oy] = kicks[i];
855
player.pos.x += ox;
856
player.pos.y -= oy; // Y축은 위가 -방향이므로 뺌
857
858
if (!collide(arena, player)) {
859
rotated = true;
860
player.rotation = newRotation;
861
player.lastMoveRotate = true; // 스핀 판정용 플래그
862
if (isGrounded() && lockResets < LOCK_RESET_LIMIT) { lockTimer = 0; lockResets++; }
863
break;
864
} else {
865
// 실패 시 원복하고 다음 테스트
866
player.pos.x -= ox;
867
player.pos.y += oy;
868
}
869
}
870
871
// 5. 모든 킥 실패 시 회전 취소
872
if (!rotated) {
873
player.matrix = originalMat;
874
player.pos.x = originalPos;
875
player.pos.y = originalY;
876
}
877
}
878
879
function isGrounded() {
880
player.pos.y++;
881
let grounded = collide(arena, player);
882
player.pos.y--;
883
return grounded;
884
}
885
886
// [★수정] All-Spin 감지 (T-Spin 포함)
887
function checkSpin() {
888
if (!player.lastMoveRotate) return null; // 회전 안했으면 무효
889
if (player.currentType !== 'T') return null; // T-Spin만 인정
890
891
let corners = 0;
892
// 현재 블록의 중심 기준이 아니라, 3x3 박스 내의 네 귀퉁이 검사
893
// SRS에서 T블록 중심은 (1,1)
894
const checkPoints = [[0, 0], [2, 0], [0, 2], [2, 2]];
895
896
checkPoints.forEach(([kx, ky]) => {
897
const x = player.pos.x + kx;
898
const y = player.pos.y + ky;
899
if (arena[y] === undefined || arena[y][x] === undefined || arena[y][x] !== 0) {
900
corners++;
901
}
902
});
903
904
if (corners >= 3) {
905
return player.currentType; // 'T', 'S', 'Z' 등 반환
906
}
907
return null;
908
}
909
910
function collide(arena, player) {
911
const [m, o] = [player.matrix, player.pos];
912
for (let y = 0; y < m.length; ++y) {
913
for (let x = 0; x < m[y].length; ++x) {
914
if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
915
return true;
916
}
917
}
918
}
919
return false;
920
}
921
922
function arenaSweep() {
923
let rowCount = 0;
924
outer: for (let y = arena.length - 1; y > 0; --y) {
925
for (let x = 0; x < arena[y].length; ++x) {
926
if (arena[y][x] === 0) continue outer;
927
}
928
const row = arena.splice(y, 1)[0].fill(0);
929
arena.unshift(row);
930
++y;
931
rowCount++;
932
}
933
934
const spinType = checkSpin(); // 스핀 체크
935
936
if (rowCount > 0 || spinType) {
937
stats.totalLines += rowCount;
938
if (rowCount === 4) stats.tetrisLines += 4;
939
if (spinType && rowCount > 0) stats.tspinLines += rowCount;
940
941
let addedScore = 0;
942
let text = "";
943
let color = "#fff";
944
945
// [★수정] 점수 로직 (Spin 우선)
946
if (spinType) {
947
const name = spinType + "-SPIN";
948
color = "#D500F9";
949
if (rowCount === 0) { addedScore = 100; text = name; } // Mini or Twist (no clear)
950
else if (rowCount === 1) { addedScore = 800; text = name + " SINGLE!"; }
951
else if (rowCount === 2) { addedScore = 1200; text = name + " DOUBLE!"; }
952
else if (rowCount === 3) { addedScore = 1600; text = name + " TRIPLE!"; }
953
shake = 5;
954
} else {
955
if (rowCount === 1) { addedScore = 100; text = "+100"; }
956
else if (rowCount === 2) { addedScore = 300; text = "DOUBLE! +300"; color = "#00C7FF"; }
957
else if (rowCount === 3) { addedScore = 500; text = "TRIPLE! +500"; color = "#FF9100"; }
958
else if (rowCount === 4) { addedScore = 800; text = "TETRIS!!! +800"; color = "#D500F9"; shake = 10; }
959
}
960
961
if (addedScore > 0) {
962
player.score += addedScore * player.level;
963
if(text) {
964
effects.push({
965
x: arena[0].length / 2, y: arena.length / 2,
966
text: text, color: color, life: 1.0
967
});
968
}
969
}
970
971
const newLevel = Math.floor(stats.totalLines / 5) + 1;
972
if (newLevel > player.level) {
973
player.level = newLevel;
974
levelElement.innerText = "LV " + player.level;
975
levelElement.classList.add('level-up-anim');
976
setTimeout(() => levelElement.classList.remove('level-up-anim'), 500);
977
dropInterval = 1000 * Math.pow(0.8, player.level - 1);
978
effects.push({ x: arena[0].length / 2, y: arena.length / 2 - 2, text: "LEVEL UP!", color: "#FF3385", life: 1.5 });
979
}
980
}
981
}
982
983
let dropCounter = 0;
984
let dropInterval = 1000;
985
let lastTime = 0;
986
let isPaused = true;
987
const ENABLE_HOLD_R_RESTART = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
988
989
let rHoldTimer = null;
990
let rIsHolding = false;
991
992
const R_HOLD_MS = 650;
993
let lockTimer = 0;
994
const LOCK_DELAY = 500;
995
996
function update(time = 0) {
997
if (isPaused) return;
998
const deltaTime = time - lastTime;
999
lastTime = time;
1000
1001
handleInput(deltaTime);
1002
1003
if (stats.startTime > 0) {
1004
stats.playTime = Math.floor((Date.now() - stats.startTime) / 1000);
1005
const min = String(Math.floor(stats.playTime / 60)).padStart(2, '0');
1006
const sec = String(stats.playTime % 60).padStart(2, '0');
1007
timerElement.innerText = `${min}:${sec}`;
1008
}
1009
1010
dropCounter += deltaTime;
1011
if (dropCounter > dropInterval) {
1012
player.pos.y++;
1013
if (collide(arena, player)) {
1014
player.pos.y--;
1015
} else {
1016
lockTimer = 0;
1017
player.lastMoveRotate = false;
1018
}
1019
dropCounter = 0;
1020
}
1021
1022
if (isGrounded()) {
1023
lockTimer += deltaTime;
1024
if (lockTimer > LOCK_DELAY) {
1025
merge(arena, player);
1026
playerReset();
1027
arenaSweep();
1028
updateScore();
1029
lockTimer = 0;
1030
}
1031
}
1032
1033
draw();
1034
requestAnimationFrame(update);
1035
}
1036
1037
function handleInput(dt) {
1038
[37, 39].forEach(code => {
1039
if (keyState[code]) {
1040
if (keyTimers[code] === 0) {
1041
playerMove(code === 37 ? -1 : 1);
1042
keyTimers[code] += dt;
1043
} else {
1044
keyTimers[code] += dt;
1045
if (keyTimers[code] > DAS_DELAY) {
1046
while (keyTimers[code] > DAS_DELAY + ARR_DELAY) {
1047
playerMove(code === 37 ? -1 : 1);
1048
keyTimers[code] -= ARR_DELAY;
1049
}
1050
}
1051
}
1052
} else {
1053
keyTimers[code] = 0;
1054
}
1055
});
1056
1057
if (keyState[40]) {
1058
if (keyTimers[40] === 0) {
1059
playerDrop();
1060
keyTimers[40] += dt;
1061
} else {
1062
keyTimers[40] += dt;
1063
if (keyTimers[40] > ARR_DELAY) {
1064
playerDrop();
1065
keyTimers[40] = 0;
1066
}
1067
}
1068
} else {
1069
keyTimers[40] = 0;
1070
}
1071
}
1072
1073
function startMove(code) { keyState[code] = true; }
1074
function stopMove(code) { keyState[code] = false; }
1075
function triggerInput(code) {
1076
const e = { keyCode: code, preventDefault: () => {} };
1077
document.dispatchEvent(new KeyboardEvent('keydown', e));
1078
}
1079
1080
function updateScore() {
1081
scoreElement.innerText = player.score;
1082
}
1083
1084
function startGame() {
1085
lastTime = 0; // ✅ 추가: 프레임 타이밍 초기화
1086
isPaused = true; // ✅ 추가: 혹시 돌고 있던 루프 잠깐 멈춤(중복 방지)
1087
document.body.classList.add('game-active');
1088
window.scrollTo(0, 0);
1089
1090
overlay.style.display = 'none';
1091
resultArea.classList.add('d-none');
1092
1093
bag = [];
1094
1095
arena.forEach(row => row.fill(0));
1096
player.score = 0;
1097
player.level = 1;
1098
player.holdType = null;
1099
player.nextType = null;
1100
player.lastMoveRotate = false;
1101
1102
dropInterval = 1000;
1103
lockTimer = 0;
1104
lockResets = 0;
1105
1106
stats = { startTime: Date.now(), playTime: 0, totalLines: 0, tetrisLines: 0, tspinLines: 0 };
1107
timerElement.innerText = "00:00";
1108
levelElement.innerText = "LV 1";
1109
1110
effects = [];
1111
updateScore();
1112
playerReset();
1113
isPaused = false;
1114
update();
1115
}
1116
1117
document.addEventListener('keydown', event => {
1118
if (isPaused) return;
1119
1120
if([32, 37, 38, 39, 40].includes(event.keyCode)) {
1121
event.preventDefault();
1122
}
1123
1124
if (event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 40) {
1125
if (!keyState[event.keyCode]) {
1126
keyState[event.keyCode] = true;
1127
keyTimers[event.keyCode] = 0;
1128
}
1129
}
1130
else if (event.keyCode === 38) { playerRotate(1); }
1131
else if (event.keyCode === 90) { playerRotate(-1); } // Z key
1132
else if (event.keyCode === 32) { playerHardDrop(); }
1133
else if (event.keyCode === 16 || event.keyCode === 67) { playerHold(); }
1134
});
1135
1136
document.addEventListener('keyup', event => {
1137
if (event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 40) {
1138
keyState[event.keyCode] = false;
1139
}
1140
});
1141
1142
document.addEventListener('keydown', (event) => {
1143
if (!ENABLE_HOLD_R_RESTART) return;
1144
1145
// R 키 (82)
1146
if (event.keyCode === 82) {
1147
event.preventDefault();
1148
1149
if (rIsHolding) return; // 키 반복 입력 방지
1150
rIsHolding = true;
1151
1152
// 일정 시간 유지되면 재시작
1153
rHoldTimer = setTimeout(() => {
1154
// 여전히 누르고 있다면 재시작
1155
if (rIsHolding) startGame();
1156
}, R_HOLD_MS);
1157
}
1158
});
1159
1160
document.addEventListener('keyup', (event) => {
1161
if (event.keyCode === 82) {
1162
rIsHolding = false;
1163
if (rHoldTimer) {
1164
clearTimeout(rHoldTimer);
1165
rHoldTimer = null;
1166
}
1167
}
1168
});
1169
</script>
1170
<script>if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js"); }</script>
1171
</body>
1172
</html>