반응형
이 번 회차에서는 CSS를 포함해서 전체적인 HTML코드를 작성해 보겠습니다.
HTML body 작성
이전 회차에서 설계한 내용을 기준으로 HTML의 body를 각 영역별로 작성합니다.
canvas 영역
canvas 영역은 오목판을 그리기 위한 영역이므로 오목판 격자수와 격자의 길이를 대략 정해서 전체 사이즈를 지정해 줍니다.
- 15*15인 경우 가로 세로 14개, 19*19인 경우 18개의 정사각형을 그려주면 각각 15*15, 19*19의 격자무늬 오목판이 생성됩니다.
- 오목판 주위의 여백을 고려하여 대략 아래와 같이 사이즈를 지정해 줍니다. canvas사이즈는 개발하면서 조금씩 조정해 가면 됩니다.
<canvas class="canvas" width="608" height="638">
<!-- 오목판과 오목알은 자바스크립트에서 직접 그려줌 -->
</canvas>
오목판 사이즈 선택 영역
이 영역은 게임 오목판의 사이즈를 선택하기 위한 영역으로 15*15와 19*19 중 하나를 선택할 수 있도록 해 줍니다.
- 초기 실행 시 디폴트로 15*15이 선택되도록 하기 위해 checked 속성을 추가해 줍니다.
<div class="boardsize">
<span>오목판 사이즈</span>
<input type="radio" name="boardsize" id="size15" checked>
<label for="size15">15*15</label>
<input type="radio" name="boardsize" id="size19">
<label for="size19">19*19</label>
</div>
게임 상대 선택 영역
이 영역은 게임의 상대를 사람과 컴퓨터 중에 선택하는 영역으로 선택된 이후 상대 선수에 따라 처리 로직이 달라지게 됩니다.
- 초기 실행 시 디폴트로 컴퓨터가 선택되도록 하기 위해 checked 속성을 추가해 줍니다.
<div class="playertype">
<span>상대</span>
<input type="radio" name="playertype" id="human">
<label for="human">사람</label>
<input type="radio" name="playertype" id="com" checked>
<label for="com">컴퓨터</label>
</div>
흑 선수 선택 영역
이 영역은 게임의 상대를 컴퓨터로 선택한 경우 사람과 컴퓨터 중 선수(흑)를 잡을 대상을 선택하는 영역으로 선택된 이후 상대 선수에 따라 처리 로직이 달라지게 됩니다.
- 이 영역은 상대를 컴퓨터로 선택한 경우에만 의미가 있기 때문에 사람으로 선택한 경우는 hidden처리하고 컴퓨터를 선택한 경우에만 보이도록 구현합니다. hidden처리하지 않고 disable로 처리해도 됩니다.
- 초기 실행 시 디폴트로 사람이 선택되도록 하기 위해 checked 속성을 추가해 줍니다.
<div class="firstplayer">
<span>흑 선수</span>
<input type="radio" name="firstplayer" id="humanfirst" checked>
<label for="humanfirst">사람</label>
<input type="radio" name="firstplayer" id="comfirst">
<label for="comfirst">컴퓨터</label>
</div>
기능 버튼 영역
이 영역은 게임의 진행을 위한 버튼을 배치하는 영역으로 (재)시작 버튼과 무르기 버튼을 구현해 줍니다.
- 기능 버튼들은 게임 진행상태에 따라 enable/disable의 제어 또는 처리가 필요하기 때문에 추가 class를 지정해 줍니다.
<div class="button-area">
<button class="button start">(재)시작</button>
<button class="button undo">무르기</button>
</div>
전체 HTML body 소스
위에서 설명한 내용을 기준으로 전체 body 부분의 소스를 아래와 같이 작성합니다.
<body>
<div class="container">
<div class="main-board">
<canvas class="canvas" width="608" height="638">
</canvas>
</div>
<div class="controlcenter">
<div class="boardsize">
<span>오목판 사이즈 </span>
<input type="radio" name="boardsize" id="size15" checked>
<label for="size15">15*15</label>
<input type="radio" name="boardsize" id="size19">
<label for="size19">19*19</label>
</div>
<div class="playertype">
<span>상대</span>
<input type="radio" name="playertype" id="human">
<label for="human">사람</label>
<input type="radio" name="playertype" id="com" checked>
<label for="com">컴퓨터</label>
</div>
<div class="firstplayer">
<span>흑 선수</span>
<input type="radio" name="firstplayer" id="humanfirst" checked>
<label for="humanfirst">사람</label>
<input type="radio" name="firstplayer" id="comfirst">
<label for="comfirst">컴퓨터</label>
</div>
</div>
<div class="button-area">
<button class="button start">(재)시작</button>
<button class="button undo">무르기</button>
</div>
</div>
</body>
반응형
CSS 작성
style sheet는 HTML에서 작성한 class 기준으로 아래와 같이 작성합니다. css는 디자인 영역이므로 각자 취향에 맞게 작성하면 됩니다.
*{
margin: 0;
padding: 0;
}
.canvas{
border: 1px solid black;
background: burlywood;
}
.pattern {
display: flex;
flex-direction: column;
}
.controlcenter {
display:flex;
align-items: center;
font-size: 12px;
width: 608px;
}
span {
font-weight: bold;
}
.boardsize, .playertype ,.firstplayer {
margin-left: 10px;
padding: 5px;
}
.button-area{
display: flex;
align-items: center;
justify-content: center;
width: 608px;
}
.button {
background: cornflowerblue;
border: none;
font-size: 12px;
color: white;
padding: 5px;
margin: 3px;
width: 100px;
border-radius: 5px;
}
CSS를 포함한 HTML 소스
CSS까지 포함한 전체 HTML 코드입니다. 앞으로 이 소스를 바탕으로 자바스크립트 코드를 반영할 예정입니다.
CSS파일은 같은 경로에 style.css로 별도 생성합니다.
<!DOCTYPE html>
<html lang="en">
<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>Omok</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main-board">
<canvas class="canvas" width="608" height="638">
</canvas>
</div>
<div class="controlcenter">
<div class="boardsize">
<span>오목판 사이즈</span>
<input type="radio" name="boardsize" id="size15" checked>
<label for="size15">15*15</label>
<input type="radio" name="boardsize" id="size19">
<label for="size19">19*19</label>
</div>
<div class="playertype">
<span>상대</span>
<input type="radio" name="playertype" id="human">
<label for="human">Human</label>
<input type="radio" name="playertype" id="com" checked>
<label for="com">Computer</label>
</div>
<div class="firstplayer">
<span>흑 선수</span>
<input type="radio" name="firstplayer" id="humanfirst" checked>
<label for="humanfirst">Human</label>
<input type="radio" name="firstplayer" id="comfirst">
<label for="comfirst">Computer</label>
</div>
</div>
<div class="button-area">
<button class="button start">(재)시작</button>
<button class="button undo">무르기</button>
</div>
</div>
</body>
</html>
크롬브라우저에 열면 아래와 같이 실행되는 것을 확인할 수 있습니다.
오목판은 스크립트에서 직접 그려질 예정이기 때문에 canvas는 공백으로 보여집니다.
반응형
'개발노트 > 오목게임_자바스크립트(Javascript)' 카테고리의 다른 글
| 자바스크립트 오목 게임 개발 #6 (0) | 2023.01.21 |
|---|---|
| 자바스크립트 오목 게임 개발 #5 (0) | 2023.01.20 |
| 자바스크립트 오목 게임 개발 #3 (0) | 2023.01.20 |
| 자바스크립트 오목 게임 개발 #1 (0) | 2023.01.19 |
| 자바스크립트 오목 게임 개발 #2 (0) | 2023.01.19 |
댓글