Крестики-нолики, часть 0: Сравнение Svelte и React Крестики-нолики, часть 1: Svelte и Canvas 2D Крестики-нолики, часть 2: Отмена/Повтор с сохранением состояния Крестики-нолики, часть 3: Отмена/Повтор с хранилищем команд Крестики-нолики.Теги: #программирование #разработка сайтов #JavaScript #веб-разработка #react.js #react #svelte #SvelteJSЧасть 4. Взаимодействие с серверной частью Flask с использованием HTTP На сайте React есть руководство , в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину руководства, до реализации истории ходов.
Для целей ознакомления с фреймворком этого вполне достаточно.
Каждый раздел статьи соответствует разделу руководства и содержит ссылки на исходный код обоих фреймворков.
Проверка стартового кода Реагировать — Стройный App.svelte
Board.svelte<script> import Board from './Board.svelte'; </script> <div class="game"> <div class="game-board"> <Board /> </div> <div class="game-info"> <div></div> <ol></ol> </div> </div> <style> .
game { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; display: flex; flex-direction: row; } .
game-info { margin-left: 20px; } ol { padding-left: 30px; } </style>
<script> import Square from './Square.svelte'; </script> <div class="status">Next player: X</div> <div class="board"> {#each Array(9) as square} <Square /> {/each} </div> <style> .
board { width: 102px; } .
status { margin-bottom: 10px; } </style>
Квадрат.стройный<button></button> <style> button { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; margin-bottom: -1px; padding: 0; text-align: center; width: 34px; } button:focus { outline: none; } </style>
Каждый компонент запускается в отдельном файле.Компонент может содержать код, HTML-разметку и стили CSS. Использовать показано вложенные компоненты : компонент Square импортируется в компонент Board, компонент Board импортируется в компонент App. Использовать показано заблокировать каждого в компоненте Board. Стили меняются редко, поэтому я разместил их после html-разметки, чтобы не приходилось их пролистывать заново.
Передача данных через реквизиты Реагировать — Стройный На площади задекларированное имущество ценить.
<script> export let value = ''; </script> <button>{value}</button>
Доска показывает использование индексы массива для заполнения ячеек.
<div class="board"> {#each Array(9) as square, i} <Square value={i}/> {/each} </div>
Создание интерактивного компонента Реагировать — Стройный При нажатии в ячейке появляется крестик.Обработчик добавлен в Square DOM-события handleClick для щелчка мыши.
Добавлена переменная состояния для отображения крестика в ячейке.
<script> export let value = ''; let state = ''; function handleClick() { state = 'X'; } </script> <button on:click={handleClick}> {state} </button>
Подъем состояния Реагировать — Стройный До этого момента состояние клеток хранилось внутри них самих.Теперь хранилище состояния игры перенесено в компонент Board; состояние всех ячеек хранится в одном массиве.
Обработчик кликов handleClick также был перенесен в компонент «Доска».
Square теперь снова отображает состояние ячейки, используя свойство value. Board.svelte
<script> import Square from './Square.svelte'; let state = { squares: Array(9).
fill(''), }; function handleClick(i) { const squares = state.squares.slice(); squares[i] = 'X'; state.squares = squares; } </script> <div class="status">Next player: X</div> <div class="board"> {#each state.squares as value, i} <Square {value} on:click={e => handleClick(i)}/> {/each} </div>
Квадрат.стройный<script> export let value = ''; </script> <button on:click> {value} </button>
По очереди Реагировать — Стройный Добавлено появление нуля после крестика.Board.svelte
<script> import Square from './Square.svelte'; let state = { squares: Array(9).
fill(''), xIsNext: true, }; function handleClick(i) { const squares = state.squares.slice(); squares[i] = state.xIsNext ? 'X' : 'O'; state.squares = squares; state.xIsNext = !state.xIsNext; } </script> <div class="status">Next player: {state.xIsNext ? 'X' : 'O'}</div> <div class="board"> {#each state.squares as value, i} <Square {value} on:click={e => handleClick(i)}/> {/each} </div>
Объявление победителя Реагировать — Стройный В отдельный файл helper.js добавлена функция определения победителя CalculWinner. Запрещено нажимать на уже установленные ячейки даже после победы.heplers.js
export function calculateWinner(squares) { const lines = [ [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 < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }
Board.svelte<script> import Square from './Square.svelte'; import { calculateWinner } from '.
/helpers.js'; let state = { squares: Array(9).
fill(''), xIsNext: true, }; $: winner = calculateWinner(state.squares); function handleClick(i) { if (winner || state.squares[i]) return; const squares = state.squares.slice(); squares[i] = state.xIsNext ? 'X' : 'O'; state.squares = squares; state.xIsNext = !state.xIsNext; } </script> <div class="status"> {#if winner} <b>Winner: {winner}</b> {:else} Next player: {state.xIsNext ? 'X' : 'O'} {/if} </div> <div class="board"> {#each state.squares as value, i} <Square {value} on:click={e => handleClick(i)} /> {/each} </div>
Дальше проходить туториал не планирую, с фреймворком ознакомился.Репозиторий на GitHub https://github.com/nomhoi/tic-tac-toe Установка игры на локальный компьютер:
git clone [email protected]:nomhoi/tic-tac-toe.git cd tic-tac-toe npm install npm run dev
Запустите игру в браузере по адресу: http://localhost:5000/ .ОБНОВЛЯТЬ: Статья и исходный код исправлены в соответствии с замечаниями в комментариях.
ОБНОВЛЕНИЕ2: Добавлен репозиторий учебных пособий на GitHub.
-
Словацкий Язык
19 Oct, 24 -
Страх И Ненависть В Middleware
19 Oct, 24 -
Новый Необычный Сервис Микроблогов
19 Oct, 24 -
Шпаргалка По Параллелизму В C++
19 Oct, 24
