如何使用 Svelte 創建絞刑吏遊戲
Svelte 是一個全新的 JavaScript 框架，贏得了開發人員的青睞。它簡單的語法使其成為想要深入了解 JavaScript 框架世界的初學者的絕佳選擇。最好的學習方法之一就是通過構建，因此在本指南中，您將學習如何使用 Svelte 提供的功能來創建簡單的劊子手游戲。
劊子手是如何工作的
Hangman 是一種有趣的單詞破譯遊戲，通常由兩個人參與，其中一個參與者隱藏一個單詞，而另一個參與者則通過連續嘗試猜測其字母來努力辨別它。嘗試猜測的個人的主要目標是在用盡所有錯誤猜測的機會之前揭開神秘的單詞。
遊戲開始時，主持人選擇一個隱藏術語。通常，單詞的長度通過連字符洩露給對手（假設論者）。雖然假設論者提出了錯誤的推論，但絞刑架框架的進一步組成部分被勾畫出來，從頭蓋骨、軀幹、四肢和附肢推進。
猜謎者在火柴人插圖完成之前成功地獲得完整的字母啟示決定了這場遊戲的勝利。絞刑是評價一個人的語言知識、邏輯思維和推理能力的有效手段。
設置開發環境
本次活動中使用的源代碼已上傳到 GitHub 存儲庫，可以根據 MIT 許可條款免費訪問。對於那些有興趣檢查該項目的操作示例的人，他們可以仔細閱讀此處提供的演示。
要使用 Vite.js 設置新的 Svelte 項目，請確保您的計算機上預安裝了 Node Package Manager (NPM) 和 Node.js。此外，如果需要，您也可以使用其他包管理器，例如 Yarn。為了啟動該過程，請在您的終端中執行以下步驟:
npm create vite
通過使用命令行界面 (CLI) 啟動一項新的工作，可以通過為其各自的項目提供標識符來開始。隨後，選擇 Svelte 作為首選框架，同時指定變體為 JavaScript。完成這些初始步驟後，必須導航到指定的項目目錄並執行特定的安裝命令才能獲取任何必要的依賴項。
npm install
請按照以下步驟修改您的 Svelte 應用程序:1.打開包含兩個“App”文件夾的項目目錄（一個用於前端，一個用於後端）。2.導航到前端項目目錄中的“src”文件夾。3.創建一個名為“hangmanArt.js”的新 JavaScript 文件。這將作為我們遊戲邏輯的入口點。4。從前端項目目錄中刪除“assets”和“lib”文件夾（如果存在）。這些通常由構建工具在開發期間生成，但生產部署可能不需要。5。清除位於各自目錄中的“App.svelte”和“App.css”文件的內容。6。在“App.css”文件中，添加以下代碼片段
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
人們可以通過採用複制和粘貼的標準做法來提取“hangmanArt.js”文件的內容，該文件位於 GitHub 上當前項目的在線存儲庫中。完成此操作後，人們可以使用類似的方法將復制的材料直接插入到他們的“hangmanArt.js”文件的個人副本中。要啟動運行本地開發服務器的過程，只需執行文檔中提供的指定命令即可。
npm run dev
定義應用程序的邏輯
打開“App.svelte”文件，該文件可能是 Svelte 應用程序的主要組件或容器，並在其中插入一個 元素，該元素將用作管理應用程序行為的計算邏輯的主要存儲庫。接下來，建立一個空的“words”數組來存儲詞彙項的集合，從中可以在整個程序中執行各種操作。
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
接下來，我們將從 hangmanArt.js 文件導入 hangmanArt 對象。隨後，我們將定義三個變量- userInput ，表示用戶提供的輸入； randomNumber ，作為隨機生成的任意整數值，用於選擇隱藏詞；最後是selectedWord，它保存從words數組中隨機選擇的單詞。
創建一個名為“selectedWord”的新變量，並將其值賦給“word”。然後，初始化一個名為“output”的空字符串，將其長度設置為等於“word”中的字符數。設置其他變量，包括“match”、“message”、“hangmanStages”和“input”。最後，將“hangmanStages”設置為等於“hangmanArt”數組，並將“word”分配給“selectedWord”變量。
import { hangmanArt } from "./hangmanArt";
let userInput;
let randomNum = Math.floor(Math.random() * (words.length-1));
let selectedWord = words[randomNum].toUpperCase();
let initial = selectedWord;
let match;
let message;
let hangmanStages = hangmanArt;
let output = "";
[...selectedWord].forEach(() => (output \+= "-"));
match = output;
添加必要的功能
當然！以下是我嘗試以更複雜的方式解釋您的指令:> 當用戶通過遊戲提示提交輸入時，對於他們來說，立即收到有關其響應是否正確的反饋非常重要。為了促進這個過程，我們可以創建一個名為“generate_output”的方法，它生成比較結果的可視化表示並將其顯示在屏幕上，以便用戶可以看到他們的表現如何。通過實現此功能，我們可以為用戶提供即時滿足感並增強他們的學習體驗，從而確保用戶參與遊戲。
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i\+\+) {
if (input2[i] === "-") {
output \+= input1[i];
} else {
output \+= "-";
}
}
}
要在 Python 中實現此功能，您可以創建兩個名為“evaluate”和“generate_output”的函數。每當用戶提交猜測時都應該調用前者，而只有當用戶做出正確的猜測時才應該調用後者。下面是編寫這些函數的方法: pythondefvaluate(word, letter):# 檢查提交的字母是否出現在單詞中 if letter in word:return Trueelse:return Falsedefgenerate_output():# 使用 PIL (Python Imaging Library) 繪製劊子手圖像) from PIL import Image, ImageDraw# 打開一個新的透明圖像背景img=Image.new(‘RGBA’, (600,
function evaluate() {
let guess = userInput.toUpperCase().trim();
if (!guess) {
return;
}
if (selectedWord.includes(guess)) {
selectedWord = selectedWord.replaceAll(guess, "-");
generateOutput(initial, selectedWord);
} else {
hangmanStages.shift();
hangmanStages = hangmanStages;
}
userInput = "";
}
事實上，在成功導航應用程序的邏輯組件之後，現在可以繼續通過標記定義來描繪視覺表示。
定義項目的標記
PHP 劊子手
<h1 class="title">
Hangman
</h1>
當hangmanStages數組中的元素長度超過零時，在初始階段渲染劊子手圖形。
<div class="tagline">
I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
<pre class="hangman">
{hangmanStages[0]}</pre>
{/if}
隨後，制定顯示參與者是勝利還是失敗的通知的基本原理:
{#if hangmanStages.length === 1}
<div class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord === match}
<div class="message" bind:this={message}>You Win...</div>
{/if}
當 DOM 中不存在“message”類的元素時，使用 JavaScript 渲染輸出和表單以接受用戶的輸入。
{#if !message}
<div class="output">
{#each output as letter}
{#if letter !== "-"}
<span class="complete box">{letter}</span>
{:else}
<span class="incomplete box" />
{/if}
{/each}
</div>
<form on:submit|preventDefault={() => evaluate()}>
<input
type="text"
placeholder="Enter a letter"
maxlength="1"
bind:value={userInput}
/>
<button type="submit">Submit</button>
</form>
{/if}
為了增強應用程序的外觀，我們現在將通過創建一個“ ”元素來應用吸引人的設計，在該元素中我們將合併特定的 CSS 規則。生成的代碼應添加在 HTML 文檔的開始和結束 ``` 標記之間。
* {
color: green;
text-align: center;
}
main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
input,
button {
text-transform: uppercase;
background-color: transparent;
border: solid 1.2px green;
height:40px;
font-size: 15px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2px green;
}
.output {
display: flex;
font-size: 23px;
font-weight: 600;
height: 45px;
gap: 10px;
justify-content: center;
}
.hangman {
font-size: 32px;
}
form {
margin-top: 50px;
}
.tagline,
.message {
font-size: 20px;
}
恭喜您成功使用 Svelte 開發了一款劊子手游戲，這確實是一項令人印象深刻的成就！
是什麼讓 Svelte 如此神奇?
Svelte 是一個多功能框架，以其用戶友好的界面和簡單的結構而聞名。它的語法與普通 JavaScript 類似，對於那些尋求能夠容納反應式編程等高級功能的解決方案的人來說，它是一個理想的選擇，但仍然允許他們利用熟悉的 JavaScript 技術。如果項目需要更高的複雜性，SvelteKit 可以作為 Next.js 等框架的合適替代方案。