찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >Tic Tac Toe 게임 웹사이트 구축

Tic Tac Toe 게임 웹사이트 구축

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2024-08-18 06:35:021062검색

Build a Tic Tac Toe Game Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 고전 틱택토 게임을 공유하게 되어 기쁩니다. 이 프로젝트는 특히 게임 로직, DOM 조작 및 사용자 상호 작용 처리 분야에서 JavaScript 기술을 연습할 수 있는 좋은 방법입니다. 방금 JavaScript를 시작했거나 재미있는 도전을 찾고 있다면 이 Tic-Tac-Toe 게임은 기술을 연마하는 데 적합합니다.

프로젝트 개요

틱택토 게임은 인기 있는 2인용 게임을 웹 기반으로 구현한 것입니다. 이 프로젝트는 대화형 요소를 생성하고, 게임 상태를 관리하고, 간단한 AI 로직을 구현하는 방법을 보여줍니다. 이 게임은 완벽하게 반응하도록 설계되어 데스크톱과 모바일 장치 모두에서 플레이할 수 있습니다.

특징

  • 2인용 모드: 같은 기기에서 친구와 함께 플레이하세요.
  • 게임 로직: 매 이동 후 자동으로 승패를 확인합니다.
  • 재설정 기능: 언제든지 게임을 쉽게 다시 시작할 수 있습니다.
  • 반응형 디자인: 게임 레이아웃은 다양한 화면 크기에 맞춰 조정되어 모든 기기에서 일관된 경험을 제공합니다.

사용된 기술

  • HTML: 게임 인터페이스를 구성합니다.
  • CSS: 게임 보드, 버튼 및 기타 UI 요소의 스타일을 지정합니다.
  • JavaScript: 플레이어 턴, 승리 조건, 게임 재설정 등 게임 로직을 관리합니다.

프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다.

Tic-Tac-Toe/
├── index.html
├── styles.css
└── script.js
  • index.html: Tic-Tac-Toe 게임의 HTML 구조를 포함합니다.
  • styles.css: 게임 보드 및 반응형 디자인을 위한 CSS 스타일을 포함합니다.
  • script.js: 플레이어 턴 및 승리 조건을 포함한 게임 로직을 처리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

  1. 저장소 복제:

    git clone https://github.com/abhishekgurjar-in/Tic-Tac-Toe.git

  2. 프로젝트 디렉토리 열기:

    cd Tic-Tac-Toe

  3. 프로젝트 실행:

    • Tic-Tac-Toe 게임을 시작하려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

  1. 웹사이트를 엽니다 웹 브라우저에서
  2. 게임을 시작 그리드의 빈 셀을 클릭하세요.
  3. 교대로 셀에 표시(X 또는 O)를 넣으세요.
  4. 결과 확인: 승리 조합이 있으면 게임이 승자로 선언되고 모든 셀이 채워지면 무승부가 됩니다.
  5. 게임 재설정: 새 게임을 시작하려면 "게임 재설정" 버튼을 클릭하세요.

코드 설명

HTML

index.html 파일은 게임 보드와 컨트롤 버튼을 포함한 Tic-Tac-Toe 게임의 구조를 설정합니다. 다음은 일부 내용입니다.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Tic-Tac-Toe Game6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    d39cfd0366094787321899c5020bc378
      6d4a5230d2661bb62bed1c8aaf8c64e0Winner94b3e26ee717c64999d7867364b1b4a3
      8e523cc4a74074b4a599f8aab4bcbad4New Game65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    61b85035edf2b42260fdb5632dc5728a
      4a249f0d628e2318394fd9b75b4636b1Tic Tac Toe473f0a7621bec819994bb5020d29372a
      4883ec0eb33c31828b7c767c806e14c7
        3a1385250c1ecad69875af6138783c80
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
          a008380eccad648f043a77a135bd17ac65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
      ebf4b789043d9122effbf39b4551717cReset Game65281c5ac262bf6d81768915a4a77ac0
    07ebbc2b3735b6cb0330715d08d2749e
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

styles.css 파일은 그리드 레이아웃, 버튼, 반응형 디자인을 포함하여 Tic-Tac-Toe 게임의 스타일을 지정합니다. 주요 스타일은 다음과 같습니다.

* {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #548687;
    text-align: center;
  }

  .container {
    height: 70vh;
    display: flex;

    justify-content: center;
    align-items: center;
  }

  .game {
    height: 60vmin;
    width: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vmin;
  }

  .box {
    height: 18vmin;
    width: 18vmin;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    font-size: 8vmin;
    color: #b0413e;
    background-color: #ffffc7;
  }

  #reset-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #new-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #msg {
    color: #ffffc7;
    font-size: 5vmin;
  }

  .msg-container {
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
  }

  .hide {
    display: none;
  }
.footer {
  margin: 50px;
  text-align: center;
  color: white;
}

자바스크립트

script.js 파일은 플레이어 차례 처리, 승자 확인, 게임 재설정 등 게임 로직을 관리합니다. 다음은 일부 내용입니다.

let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");

let turnO = true; //playerX, playerO
let count = 0; //To Track Draw

const winPatterns = [
  [0, 1, 2],
  [0, 3, 6],
  [0, 4, 8],
  [1, 4, 7],
  [2, 5, 8],
  [2, 4, 6],
  [3, 4, 5],
  [6, 7, 8],
];

const resetGame = () => {
  turnO = true;
  count = 0;
  enableBoxes();
  msgContainer.classList.add("hide");
};

boxes.forEach((box) => {
  box.addEventListener("click", () => {
    if (turnO) {
      //playerO
      box.innerText = "O";
      turnO = false;
    } else {
      //playerX
      box.innerText = "X";
      turnO = true;
    }
    box.disabled = true;
    count++;

    let isWinner = checkWinner();

    if (count === 9 && !isWinner) {
      gameDraw();
    }
  });
});

const gameDraw = () => {
  msg.innerText = `Game was a Draw.`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const disableBoxes = () => {
  for (let box of boxes) {
    box.disabled = true;
  }
};

const enableBoxes = () => {
  for (let box of boxes) {
    box.disabled = false;
    box.innerText = "";
  }
};

const showWinner = (winner) => {
  msg.innerText = `Congratulations, Winner is ${winner}`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const checkWinner = () => {
  for (let pattern of winPatterns) {
    let pos1Val = boxes[pattern[0]].innerText;
    let pos2Val = boxes[pattern[1]].innerText;
    let pos3Val = boxes[pattern[2]].innerText;

    if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
      if (pos1Val === pos2Val && pos2Val === pos3Val) {
        showWinner(pos1Val);
        return true;
      }
    }
  }
};

newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);

라이브 데모

여기에서 Tic-Tac-Toe 게임의 라이브 데모를 확인하실 수 있습니다.

결론

이 Tic-Tac-Toe 게임을 만드는 것은 특히 대화형 웹 애플리케이션을 만들 때 JavaScript를 연습할 수 있는 즐거운 경험이었습니다. 이 프로젝트가 여러분이 자신만의 게임을 만들고 JavaScript의 가능성을 탐색하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 JavaScript 및 DOM 조작에 중점을 두고 웹 개발 기술을 향상시키기 위한 지속적인 여정의 일환으로 개발되었습니다.

작가

  • 아비셰크 구자르
    • GitHub 프로필

위 내용은 Tic Tac Toe 게임 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html if for Directory Interface JS dom this github ui
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：체중 변환기 웹사이트 구축다음 기사：체중 변환기 웹사이트 구축

관련 기사

더보기