-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (81 loc) · 5.1 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
<!DOCTYPE html> <! Doctype은 Document Type의 줄임말이다. 이 웹 페이지가 사용하는 HTML 버전을 알려주는 역할을 함. 항상 HTML 파일의 최상단에 위치해야함>
<html> <! 전체 html 문서를 감싸는 태그 /html로 닫힘 >
<head> <! html 문서에 대한 정보를 나타내는 부분. 하나만 존재, html 바로 아래에 있어야 함. /head로 닫힘, style 이런 것을 정의 할 수 있음.>
<link rel="shortcut icon" href="#">
<meta charset = "utf-8" /> <! 문서에 대한 설명을 표시. 사람에게 보이지 않고 브라우저만 읽을 수 있음. 속성으로 charset = "utf-8"이라고 한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 알림. 이 부분이 있어야 한글이 깨지지 않음.>
<title>Star Trek</title> <! head 안에 들어가는 태그로 제목 표시줄의 내용을 나타냄. title 제목>
<link type="text/css" rel="stylesheet" href="style.css"> <!-- 외부 style.css를 가져온다. -->
<style>
body { /* body태그의 배경색은 mistyrose로 설정하고 글체를 설정한다. 텍스트는 그림자를 가진다. */
background-color : mistyrose;
font-family: "Times New Roman", Serif;
text-shadow : 3px 3px 5px skyBlue;
}
h3 { /* h3태그의 요소색은 grey고 텍스트 위치는 중앙이다. */
color : grey;
text-align : center;
} /* hr태그는 제목과 게임부분을 가르기위한 수평선이며 3px에 실선 하얀색으로 설정하였다.*/
hr {border : 3px solid white; }
.r1 { /* 메인 메뉴버튼을 위한 스타일이다. 우선순위를 -1에다가둠. 캔버스 뒤에 배치 포지션을 absolute로 하여 겹쳐짐이 허용 */
z-index :-1;
height: 20%;
width: 20%;
position: absolute;
top: 40%;
left: 40%;
border: 1px solid #669966;
background-color: white;
margin: 0px 50px 0px 50px;
text-align: center;
border-radius: 50px 50px 50px 50px;
border-color : red;
border-width : 5px;
background-color: ghostwhite;
font-style: italic;
font-weight: 900;
}
.r2 { /* 업그레이드 버튼을 위한 스타일이다. 우선순위를 -1에다가둠. 캔버스 뒤에 배치 포지션을 absolute로 하여 겹쳐짐이 허용 */
z-index :-1;
height: 10%;
width: 10%;
position: absolute;
top: 50%;
border: 1px solid #669966;
background-color: white;
margin: 0px 50px 0px 50px;
text-align: center;
border-radius: 50px 50px 50px 50px;
border-color : red;
border-width : 5px;
background-color: ghostwhite;
font-style: italic;
font-weight: 900;
}
</style>
</head>
<body style = "overflow-y:hidden"> <! html 문서에서 실질적으로 보여지는 부분을 나타냄. 하나만 존재. html 바로 아래, head 다음에 위치 overflow-y:hidden은 요소가 초과하게되면 숨겨서 세로 스크롤바를 없앰. >
<h3>Star Trek v0.1</h3> <! h3 body 안에서 제목을 표시하는 태그, 중요도에 따라 h1~ h6까지 있음. >
<hr>
<header class = "header" style = "color: blue; text-align: center; "> <!--요소의 색을 blue로하고 텍스트값 위치를 중앙으로 설정.-->
<div style = "font-size: 30px">※ 이게임은 모두가 이용할 수 있는 전체이용가 수준의 게임입니다. 재밌게 즐겨주세요. ※</div></header> <!-- 글자 크기를 30px으로 설정 -->
<header class = "leftScreen">
</header>
<header class = "rightScreen">
<canvas id="gameStatusRight" width = "130" height = "320" ></canvas>
<script src = "GameStatusRight.js"></script> <!-- rightScreen을 지니는 클래스 헤더에서 캔버스 gameStatusRight를 지니고 GameStatusRight.js를 불러와 적용시킨다. -->
</header>
<header class = "section"> <!-- section클래스 헤더는 우리가 실제로 플레이할 게임이 나오는 화면이다. 밑의 버튼들은 업그레이드, 메인메뉴로 돌아가는 버튼이고 캔버스 뒤에 요소를 배치해두었다.-->
<button id = "atkUP" class = "r2" type="button" style = "left:50%">공격업</button>
<button id = "atkCUP" class = "r2" type="button" style = "left:25%">공격횟수업</button>
<button id = "atkHP" class = "r2" type="button" style = "left:75%">체력업</button>
<button id = "mainMenu" class ="r1" type="button" onclick="location.href='MainMenu.html'">메인메뉴로 돌아가기</button>
<!-- gameCanvas로 캔버스를 설정해주었다. 게임창을 구별해주기위해 선을 실선으로 크기를 5px 하얀색으로 설정.-->
<canvas id="gameCanvas" width="520" height="700" style = "border: solid 5px white">
</canvas> <! camvas id를 gameCanvas로 설정하여 canvas를 참조할 수 있음. 캔버스 너비 480, 높이 320 으로 설정>
<progress id = "scoreGauge" value="0" max="100" style = "width:100%"></progress> <!-- progress는 score에 따른 점수를 게이지로 표현해놓았고 해당 게이지는 경험치바로 봐도 좋다. -->
<script src = "GameCanvas.js"> <!-- GameCanvas.js를 들고온다.-->
</script>
</header>
<header class = "footer" style = "color:blue"></header>
</body>
</html>