-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame-bac.html
168 lines (160 loc) · 7.75 KB
/
game-bac.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game World : 숫자 야구</title>
<meta name="description" content="Vanilla JS를 이용한 Mini Game Project - 숫자 야구">
<link rel="icon" type="image/x-ico" href="./resources/favicon/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/common/styles.css">
<link rel="stylesheet" href="./css/game-bac.css">
</head>
<body>
<div id="container" class="no-drag">
<div class="board">
<header class="menu">
<nav class="menu__nav">
<div class="menu__nav-info">
<div class="menu__nav-info--button" id="info-button">
<span class="sr-only">게임 규칙</span>
</div>
</div>
<div class="menu__nav-restart">
<div class="menu__nav-restart--button" id="restart-button">
<span class="sr-only">게임 재시작</span>
</div>
</div>
<div class="menu__nav-home">
<a href="./index.html#bulls-and-cows" class="menu__nav-home--button" id="home-button">
<span class="sr-only">메인 페이지로 이동</span>
</a>
</div>
</nav>
</header>
<main class="game">
<div class="ground">
<div class="ground__record">
<table class="ground__record--table">
<thead>
<tr>
<th scope="col">
<span class="sr-only">회차</span>
</th>
<th scope="col" colspan="2">SCORE BOARD</th>
</tr>
</thead>
<tbody id="record-list">
<tr>
<th scope="row">1회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">2회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">3회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">4회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">5회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">6회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">7회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">8회</th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">9회</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="ground__bat">
<form action="#" method="get" id="bat-form" name="bat-form" class="ground__bat--form" autocomplete="off">
<div class="form__input-wrapper">
<input type="text" id="num1" name="num1" class="form__input" maxlength="1" inputmode="numeric" autofocus />
<input type="text" id="num2" name="num2" class="form__input" maxlength="1" inputmode="numeric" />
<input type="text" id="num3" name="num3" class="form__input" maxlength="1" inputmode="numeric" />
<input type="text" id="num4" name="num4" class="form__input" maxlength="1" inputmode="numeric" />
</div>
<button type="button" class="white-button form__button" id="bat-form-button" onclick="checkInput();">
확인
</button>
</form>
</div>
</div>
</main>
</div>
<div class="modal modal-layer info-modal" id="info-modal">
<div class="modal__content">
<div class="modal__content-title">
<h1 class="color-blue">숫자 야구 규칙</h1>
</div>
<div class="modal__content-desc">
<h2 class="modal__content-desc--main">감춰진 4자리 숫자를 맞춰보세요!</h2>
<ul class="modal__content-desc--list">
<li class="test">
감춰진 4자리 숫자를 9회 안에 모두 맞춰야 성공!
<li>
숫자는 0~9까지의 범위로 되어 있으며, 첫 번째 숫자가 0일 수도 있습니다.
</li>
<li>
각 숫자는 한 번씩만 사용할 수 있습니다.
</li>
<li>
숫자와 위치가 맞으면 스트라이크, 숫자만 맞으면 볼
</li>
<li>
숫자가 하나도 맞지 않으면 아웃
</li>
<li>
게임 재시작을 원할 때는 홈 버튼 왼쪽의 재시작 버튼을 눌러주세요.
</li>
</ul>
</div>
<button class="white-button modal__content-close-button" id="info-modal-close-button" type="button">
닫기
</button>
</div>
</div>
<div class="modal modal-layer alert-modal" id="alert-modal">
<div class="modal__content">
<div class="modal__content-title" id="alert-modal-title">
</div>
<button class="white-button modal__content-close-button" id="alert-modal-close-button" type="button">
닫기
</button>
</div>
</div>
<div class="game-result"></div>
</div>
<script src="./js/game-bac.js"></script>
</body>
</html>