기존에 있던 형태를
CSS, Js,html로 분류하였다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/main.css">
<title>TicTacToe</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="btn-group d-flex mt-4">
<button type="button" class="btn btn-primary w-100 d-flex justify-content-between">
Name1
<span class="">0</span>
</button>
<button type="button" class="btn btn-danger w-100 d-flex justify-content-between">
<span class="">0</span>
Name2
</button>
</div>
</div>
</div>
<div class="row p-3">
<span id="message"></span>
<button type="button" class="btn btn-info" onclick="TicTacToe.reset()">Reset</button>
</div>
<div class="row p-3">
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(0)"><div id="0"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(1)"><div id="1"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(2)"><div id="2"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(3)"><div id="3"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(4)"><div id="4"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(5)"><div id="5"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(6)"><div id="6"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(7)"><div id="7"></div></div>
<div class="col-4 border" style="height: 100px;" onclick="TicTacToe.click(8)"><div id="8"></div></div>
</div>
</div>
</body>
<!-- 기존 제이쿼리 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<!-- 노드 JS를 위한 라이브러리 -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<!-- 부트스트랩 추가 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- 반복문 처리를 위한 Lodash 라이브러리 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<!-- 작성한 Javascripty -->
<script src="./assets/js/main.js"></script>
</html>
먼저 html 구조이다.
일단 기존의것을 바꾸기 위해서
Lodash Documentation
_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti
lodash.com
반복문 처리를 위한 라이브러리 추가.
부트스트랩 추가.
getbootstrap.com/docs/4.5/layout/overview/
Overview
Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
getbootstrap.com
추후에 처리를 위한 NodeJs 관련 라이브러리도 추가.
table, th, td { border: 1px solid black}
.fix_td {width:100px; height: 50px;}일단 만들어놓은 CSS인데 부트스트랩 쓰면서 사용안할듯.
var TicTacToe = (function () {
var _init = false;
var _playable = true;
var _count = 0;
var _block = ["", "", "", "", "", "", "", "", ""];
var _successCondition = [
//틱택토 게임 성공의 경우의 수.
["0", "1", "2"],
["3", "4", "5"],
["6", "7", "8"],
["0", "3", "6"],
["1", "4", "7"],
["2", "5", "8"],
["0", "4", "8"],
["2", "4", "6"],
];
function _getMarker() {
//처음 시작시 X,O 표시
return _count == 0 || _count % 2 == 0 ? "X" : "O";
}
function _setMessage(message) {
document.getElementById("message").innerHTML = message;
}
function _getResult(marker) {
var markeredIndex = _.compact(
_.map(_block, function (value, index) {
return value == marker ? index.toString() : "";
})
);
var checkNumber = Math.abs(3 - markeredIndex.length);
_.map(_successCondition, function (condition) {
if (_.xor(condition, markeredIndex).length == checkNumber) {
_setMessage("Winner is " + marker);
_playable = false;
}
});
if (_playable && _count == 9) {
_setMessage("Draw");
_playable = false;
}
}
return {
init: function () {
if (_init) {
return false;
}
_init = true;
},
click: function (index) {
if (!_playable) {
return false;
}
_setMessage("");
if (!_block[index].length) {
_block[index] = _getMarker();
document.getElementById(index).innerHTML = _block[index];
_count++;
if (_count >= 5) {
_getResult(_block[index]);
}
} else {
_setMessage("have clicked block");
}
},
reset: function () {
_setMessage("new game start");
_playable = true;
_count = 0;
_block = ["", "", "", "", "", "", "", "", ""];
for (var i = 0; i < 9; i++) {
document.getElementById(i).innerHTML = "";
}
},
};
})();
TicTacToe.init();
- 제이쿼리 문법을 걷어냄
- table id로 if문 주던 로직을 _successCondition 변수선언하여 모든경우의 수를 추가.
- 메세지 관련 함수 추가
- 모든 기능을 function으로 나누었으며 Lodash 라이브러리 사용하여 for문을 간략하게 나누어서 처리하였다.
부트스트랩 좀더 손보고.
Node 공부좀 해봐야지
좀더 함수화 하는 방법으로 코딩방법을 개선해봐야지.
완성된것을 보면 정말 쉬워보이는데 막상하려면 진짜 어렵네. ㅠㅠ
'dev' 카테고리의 다른 글
| 비쥬얼스튜디오 코드 설정 동기화 (0) | 2020.09.24 |
|---|---|
| [Dev스터디 5일차] 틱택톡 만들어보기 (개선1) (0) | 2020.09.18 |
| [dev 스터디 3일차] 틱택톡 만들어보기 (jquery 사용) (0) | 2020.09.11 |
| [dev 스터디 2일차] 틱택톡 만들어보기 (jquery 사용) (0) | 2020.09.10 |
| [dev 스터디 1일차] 개발환경 구축 (0) | 2020.09.08 |