정보실

웹학교

정보실

javascript Svelte로 Tic Tac Toe 게임을 만드는 방법

본문

Svelte는 차세대 사용자 인터페이스 구축 방법입니다.


https://www.sitepoint.com/svelte-tic-tac-toe/ 


React, Vue 및 Angular와 같은 프레임 워크는 브라우저에서 대부분의 작업을 수행하지만 Svelte는 다음 단계로 이동합니다. 앱을 빌드 할 때 작동하며 Svelte 앱을 효율적인 바닐라 JavaScript로 컴파일합니다. 그래서 당신은 두 세계의 최고를 얻습니다. 

Svelte로 코드를 작성하면 프레임 워크를 사용할 때 쉽게 읽고 재사용하고 얻을 수 있는 다른 모든 이점을 얻을 수 있으며 바닐라 JavaScript를 준수하여 놀랍도록 빠른 웹 앱을 만들 수 있습니다. 사용 중인 JavaScript 프레임 워크의 오버 헤드가 없습니다.


Svelte를 사용하면 적은 코드를 작성할 수 있습니다. 또한 React가 대중화 한 Virtual DOM 개념을 사용하지 않습니다. 대신 앱 상태가 변경 될 때 외과적으로 DOM을 업데이트하여 앱이 빠르게 시작되고 빠르게 유지됩니다.


전제 조건 


이 학습서에는 HTML, CSS 및 JavaScript에 대한 기본 지식이 필요합니다.


최신 버전의 Node.js도 설치해야 합니다.


또한 Node.js와 함께 기본적으로 설치되는 npx를 사용합니다.


이 튜토리얼에서는 yarn을 사용합니다. yarn가 설치되어 있지 않은 경우 여기에서 설치하십시오.


동일한 페이지에 있는지 확인하기 위해 이 자습서에서 사용 된 버전은 다음과 같습니다.

  • Node 12.10.0
  • npx 6.11.3
  • yarn 1.17.3
Svelte 시작하기 


이 튜토리얼에서는 Svelte에서 Tic Tac Toe 게임을 만들 것입니다. 결국 Svelte를 사용하여 빠르게 시작하고 실행할 수 있으며 Svelte에서 자체 앱을 구축 할 수 있습니다.


시작하려면 degit을 사용하여 앱을 스캐폴딩 해야 합니다. degit은 git clone과 거의 동일하지만 훨씬 빠릅니다. 여기에서 자세히 알아볼 수 있습니다.


터미널에 다음을 입력하여 새 프로젝트를 만드십시오.


$ npx degit sveltejs/template tic-tac-toe-svelte

npx를 사용하면 degit 명령을 전체적으로 설치하지 않고도 사용할 수 있습니다.


npx 이전에 동일한 결과를 얻으려면 다음 두 단계를 수행해야 합니다.

$ npm install --global degit
$ degit sveltejs/template tic-tac-toe-svelte

npx 덕분에 글로벌 네임스페이스를 팽팽하게 만들지 않으며 항상 최신 버전의 degit을 사용합니다.


degit은 repo https://github.com/sveltejs/template을 tic-tac-toe-svelte 폴더에 복제합니다.


tic-tac-toe-svelte 디렉토리로 이동하여 터미널에 다음을 입력하여 종속성을 설치하십시오.

$ cd tic-tac-toe-svelte
$ yarn

이제 터미널에 다음을 입력하여 응용 프로그램을 실행하십시오.

$ yarn dev

이제 브라우저를 열고 http://localhost:5000으로 이동하면 다음이 표시됩니다.

Svelte - Hello World 


src/ 폴더로 들어가면 App.svelte와 main.js라는 두 개의 파일이 나타납니다. main.js는 Svelte 앱의 진입 점입니다.


main.js를 열고 다음을 볼 수 있습니다 :


import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

위의 파일은 App.svelte를 가져 와서 대상 요소를 사용하여 인스턴스화 합니다. 컴포넌트를 DOM의 document.body에 넣습니다. 또한 이름 소품을 앱 구성 요소에 전달합니다. 이 소품은 App.svelte에서 액세스 할 수 있습니다.


Svelte의 구성 요소는 HTML, CSS 및 JavaScript가 포함 된 .svelte 파일을 사용하여 작성됩니다. Vue와 함께 일하면 익숙해 보일 것입니다.


이제 App.svelte를 열고 다음을 볼 수 있습니다 :

<script>
    export let name;
</script>

<style>
    h1 {
        color: purple;
    }
</style>

<h1>Hello {name}!</h1>

먼저 스크립트 태그가 있는데 name이라는 이름의 내보내기가 있습니다. 이것은 main.js에 언급 된 소품과 유사해야 합니다.


그런 다음 특정 파일의 모든 요소에 스타일을 지정할 수 있는 스타일 태그가 있습니다.이 태그는 해당 파일에만 적용되므로 계단식 문제가 없습니다.


그런 다음 맨 아래에는 h1 태그가 있으며 그 안에는 {name}!이 있습니다. 중괄호 안의 이름은 실제 값으로 대체됩니다. 이를 가치 보간이라고 합니다. 그렇기 때문에 Hello world! 화면에 인쇄됩니다.


Svelte 구성 요소의 기본 구조 


모든 .svelte 파일은 기본적으로 다음과 같은 구조를 갖습니다.


<script>
    /* Javascript logic */
</script>

<style>
    /* CSS styles */
</style>

<!-- HTML markup -->

HTML 마크업에는 추가 Svelte 관련 구문이 있지만 나머지는 일반 HTML, CSS 및 JavaScript입니다.


Svelte Tic Tac Toe 만들기 


Tic Tac Toe 게임 제작을 시작하겠습니다.


main.js를 다음으로 바꾸십시오.


import App from './App.svelte'

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

export default app

기본적으로 앱 구성 요소 인스턴스화에서 props 속성을 제거했습니다.


이제 App.svelte를 다음으로 바꾸십시오.


<script>
  const title = "Tic Tac Toe";
</script>

<svelte:head>
  <title>{title}</title>
</svelte:head>

<h1>{title}</h1>

여기에서 문자열 Tic Tac Toe로 상수 변수 제목을 초기화합니다.


머리 태그의 제목 속성을 설정, 머리 : 그럼, 아래의 마크 업에, 우리는 특별한 벨테 구문, 호리 호리한를 사용합니다.


그런 다음 아래 마크 업에서 특별한 Svelte 문법을 사용합니다. svelte : head, head 태그에서 title 속성을 설정합니다.


이것은 기본적으로 이 작업을 수행하는 것과 유사합니다.


<head>
    <title>Tic Tac Toe</title>
</head>

그러나 svelte : head 구문을 사용하면 런타임에 제목을 변경할 수 있다는 장점이 있습니다.


그런 다음 h1 태그에 동일한 title 속성을 사용합니다. 이제 다음과 같이 보일 것입니다 :

Svelte - Tic Tac Toe 


이제 src/ 디렉토리에 Board.svelte 및 Square.svelte라는 두 개의 다른 파일을 작성하십시오.


Square.svelte를 열고 다음에 붙여 넣습니다.


<script>
  export let value;
</script>

<style>
  .square {
    flex: 1 0 25%;
    width: 50px;
    height: 70px;
    background-color: whitesmoke;
    border: 2px solid black;
    margin: 5px;
    padding: 5px;
    font-size: 20px;
    text-align: center;
  }

  .square:hover {
    border: 2px solid red;
  }
</style>

<button class="square">{value}</button>

기본적으로 버튼을 만들고 스타일을 지정합니다.


이제 Board.svelte를 열고 다음을 붙여 넣습니다.

<script>
  import Square from "./Square.svelte";
  let squares = [null, null, null, null, null, null, null, null, null];
</script>

<style>
  .board {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
</style>

<div class="board">
  {#each squares as square, i}
    <Square value={i} />
  {/each}
</div>

여기에서 Square 구성 요소를 가져 왔습니다. 또한 제곱 배열을 초기화했으며 여기에는 현재 null 인 X 및 0의 데이터가 포함됩니다.


Svelte의 각 루프 


HTML 마크 업에서 우리는 반복을 위해 특별한 Svelte 구문을 사용했습니다. 이것은 바닐라 JavaScript의 Array.forEach 루프와 유사합니다. 구문은 다음과 같습니다.


{#each squares as square, i}
    <Square value={i} />
{/each}

squares.length가 9와 같으므로 9 번 반복됩니다. 첫 번째 항목이 null이고 인덱스가 처음으로 0이므로 i의 값이 0이므로 첫 번째 반복에서 square의 값은 null입니다. squares 배열의 모든 값이 현재 null이므로 square 값은 매 반복마다 null로 유지되지만 i 값은 인덱스 값이므로 0에서 8까지 계속 증가합니다.


그런 다음 i 값을 Square 구성 요소에 대한 값 소품으로 전달합니다.


이제 다음과 같이 보일 것입니다 :


Svelte - Tic Tac Toe Board 

이제 사각형을 완성 했으니 이제 논리를 추가하겠습니다.


먼저 X 또는 0에 관계없이 다음 동작을 표시해야 합니다. 또한 X와 0으로 사각형을 클릭 할 수 있는지 확인하십시오.


그렇게 하려면 Board.svelte에 다음 코드를 추가하십시오.


<script>
  .
  .
  .

  let xIsNext = true;
  $: status = "Next Player: " + (xIsNext ? "X" : "0");

  function handleClick(i) {
    if (!squares[i]) {
      squares[i] = xIsNext ? "X" : "0";
      xIsNext = !xIsNext;
    }
  }
</script>

<style>
  h3 {
    color: red;
  }
  .
  .
  .
</style>

<h3>{status}</h3>

<div class="board">
  {#each squares as square, i}
    <Square value={square} handleClick={() => handleClick(i)} />
  {/each}
</div>

위의 코드는 변수 xIsNext를 부울로 초기화합니다. 이 부울은 다음 동작과 관련하여 계속 토글 됩니다.


X가 다음 이동 인 경우 xIsNext는 true입니다. 0이 다음 이동 인 경우 xIsNext는 false입니다. 기본적으로 true로 설정되어 있습니다.


그런 다음 상태 변수가 있습니다. 이것은 반응 할당이라고 알려진 특수한 유형의 변수입니다. 앞에 달러 ($) 기호를 넣으면 변화에 반응하게 됩니다. 따라서 xIsNext가 다시 변경되면 상태가 새로운 값으로 업데이트 됩니다. xIsNext가 true 인 경우 상태는 다음 플레이어 : X가 되고 xIsNext가 false 인 경우 상태는 다음 플레이어 : 0이 됩니다.


그런 다음 값 prop를 정사각형으로 전달합니다. 내용에 따라 X 또는 0이 표시됩니다.


그런 다음 사각형을 클릭하면 handleClick 함수가 호출됩니다. handleClick 함수는 소품으로 Square 컴포넌트에 전달되어야 하며, 여기에서 클릭을 청취하도록 구현됩니다. 따라서 Square.svelte를 변경하지 않으면 사각형을 클릭해도 작동하지 않습니다.


어쨌든 handleClick 함수는 누군가가 이기거나 잃었는지 비교하기 위해 사각형의 배열에 보드의 내용을 저장해야 하기 때문에 인덱스 i를 전달합니다.


정사각형의 내용이 이미 채워져 있으면 변경하지 않도록 하려면 if 조건 인 첫 번째 줄이 필요합니다. 이미 null 인 경우에만 if 조건 본문에 입력됩니다.


두 번째 줄은 xIsNext의 값을 확인하고, 참이면 X를 제곱 값으로, 틀린 경우 0을 제곱 값으로 설정합니다.


마지막으로 xIsNext는 다음 이동을 재생하도록 전환됩니다.


이제 다음과 같이 Square.svelte를 편집하십시오.


<script>
  .
  .
  .
  export let handleClick;
</script>

<style>
  .
  .
  .
</style>

<button class="square" on:click={handleClick}>{value || ""}</button>

여기에 추가 한 유일한 것은 명명 된 내보내기 handleClick과 on : click 핸들러 on 버튼이며 handleClick을 가리킵니다. 이것은 Board.svelte에서 전달됩니다. 위의 코드가 없으면 클릭이 작동하지 않습니다. 또한 버튼이 null이 아닌 경우에만 내용을 표시합니다. 즉, X와 0이 있는 경우에만 표시됩니다.


이제 다음과 같이 보입니다 :


Svelte - Tic Tac Toe Board Empty 



사각형 내부를 클릭하면 X와 0이 적절하게 표시됩니다. 다음과 같이 상태 변경이 올바르게 표시 될 수도 있습니다.


Svelte - Tic Tac Toe Board Full 


우승자 찾기 


이제 게임을 할 수 있으므로 승자, 패자를 찾는 방법 또는 무승부인지 확인하는 방법을 알아 보겠습니다.


Board.svelte를 열고 다음을 추가하십시오.


<script>
  let winner = null;
  .
  .
  .
  function handleClick(i) {
    if (!squares[i]) {
      squares[i] = xIsNext ? "X" : "0";
      xIsNext = !xIsNext;
      winner = calculateWinner(squares);
    }
  }

  function calculateWinner(squares) {
    const winningCombo = [
      [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 < winningCombo.length; i++) {
      const [a, b, c] = winningCombo[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares
)
        return `Winner: ${squares[a]}`;
    }
    const isDraw = squares.every(square => square !== null);
    return isDraw ? "It's a draw" : null;
  }
</script>
.
.
.
{#if winner}
  <h3>{winner}</h3>
{:else}
  <h3>{status}</h3>
{/if}
<div class="board">
  .
  .
  .
</div>

위의 코드에서 우리는 승자를 추적하는 승자 변수를 초기화합니다. 처음에는 null입니다. 그런 다음 모든 클릭 후 handleClick 함수에서 볼 수 있듯이 calculateWinner를 호출하고 반환 값을 winner로 설정합니다.


calculateWinner는 제곱 배열을 받아 승자를 결정하는 함수입니다. winningCombo는 당첨 조합을 결정하는 배열입니다. X와 0 경기에서 승리하려면 수직 및 수평 직선 또는 대각선이 필요합니다. 위의 배열은 우승 조합의 가능한 목록입니다.


for 루프에서 squares 배열 내부의 값이 인덱스를 비교하여 직선 (수평 또는 수직) 또는 대각선에 있는지 확인합니다. 그렇다면 우리는 승자를 선언합니다. 값이 없으면 모든 값이 채워 졌는지 확인하고 참이면 X와 0을 재생할 수 있는 공간이 없기 때문에 무승부입니다. 그렇지 않으면 게임이 계속 켜져 있으면 null을 반환합니다.


마지막으로 if ... else에 대한 Svelte 관련 구문을 추가합니다. winner가 null이 아니면 당첨자를 표시하고 그렇지 않으면 상태를 표시합니다.


누군가 이기면 이제 다음과 같이 보일 것입니다.


Svelte - Tic Tac Toe Board Winner 


그리고 무승부라면 이제 다음과 같이 보일 것입니다.


Svelte - Tic Tac Toe Board Draw 

이제 게임을 다시 시작하는 방법을 추가하겠습니다.


동일한 Board.svelte 파일에서 다음을 추가하십시오.


<script>
  .
  .
  .
  function restartGame() {
    squares = [null, null, null, null, null, null, null, null, null];
    xIsNext = true;
    winner = null;
  }
  .
  .
  .
</script>

.
.
.

{#if winner}
  <button on:click={restartGame}>Restart Game</button>
{/if}

위의 코드는 앱에 게임 재시작 버튼을 추가합니다.이 버튼은 restartGame 함수를 호출하여 새로 시작하는 데 필요한 모든 값을 재설정 합니다.


따라서 게임에서 이기거나 추첨을 받으면 게임 다시 시작 버튼이 있는 다음 화면이 표시됩니다.


Svelte - Tic Tac Toe Board Restart 


전체 Board.svelte 파일은 이제 다음과 같아야 합니다.


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

  let winner = null;
  let squares = [null, null, null, null, null, null, null, null, null];
  let xIsNext = true;
  $: status = "Next Player: " + (xIsNext ? "X" : "0");

  function restartGame() {
    squares = [null, null, null, null, null, null, null, null, null];
    xIsNext = true;
    winner = null;
  }

  function handleClick(i) {
    if (!squares[i]) {
      squares[i] = xIsNext ? "X" : "0";
      xIsNext = !xIsNext;
      winner = calculateWinner(squares);
    }
  }

  function calculateWinner(squares) {
    const winningCombo = [
      [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 < winningCombo.length; i++) {
      const [a, b, c] = winningCombo[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares
)
        return `Winner: ${squares[a]}`;
    }
    const isDraw = squares.every(square => square !== null);
    return isDraw ? "It's a draw" : null;
  }
</script>
<style>
  h3 {
    color: red;
  }
  .board {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
</style>
{#if winner}
  <h3>{winner}</h3>
{:else}
  <h3>{status}</h3>
{/if}
<div class="board">
  {#each squares as square, i}
    <Square value={square} handleClick={() => handleClick(i)} />
  {/each}
</div>
{#if winner}
  <button on:click={restartGame}>Restart Game</button>
{/if}

이제 터미널에 다음을 입력하여 생산 코드를 작성할 수 있습니다.


$ yarn build

그러면 제작 준비가 된 최적화 된 코드가 포함 된 public/bundle.js 파일이 생성됩니다.


전체 코드는 Github에서 찾을 수 있습니다.


여기에서 응용 프로그램의 데모를 찾을 수 있습니다.


결론 


이 튜토리얼에서는 Svelte를 사용하여 완벽한 게임을 만들었습니다. 우리는 Tic Tac Toe 게임을 구축하여 많은 것을 배웠습니다.


Svelte는 초고속 웹 응용 프로그램을 만드는 데 사용할 수 있는 혁신적인 새 컴파일러입니다. 모든 것을 바닐라 JavaScript로 변환한다는 점에서 전통적인 프레임 워크와는 매우 다릅니다.


React 또는 Vue와 같은 프레임 워크를 사용한 경우 Svelte를 선택하는 것이 매우 쉽습니다. 기회를 주면 실망하지 않을 것입니다.


물론 이것은 빙산의 일각이었습니다. REPL이 포함 된 수많은 예제가 포함 된 더 멋진 컨텐츠와 놀라운 예제 섹션에 대해서는 공식 웹 사이트를 확인하십시오.





  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 94회 ]  작성일19-10-30 19:50

웹학교