井字游戏第0部分：比较苗条和反应
井字游戏第1部分：Svelte and Canvas 2D
井字游戏第2部分：无状态复原/重做
井字游戏，第3部分：使用命令存储撤消/重做
井字游戏第4部分：使用HTTP与Flask后端交互
在React网站上有一个教程 ，描述了Tic Tac Toe游戏的开发。 我决定在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标记之后，以免再次翻转它们。
反应 - 斯维尔特
Square 声明一个 value 属性 。
<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>
反应 - 斯维尔特
直到那一刻，这些单元的状态都存储在其中。 现在，游戏状态的存储已转移到棋盘组件，所有单元的状态都存储在一个阵列中。 句柄处理程序clickClick也已移至Board组件。 Square现在使用value属性再次显示单元格状态。
滑板 <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>
反应 - 斯维尔特
十字架后增加了脚趾的外观。
滑板 <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中添加了确定获胜者CalculationWinner的功能。 胜利后，禁止点击已经建立的单元。
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; }
滑板 <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 git@github.com:nomhoi/tic-tac-toe.git cd tic-tac-toe npm install npm run dev
我们在以下地址的浏览器中启动游戏： http：// localhost：5000 / 。
更新：根据注释中的注释修复了文章和源代码。
UPDATE2：在GitHub上添加了教程存储库。