웹브라우저에서 동작하는 오목게임입니다. JS의 기본적인 동작을 파악하기 쉽도록 제작하였습니다. 감사합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.board .row > div {
width: 20px;
height: 20px;
border: 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<div id="board" class="board"></div>
<button onclick="resetBoard()">게임 초기화</button>
</body>
</html>
<script>
let board = [];
const BOARD_SIZE = 15;
let currentPlayer = "X";
// 게임판 초기화
function resetBoard() {
board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(""));
currentPlayer = "X";
drawBoard();
}
// 게임판 그리기
function drawBoard() {
const boardElement = document.getElementById("board");
boardElement.innerHTML = '';
for (let i = 0; i < BOARD_SIZE; i++) {
const rowElement = document.createElement("div");
rowElement.className = "row";
for (let j = 0; j < BOARD_SIZE; j++) {
const cellElement = document.createElement("div");
cellElement.textContent = board[i][j];
cellElement.addEventListener("click", () => makeMove(i, j));
rowElement.appendChild(cellElement);
}
boardElement.appendChild(rowElement);
}
}
// 움직임 처리
function makeMove(i, j) {
if (board[i][j] !== "") return; // 이미 말이 놓인 칸에는 놓을 수 없음
board[i][j] = currentPlayer;
if (checkWin(i, j)) {
alert(`Player ${currentPlayer} wins!`);
resetBoard();
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X"; // 플레이어 바꾸기
drawBoard();
}
// 승리 조건 체크
function checkWin(i, j) {
// 가로, 세로, 대각선 방향에 대해 5개의 연속된 돌이 놓였는지 체크
// 실제 게임에서는 이 부분의 로직이 더 복잡할 수 있음
return (
checkLine(i, j, -1, 0) || // 가로 체크
checkLine(i, j, 0, -1) || // 세로 체크
checkLine(i, j, -1, -1) || // 대각선 체크
checkLine(i, j, -1, 1) // 반대편 대각선 체크
);
}
function checkLine(row, col, dRow, dCol) {
let count = 0;
for (let i = -4; i <= 4; i++) {
let r = row + i * dRow;
let c = col + i * dCol;
if (r >= 0 && r < BOARD_SIZE && c >= 0 && c < BOARD_SIZE && board[r][c] === currentPlayer) {
if (++count === 5) return true;
} else {
count = 0;
}
}
return false;
}
resetBoard(); // 게임 시작
</script>
'JavaScript' 카테고리의 다른 글
| [JavaScript] SweetAlert2 라이브러리로 팝업창 만들기 (0) | 2023.09.05 |
|---|---|
| [javascript] setTimeout()사용하여 타이핑 효과 주기 (0) | 2023.09.01 |
| [JavaScript] 폼 요소 이벤트 정리 및 예제 (0) | 2023.08.27 |
| [JavaScript] Canvas로 클릭 이벤트를 받아 애니메이션 만들기(+루프) (0) | 2023.08.22 |
| [Javascript] localStorage를 활용한 메모 애플리케이션 (0) | 2023.08.13 |
