42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html
|
||
|
|
xmlns:th="http://www.thymeleaf.org"
|
||
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||
|
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
||
|
|
layout:decorate="~{layout/default_layout}"
|
||
|
|
>
|
||
|
|
<th:block layout:fragment="head" id="head">
|
||
|
|
<script type="text/javascript" th:src="@{/js/2048.js}"></script>
|
||
|
|
<!-- <link th:href="@{/css/puzzle.css}" rel="stylesheet" />-->
|
||
|
|
<link th:href="@{/css/2048.css}" rel="stylesheet" />
|
||
|
|
|
||
|
|
<script th:inline="javascript">
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" th:src="@{/js/user.js}"></script>
|
||
|
|
</th:block >
|
||
|
|
<th:block layout:fragment="content">
|
||
|
|
<h1>2048</h1>
|
||
|
|
<p>화살표를 터치하거나 키보드 방향키를 이용해 타일을 합쳐보세요!</p>
|
||
|
|
<div class="game-container">
|
||
|
|
<div class="score-container">
|
||
|
|
<strong>점수:</strong> <span id="score">0</span>
|
||
|
|
</div>
|
||
|
|
<div id="game-board"></div>
|
||
|
|
|
||
|
|
<div id="game-over-popup" class="popup-container" style="display:none;">
|
||
|
|
<div class="popup">
|
||
|
|
<h2>게임 오버!</h2>
|
||
|
|
<p>최종 점수: <span id="final-score">0</span></p>
|
||
|
|
<input type="text" id="player-name" placeholder="이름을 입력하세요">
|
||
|
|
<button id="save-score">점수 저장</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ranking-container">
|
||
|
|
<h3>🏆 랭킹</h3>
|
||
|
|
<ol id="ranking-list"></ol>
|
||
|
|
</div>
|
||
|
|
</th:block>
|
||
|
|
</html>
|