<!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"
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 id="name1">0</span>
</button>
<button
type="button"
class="btn btn-danger w-100 d-flex justify-content-between"
>
<span id="name2">0</span>
Name2
</button>
</div>
</div>
</div>
<div class="row p-3">
<button
type="button"
class="btn btn-info"
onclick="TicTacToe.rematch()"
>
Rematch
</button>
<button
type="button"
class="btn btn-info"
onclick="TicTacToe.reset()"
>
Reset
</button>
<span id="message"></span>
</div>
<!-- First Row-->
<div class="row" style="height: 100px">
<div class="col-4 border" onclick="TicTacToe.click(0)">
<div class="text-center" id="0"></div>
</div>
<div class="col-4 border" onclick="TicTacToe.click(1)">
<div class="text-center" id="1"></div>
</div>
<div class="col-4 border" onclick="TicTacToe.click(2)">
<div class="text-center" id="2"></div>
</div>
</div>
<!-- Second Row -->
<div class="row" style="height: 100px">
<div class="col-4 border" onclick="TicTacToe.click(3)">
<div class="text-center" id="3"></div>
</div>
<div class="col-4 border" onclick="TicTacToe.click(4)">
<div class="text-center" id="4"></div>
</div>
<div class="col-4 border" onclick="TicTacToe.click(5)">
<div class="text-center" id="5"></div>
</div>
</div>
<!-- Third Row -->
<div class="row" style="height: 100px">
<div class="col-4 border" onclick="TicTacToe.click(6)">
<div class="text-center" id="6"></div>
</div>
<div class="col-4 border" onclick="TicTacToe.click(7)">
<div class="text-center" id="7"></div>
</div>
<div class="col-4 border" onclick="TicTacToe.click(8)">
<div class="text-center" id="8"></div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script src="./assets/js/main.js"></script>
</html>
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);
var user1_score = document.getElementById("name1").innerHTML;
var user2_score = document.getElementById("name2").innerHTML;
console.log("user1_score", user1_score);
console.log("user2_score", user2_score);
if (marker == "X") {
user1_score++;
document.getElementById("name1").innerHTML = user1_score;
} else if (marker == "O") {
user2_score++;
document.getElementById("name2").innerHTML = user2_score;
}
_playable = false;
}
});
if (_playable && _count == 9) {
_setMessage("Draw");
_playable = false;
}
}
function _rematch() {
_playable = true;
_count = 0;
_block = ["", "", "", "", "", "", "", "", ""];
for (var i = 0; i < 9; i++) {
document.getElementById(i).innerHTML = "";
}
}
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];
//글자 가운데 처리 안되어서 사이즈를 늘림.
document.getElementById(index).style.fontSize = "4em";
_count++;
//5번이상 클릭시 결과가 나옴.
if (_count >= 5) {
_getResult(_block[index]);
}
} else {
_setMessage("have clicked block");
}
},
rematch: function () {
_setMessage("rematch start");
_rematch();
},
reset: function () {
_setMessage("reset start");
_rematch();
document.getElementById("name1").innerHTML = 0;
document.getElementById("name2").innerHTML = 0;
},
};
})();
TicTacToe.init();
점수표기 추가
O,X 부트스트랩으로 정가운데 정렬이 힘들어서
텍스트만 center로 놓고 크기를 늘려서 칸을 조절
상단의 점수판 변함.
Rematch Reset 버튼 추가.
'dev' 카테고리의 다른 글
| [Dev스터디 6일차] 틱택톡 만들어보기 (동기화) (0) | 2020.10.06 |
|---|---|
| 비쥬얼스튜디오 코드 설정 동기화 (0) | 2020.09.24 |
| [Dev스터디 4일차] 틱택톡 만들어보기 (소스 분리) (0) | 2020.09.14 |
| [dev 스터디 3일차] 틱택톡 만들어보기 (jquery 사용) (0) | 2020.09.11 |
| [dev 스터디 2일차] 틱택톡 만들어보기 (jquery 사용) (0) | 2020.09.10 |