-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMainMenu.html
102 lines (98 loc) · 4.22 KB
/
MainMenu.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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#"> <!-- 탭 아이콘 표시. 실행엔 문제없지만 오류창에 떠서 불편해서 없애기위해서 썼습니다... href: 사용할 이미지 경로-->
<meta charset="utf-8">
<title>GameMainMenu</title>
<style media="screen">
body{ /*body 배경색 이미지 지정 */
background-image: url("./Image/r_background.gif");
}
.body{ /* main body 세부 설정 */
width: 650px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -325px;
margin-top: -200px;
background-image: url("Image/r_background.gif");
background-repeat: no-repeat;
background-size:cover;
}
.select{ /* 게임 선택 블록 */
background-color: grey;
width: 400px;
height: 350px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
}
.select input{ /*input type 스타일 설정 */
margin: 20px;
width: 150px;
height: 50px;
}
#rule_button{ /*게임 룰 버튼*/
border-color: red;
border-width: 5px;
border-radius : 50px 50px 50px 50px;
background-color: ghostwhite;
font-style: italic;
font-weight: 1500;
}
#game1{ /*게임 버튼 */
border-color : red;
border-width : 5px;
border-radius : 50px 50px 50px 50px;
background-color: ghostwhite;
font-style: italic;
font-weight: 1500;
}
</style>
<script src = "User.js"></script> <!-- User.js를 들고온다. -->
<script>
function start(){
setTimeout(show_body,1000); // 1초 뒤 함수 실행
}
function show_body(){ // body id를 지닌 태그들은 display 스타일을 block으로 지정한다.
document.getElementById('body').style.display = "block";
setTimeout(show_select,1000); // 1초 뒤 함수 실행
}
function show_select(){ // select id를 지닌 태그들은 display 스타일을 block으로 지정한다.
document.getElementById('select').style.display = "block";
}
function loginSuccess() {
var id = document.querySelector('#id'); // id가 id인 태그 입력칸에 입력된 값을 가져온다.
var pw = document.querySelector('#pw'); // pw가 pw인 태그 입력칸에 입력된 값을 가져온다.
console.log(id);
console.log(pw);
if(id.value == "" || pw.value == "") { // id와 pw값중 하나 혹은 모두가 값이 비워져잇다면 로그인을 할 수 없다.
alert("로그인을 할 수 없습니다.")
}
else { // id와 pw값이 모두 입력되어있다면 login id 속성을 가진 요소를 찾아서 zIndex 값을 -1000으로 입력해 우선순위를 맨 뒤로 배치시킨다.
document.getElementById('login').style.zIndex = -1000;
}
}
</script>
</head>
<body onload="start()"> <!--start 함수 자동 실행 start함수에서 body함수를 실행하게되고 body함수에서 select를 실행시켜준다. -->
<div class="body" id="body" style="display:none;">
<div class="select" id="select" align="center" style="display:none;">
<div class ="select" align="center" id="login" >
<form name="login" method = "get" style = "position:absolute"> <!-- form태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 input 태그 등이 사용됩니다.-->
사용자 ID : <input id="id" type = "text" size = "15" value = "" />
<br>
비밀 번호 : <input id="pw" type="password" size = "15" value ="" />
<input type="button" value="완료" onClick="loginSuccess()"/> <!-- 클릭시 loginSuccess()함수를 실행.-->
<a href = "Join.html" ><input type = "button" value="회원가입"></a> <!-- 회원가입 창으로 이동한다 -->
</form>
</div> <!-- 버튼에 마우스를 올리면 포인터모드가되고 클릭시 각각 지정된 하이퍼링크로 이동하게된다. -->
<input style = "cursor: pointer" type="button" id="game1" name="" value="게임 시작" onClick="location.href= 'index.html'"><br>
<input style = "cursor: pointer" type="button" id="rule_button" name="" value="게임 규칙" onclick ="location.href='GameRule.html'">
</div>
</div>
</body>
</html>