Tic Tac Toe
3x3의 3목게임을 만들어 보려고 한다.
이번에는mark up을 하는게 아닌dom객체를 이용하여 tag들을 자바스크립트 코드로 하나하나 다 만들어 추가해보려고 한다.
1. MockUp
HTML의 요소를 자바스크립트로 만들고 추가하기전에 하드코딩으로 목업 데이터를 먼저 만들어 주었다.
<!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">
<script src="./main.js" defer></script>
<title>Tic Tac Toe!</title>
<style>
td {
border: 1px solid black;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>2. 자바스크립트로 태그 및 2차원 배열 생성
목업한 태그들을 자바스크립트 코드로 생성하였고,
3x3 판을 자바스크립트로 구현하기위해 2차원배열을 만들었다.
// 브라우저에 3x3 테이블 만들기위한 태그
let table = document.createElement('table');
// 자바스크립트에서 3x3의 데이터자료를 구현하기위한 2차원 배열
let tictactoe = [];
// init => table, tr, td를 만들어 화면에 표시하고, 2차원배열에 tr추가하기
(() => {
for (let i = 0; i < 3; i++) {
let row = document.createElement('tr');
let rowArray = [];
for (let j = 0; j < 3; j++) {
let coloum = document.createElement('td');
rowArray.push(coloum);
row.append(coloum);
}
tictactoe.push(rowArray);
table.append(row);
}
document.body.append(table);
})();
console.log(tictactoe);
Web Developer