Как создать игру Tic Tac Toe с помощью Svelte

Если X — следующий ход, тогда xIsNext будет true . Если 0 — следующий ход, то xIsNext будет false . По умолчанию установлено значение true .

Тогда у нас есть переменная status . Это особый тип переменной, известный как реактивное присваивание. Если поставить знак доллара ($) перед ним, он станет реагировать на изменения. Поэтому, если xIsNext снова изменится, то status будет обновлен до его нового значения. Когда xIsNext равен true , status будет Next Player: X , а когда xIsNext равен false , status будет Next Player: 0 .

Затем мы передаем value prop как square . Это будет отображать X или 0 зависимости от содержимого.

Затем у нас есть функция handleClick которая вызывается при нажатии на квадрат. Функция handleClick должна быть передана компоненту Square как опора, где она реализована для прослушивания щелчка. Таким образом, без изменения Square.svelte , клик по квадрату не будет работать.

В любом случае, функция handleClick получает индекс i так как мы должны хранить содержимое доски в нашем square массиве для сравнения, если кто-то выиграл или проиграл, или чтобы проверить, является ли это ничьей.

Первая строка, которая является условием if , требуется, чтобы убедиться, что мы не изменим содержимое квадрата, если оно уже заполнено. Если он уже null , только тогда он войдет в тело условия if .

Во второй строке проверяется значение xIsNext и если оно true , тогда X ставится в качестве значения квадрата, а если оно false , в качестве значения квадрата ставится 0 .

Наконец, xIsNext переключается для воспроизведения следующего хода.

Теперь отредактируйте Square.svelte следующим образом:

 <script> . . . export let handleClick; </script> <style> . . . </style> <button class="square" on:click={handleClick}>{value || ""}</button> 

Единственное, что мы здесь добавили, это именованный экспорт handleClick и обработчик on on:click для button , которая указывает на handleClick . Это передано от Board.svelte . Без приведенного выше кода, щелчок не будет работать. Кроме того, мы отображаем содержимое внутри кнопки только в том случае, если оно не равно null то есть мы отображаем только при наличии X и 0 .

Теперь это выглядит так:

Если вы попытаетесь щелкнуть внутри квадратов, то X и 0 будут отображаться соответствующим образом. Вы также можете увидеть изменение статуса следующим образом:

 <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); 

     вернуть isDraw?  «Это ничья»: ноль; 

   } 

 </ Скрипт> 
  , 

 , 

 , 
  {# если победитель} 

   <H3> {победитель} </ h3> 

 {:} Еще 

   <H3> {состояния} </ h3> 

 {/если} 
  <div class = "board"> 

   , 

   , 

   , 

 </ DIV> 

 <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} 

 <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); 

     вернуть isDraw?  «Это ничья»: ноль; 

   } 

 </ Скрипт> 
  <Стиль> 

   h3 { 

     красный цвет; 

   } 
  .board { 

     дисплей: гибкий; 

     flex-wrap: обертывание; 

     ширина: 300 пикселей; 

   } 

 </ Стиль> 
  {# если победитель} 

   <H3> {победитель} </ h3> 

 {:} Еще 

   <H3> {состояния} </ h3> 

 {/если} 
  <div class = "board"> 

   {# Каждый квадрат как квадрат, я} 

     <Square value = {square} handleClick = {() => handleClick (i)} /> 

   {/} Каждого 

 </ DIV> 
  {# если победитель} 

   <button on: click = {restartGame}> Перезапустить игру </ button> 

 {/если} 

 $ yarn build