Tic Tac Toe 게임을 만드는 쉬운 방법!

7769 단어 tictactoe javascript svelte webdev

Svelte는 무엇입니까?

Svelte는 적은 코드로 사용자 인터페이스를 구축하는 근본적이고 새로운 접근 방식입니다. 더 이상 복잡한 상태 관리 라이브러리가 없습니다. Svelte는 JavaScript 자체에 반응성을 제공합니다.

이 튜토리얼에서는 Svelte로 자신만의 Tic Tac Toe 게임을 구축하기 위해 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 필요합니다.

시작하기

계속해서 다음 명령을 사용하여 새 프로젝트를 초기화합니다.

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install

...롤업을 시작합니다.

# Npm Command
npm run dev

localhost:8080으로 이동하면 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 새로고침하여 변경 사항을 확인하세요.

기본 구조

Svelte의 구성 요소는 HTML, CSS 및 JavaScript를 포함하는 서면 사용.svelte 파일입니다. 이제 Board.svelte 파일을 만들고 다음 구조로 App.svelte 파일을 수정하겠습니다.

<script>
<!-- JavaScript Logic -->
</script>

<style>
<!-- CSS Styles -->
</style>

<div>
<!-- HTML Markup -->
</div>

시작하기 전에 main.js를 다음으로 바꾸겠습니다.

import App from './App.svelte'

const app = new App({
  target: document.body,
})

export default app

우리의 앱 구성 요소

이제 다음과 같이 App.svelte를 편집하여 App Component를 완성하겠습니다.

<script>
  import Board from "./Board.svelte";
</script>

<div class="app">
<div class ="container">
<Board />
</div>
 </div>

여기에서 HTML 마크업을 사용하여 Board.svelte 보드 구성 요소를 가져오고 초기화했습니다App.svelte.

우리 보드 구성 요소

Board.svelte를 열고 보드 구성 요소에 대한 JavaScript 로직을 구현합니다.

<script>
  let userTurn = "X";
  let squares = new Array(9).fill(null);
  let winner = null;
  function restartGame() {
    userTurn = "X";
    squares = new Array(9).fill(null);
    winner = null;
  }
  function handleClick(i) {
    if (!squares[i] && !winner) {
      squares[i] = userTurn;
      switchTurn();
      winner = calculateWinner(squares);
      if (winner) userTurn = null;
    }
  }
  function switchTurn() {
    if (userTurn === "X") userTurn = "O";
    else userTurn = "X";
  }
  function calculateWinner(squares) {
    const winningCombinations = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];
    for (let i = 0; i < winningCombinations.length; i++) {
      const [a, b, c] = winningCombinations[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c])
        return `Winner: ${squares[a].toUpperCase()}`;
    }
    const isDraw = squares.every(square => square !== null);
    return isDraw ? "It's a draw" : null;
  }
</script>

이제 Board.svelte 구성 요소에 대한 HTML 마크업을 구현할 수 있습니다.

<div>
{#if winner}
  <h1>{winner}</h1>
  <button class="restart" on:click={restartGame}>Restart Game</button>
{:else}
  <h1>Next Player : {userTurn}</h1>
{/if}
</div>
<div class={userTurn != null ? userTurn + ' board' : 'board'}>
  {#each squares as square, i}
    <div
      class={square != null ? square + ' cell' : 'cell'}
      on:click={() => handleClick(i)} />
  {/each}
</div>

다음 단계는 다음 스타일을 추가하여 Board.Svelte 파일을 완성하는 것입니다.

<style>
    :root {
      --cell-size: 100px;
      --mark-size: calc(var(--cell-size) * 0.5);
    }
    .board {
      display: grid;
      justify-content: center;
      justify-items: center;
      align-content: center;
      align-items: center;
      grid-template-columns: repeat(3, auto);
    }
    .cell {
      width: var(--cell-size);
      height: var(--cell-size);
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;
    }
    .cell:first-child,
    .cell:nth-child(2),
    .cell:nth-child(3) {
      border-top: none;
    }
    .cell:nth-child(3n + 1) {
      border-left: none;
    }
    .cell:nth-child(3n + 3) {
      border-right: none;
    }
    .cell:last-child,
    .cell:nth-child(8),
    .cell:nth-child(7) {
      border-bottom: none;
    }
    .cell.X,
    .cell.O {
      cursor: not-allowed;
    }
    .cell.X::before,
    .cell.X::after,
    .cell.O::before {
      background-color: black;
    }
    .board.X .cell:not(.X):not(.O):hover::before,
    .board.X .cell:not(.X):not(.O):hover::after,
    .board.O .cell:not(.X):not(.O):hover::before {
      background-color: lightgrey;
    }
    .cell.X::before,
    .cell.X::after,
    .board.X .cell:not(.X):not(.O):hover::before,
    .board.X .cell:not(.X):not(.O):hover::after {
      content: "";
      position: absolute;
      width: calc(var(--mark-size) * 0.15);
      height: var(--mark-size);
    }
    .cell.X::before,
    .board.X .cell:not(.X):not(.O):hover::before {
      transform: rotate(45deg);
    }
    .cell.X::after,
    .board.X .cell:not(.X):not(.O):hover::after {
      transform: rotate(-45deg);
    }
    .cell.O::before,
    .cell.O::after,
    .board.O .cell:not(.X):not(.O):hover::before,
    .board.O .cell:not(.X):not(.O):hover::after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }
    .cell.O::before,
    .board.O .cell:not(.X):not(.O):hover::before {
      width: var(--mark-size);
      height: var(--mark-size);
    }
    .cell.O::after,
    .board.O .cell:not(.X):not(.O):hover::after {
      width: calc(var(--mark-size) * 0.7);
      height: calc(var(--mark-size) * 0.7);
      background-color: white;
    }
    h1 {
      text-align: center;
      text-decoration: underline;
      text-decoration-color: red;
      margin: 2rem;
      padding: 1rem;
    }
    .restart {
      font-weight: bold;
      position: absolute;
      top: 50%;
      padding: 20px;
      margin: 200px 500px;
    }
</style>

참고 💡 - 이제 Svelte를 사용하여 Tic Tac Toe 게임을 완성해야 합니다.