[기능별 페이지] 게임

물론입니다. 각 파일의 코드와 기능에 대해 설명드리겠습니다.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <!-- 기존 header 내용 -->
    </header>
    <main>
        <div class="game-container">
            <div class="controls">
                <button id="startButton">Start Game</button>
                <button id="resetButton">Reset Game</button>
            </div>
            <div class="board" id="board">
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
                <div class="cell" data-cell></div>
            </div>
        </div>
    </main>
    <footer>
        <!-- 기존 footer 내용 -->
    </footer>
    <script src="script.js"></script>
</body>
</html>

설명

DOCTYPE 선언 및 HTML 기본 구조: HTML5 문서를 선언하고, html, head, body 태그로 구성합니다.
헤더와 푸터: 기존에 있는 header와 footer 부분을 유지합니다.
main 태그: 게임을 감싸는 컨테이너가 main 태그 내에 있습니다.
game-container: 게임과 컨트롤 버튼을 포함하는 div입니다.
controls: 게임 시작과 리셋 버튼을 포함하는 div입니다.
board: 틱택토 게임 보드를 나타내는 div입니다.
셀들: 각 셀은 data-cell 속성을 가지며, 틱택토 게임의 각 칸을 나타냅니다.
script 태그: script.js 파일을 불러옵니다.

CSS (styles.css)

/* 전체 스타일 설정 */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

/* main 태그 스타일 설정 */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 20px;
}

/* 게임 컨테이너 스타일 설정 */
.game-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

/* 버튼 스타일 설정 */
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #6200ea;
    color: white;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #3700b3;
}

/* 보드 스타일 설정 */
.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 5px;
    margin-top: 20px;
}

/* 셀 스타일 설정 */
.cell {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* X와 O의 스타일 설정 */
.cell.x {
    color: #6200ea;
}

.cell.o {
    color: #03dac6;
}

.cell:hover {
    background-color: #f1f1f1;
}

설명

body 스타일: 전체 페이지의 기본 스타일을 설정합니다. Flexbox를 사용해 콘텐츠를 가운데 정렬하고, 배경색을 설정합니다.
main 태그 스타일: Flexbox를 사용해 main 태그의 콘텐츠를 중앙에 배치합니다.
게임 컨테이너 스타일: 게임 영역에 배경색, 테두리 반경, 그림자, 패딩을 추가해 스타일을 설정합니다.
버튼 스타일: 버튼에 패딩, 폰트 크기, 커서 스타일, 마진, 배경색, 글자 색상, 테두리 반경, 그리고 호버 효과를 설정합니다.
보드 스타일: 3x3 그리드를 사용하여 틱택토 보드의 스타일을 설정합니다.
셀 스타일: 각 셀의 크기, 테두리, 중앙 정렬, 폰트 크기, 커서 스타일, 사용자 선택 금지, 그리고 배경색 및 글자색 전환 효과를 설정합니다.
X와 O의 색상: x 클래스와 o 클래스에 각각 다른 색상을 적용합니다.
셀 호버 효과: 셀에 마우스를 올렸을 때 배경색이 변경되도록 설정합니다.

JavaScript (script.js)

// X와 O를 나타내는 클래스 이름
const X_CLASS = 'x';
const O_CLASS = 'o';

// 승리 조건을 나타내는 배열
const WINNING_COMBINATIONS = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

// 셀 요소와 보드 요소를 가져옴
const cellElements = document.querySelectorAll('[data-cell]');
const board = document.getElementById('board');
const startButton = document.getElementById('startButton');
const resetButton = document.getElementById('resetButton');

// O의 턴을 나타내는 변수
let oTurn;

// 게임 시작 버튼 클릭 이벤트 설정
startButton.addEventListener('click', startGame);

// 게임 리셋 버튼 클릭 이벤트 설정
resetButton.addEventListener('click', resetGame);

// 게임을 시작하는 함수
function startGame() {
    oTurn = false;
    cellElements.forEach(cell => {
        cell.classList.remove(X_CLASS);
        cell.classList.remove(O_CLASS);
        cell.innerText = '';
        cell.addEventListener('click', handleClick, { once: true });
    });
}

// 게임을 리셋하는 함수
function resetGame() {
    cellElements.forEach(cell => {
        cell.classList.remove(X_CLASS);
        cell.classList.remove(O_CLASS);
        cell.innerText = '';
        cell.removeEventListener('click', handleClick);
    });
}

// 클릭 이벤트 핸들러
function handleClick(e) {
    const cell = e.target;
    const currentClass = oTurn ? O_CLASS : X_CLASS;
    placeMark(cell, currentClass);
    if (checkWin(currentClass)) {
        setTimeout(() => {
            alert(`${currentClass.toUpperCase()} wins!`);
            resetGame();
        }, 100);
    } else if (isDraw()) {
        setTimeout(() => {
            alert('Draw!');
            resetGame();
        }, 100);
    } else {
        swapTurns();
    }
}

// 셀에 마크를 표시하는 함수
function placeMark(cell, currentClass) {
    cell.classList.add(currentClass);
    cell.innerText = currentClass.toUpperCase();
}

// 턴을 교체하는 함수
function swapTurns() {
    oTurn = !oTurn;
}

// 현재 클래스가 승리했는지 확인하는 함수
function checkWin(currentClass) {
    return WINNING_COMBINATIONS.some(combination => {
        return combination.every(index => {
            return cellElements[index].classList.contains(currentClass);
        });
    });
}

// 무승부인지 확인하는 함수
function isDraw() {
    return [...cellElements].every(cell => {
        return cell.classList.contains(X_CLASS) || cell.classList.contains(O_CLASS);
    });
}

설명

클래스 및 승리 조건: X와 O를 나타내는 클래스 이름과 승리 조건을 정의합니다.
DOM 요소 가져오기: 셀 요소와 보드, 시작 버튼, 리셋 버튼을 가져옵니다.
게임 상태 변수: 현재 턴을 나타내는 변수를 선언합니다.
이벤트 리스너: 시작 버튼과 리셋 버튼에 클릭 이벤트를 설정합니다.
startGame 함수: 게임을 초기화하고 각 셀에 클릭 이벤트를 추가합니다.
resetGame 함수

: 게임을 초기화하고 각 셀의 클릭 이벤트를 제거합니다.
7. handleClick 함수: 셀을 클릭했을 때의 동작을 정의합니다. 현재 턴에 따라 셀에 마크를 표시하고 승리 여부를 확인합니다.
8. placeMark 함수: 셀에 X 또는 O를 표시합니다.
9. swapTurns 함수: 턴을 교체합니다.
10. checkWin 함수: 현재 클래스가 승리했는지 확인합니다.
11. isDraw 함수: 무승부인지 확인합니다.

이렇게 설명을 마치겠습니다. 각 파일의 코드는 현대적인 디자인과 기능성을 고려하여 작성되었습니다.

저작자표시

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글

[기능별 페이지] lotto (0)	2024.06.11
[기능별 페이지] memory matching game2 (0)	2024.06.10
[기능별 페이지] memory matching game1 (0)	2024.06.10
[기능별 페이지] omok (0)	2024.06.10
[기능별 페이지] - number guessing game (1)	2024.06.10

Javascript 개발자

[기능별 페이지] 게임 - tictactoe

HTML (index.html)

설명

CSS (styles.css)

설명

JavaScript (script.js)

설명

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글

티스토리툴바

[기능별 페이지] 게임 - tictactoe

HTML (index.html)

설명

CSS (styles.css)

설명

JavaScript (script.js)

설명

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글

관련글

티스토리툴바

'Javascript 프로젝트 > 기능별 페이지' 카테고리의 다른 글