Tic Tac Toe Bagian 0: Membandingkan Langsing dan Bereaksi
Tic Tac Toe Bagian 1: Svelte dan Canvas 2D
Tic Tac Toe Bagian 2: Stateless Undo / Redo
Tic Tac Toe, bagian 3: Undo / Redo dengan penyimpanan perintah
Tic Tac Toe Bagian 4: Berinteraksi dengan Flask Backend Menggunakan HTTP
Ada tutorial di situs web Bereaksi yang menjelaskan pengembangan game Tic Tac Toe. Saya memutuskan untuk mengulangi pengembangan game ini di Svelte. Artikel ini hanya mencakup bagian pertama dari tutorial, sebelum pelaksanaan sejarah gerakan. Untuk keperluan pengenalan kerangka kerja, ini sudah cukup. Setiap bagian artikel sesuai dengan bagian tutorial, berisi tautan ke kode sumber dari kedua kerangka kerja.
Bereaksi - Langsing
App.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>
Board.svelte <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>
Square.svelte <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>
Setiap komponen dieksekusi dalam file terpisah. Komponen dapat berisi kode, markup html, dan gaya css. Penggunaan komponen bersarang ditampilkan: komponen Square diimpor ke komponen Board, komponen Board diimpor ke komponen App. Ditampilkan menggunakan setiap blok dalam komponen Dewan. Gaya jarang berubah, jadi saya menempatkan mereka setelah markup html, agar tidak membalik lagi.
Bereaksi - Langsing
Square mendeklarasikan properti nilai.
<script> export let value = ''; </script> <button>{value}</button>
Papan menunjukkan penggunaan indeks array untuk mengisi sel.
<div class="board"> {#each Array(9) as square, i} <Square value={i}/> {/each} </div>
Bereaksi - Langsing
Dengan mengklik di sel, tanda silang muncul. Square menambahkan DOM handleClick event handler untuk klik mouse. Menambahkan variabel status untuk menampilkan tanda silang dalam sel.
<script> export let value = ''; let state = ''; function handleClick() { state = 'X'; } </script> <button on:click={handleClick}> {state} </button>
Bereaksi - Langsing
Sampai saat itu, keadaan sel disimpan di dalamnya. Sekarang penyimpanan status permainan telah ditransfer ke komponen Dewan, status semua sel disimpan dalam satu larik. Handler klik handler juga telah dipindahkan ke komponen Dewan. Kotak sekarang menampilkan keadaan sel lagi menggunakan properti nilai.
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>
Square.svelte <script> export let value = ''; </script> <button on:click> {value} </button>
Bereaksi - Langsing
Menambahkan penampilan kaki setelah salib.
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>
Bereaksi - Langsing
Menambahkan fungsi untuk menentukan pemenang, menghitung Pemenang dalam file terpisah helper.js. Dilarang mengklik sel yang sudah ada setelah kemenangan.
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>
Saya tidak berencana untuk menjalani tutorial lagi, saya berkenalan dengan framework.
Repositori GitHub
https://github.com/nomhoi/tic-tac-toe
Memasang game di komputer lokal:
git clone git@github.com:nomhoi/tic-tac-toe.git cd tic-tac-toe npm install npm run dev
Kami meluncurkan game di browser di alamat: http: // localhost: 5000 / .
PEMBARUAN: Memperbaiki artikel dan kode sumber sesuai dengan komentar dalam komentar.
UPDATE2: Menambahkan repositori tutorial di GitHub.