Cách tạo trò chơi Hangman với Svelte
Svelte là một framework JavaScript hoàn toàn mới đang chiếm được cảm tình của các nhà phát triển. Cú pháp đơn giản của nó khiến nó trở thành một ứng cử viên tuyệt vời cho những người mới bắt đầu muốn tìm hiểu sâu hơn về thế giới của các framework JavaScript. Một trong những cách tốt nhất để học là xây dựng, vì vậy trong hướng dẫn này, bạn sẽ học cách sử dụng các tính năng mà Svelte cung cấp để tạo một trò chơi treo cổ đơn giản.
Cách thức hoạt động của Hangman
Hangman là một trò chơi giải mã từ hấp dẫn thường được hai người tham gia, trong đó một người tham gia giấu một từ trong khi người khác cố gắng phân biệt từ đó thông qua những nỗ lực liên tiếp để đoán các chữ cái của nó. Mục tiêu chính của người thử đoán là khám phá từ bí ẩn trước khi tận dụng hết mọi cơ hội để phỏng đoán sai lầm.
Khi bắt đầu trò chơi, người điều phối chọn một thuật ngữ bị che giấu. Thông thường, độ dài của từ được tiết lộ cho đối phương (người theo chủ nghĩa giả định) bằng dấu gạch nối. Trong khi người theo thuyết giả định đưa ra những suy luận sai lầm, các thành phần khác của khung giá treo cổ được phác thảo ra, tiến dần từ hộp sọ, thân, các chi và các phần phụ.
Sự thành công của người đoán trong việc tiết lộ đầy đủ chữ cái trước khi hoàn thành hình minh họa người que sẽ quyết định chiến thắng trong trò chơi này. Hangman đóng vai trò như một phương tiện hiệu quả để đánh giá kiến thức ngôn ngữ, tư duy logic và khả năng suy luận của một người.
Thiết lập môi trường phát triển
Mã nguồn được sử dụng trong nỗ lực này đã được tải lên kho lưu trữ GitHub, nơi có thể truy cập miễn phí theo các điều khoản của giấy phép MIT. Đối với những người quan tâm đến việc kiểm tra một ví dụ hoạt động của dự án này, họ có thể xem qua phần trình diễn được cung cấp ở đây.
Để thiết lập dự án Svelte mới bằng Vite.js, hãy đảm bảo rằng bạn đã cài đặt sẵn cả Trình quản lý gói Node (NPM) và Node.js trên máy tính của mình. Ngoài ra, bạn có thể sử dụng một trình quản lý gói khác như Yarn nếu muốn. Để bắt đầu quá trình, vui lòng làm theo các bước sau trong thiết bị đầu cuối của bạn:
npm create vite
Bắt đầu một nỗ lực mới thông qua việc sử dụng Giao diện dòng lệnh (CLI), người ta có thể bắt đầu bằng cách cung cấp mã định danh cho dự án tương ứng của mình. Sau đó, chọn Svelte làm khung ưu tiên trong khi chỉ định biến thể là JavaScript. Thực hiện theo các bước ban đầu này, bắt buộc phải điều hướng đến thư mục dự án đã chỉ định và thực hiện lệnh cài đặt cụ thể để có được mọi phụ thuộc cần thiết.
npm install
Hãy làm theo các bước sau để sửa đổi ứng dụng Svelte của bạn:1. Mở thư mục dự án chứa cả hai thư mục “Ứng dụng” (một cho giao diện người dùng và một cho phụ trợ).2. Điều hướng đến thư mục “src” trong thư mục dự án giao diện người dùng.3. Tạo một tệp JavaScript mới có tên “hangmanArt.js”. Điều này sẽ đóng vai trò là điểm vào cho logic trò chơi của chúng ta.4. Xóa các thư mục “tài sản” và “lib” khỏi thư mục dự án giao diện người dùng nếu chúng tồn tại. Chúng thường được tạo bởi các công cụ xây dựng trong quá trình phát triển nhưng có thể không cần thiết cho việc triển khai sản xuất.5. Xóa nội dung của cả hai tệp “App.svelte” và “App.css” nằm trong thư mục tương ứng của chúng.6. Trong tệp “App.css”, hãy thêm đoạn mã sau vào
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Người ta có thể trích xuất nội dung của tệp “hangmanArt.js”, nằm trong kho lưu trữ trực tuyến của dự án hiện tại trên GitHub, bằng cách sử dụng các phương pháp tiêu chuẩn để sao chép và dán. Sau khi hoàn thành việc này, người ta có thể chèn trực tiếp tài liệu đã sao chép vào bản sao cá nhân của tệp “hangmanArt.js” bằng phương pháp tương tự. Để bắt đầu quá trình chạy máy chủ phát triển cục bộ, chỉ cần thực hiện lệnh được chỉ định được cung cấp trong tài liệu.
npm run dev
Xác định logic của ứng dụng
Mở tệp “App.svelte”, có thể là thành phần hoặc vùng chứa chính cho ứng dụng Svelte của bạn và trong đó, chèn phần tử sẽ đóng vai trò là kho lưu trữ chính cho logic tính toán điều chỉnh hành vi của ứng dụng. Tiếp theo, thiết lập một mảng word trống để lưu trữ một tập hợp các mục từ vựng mà từ đó có thể thực hiện nhiều thao tác khác nhau trong suốt chương trình.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Tiếp theo, chúng ta sẽ nhập đối tượng hangmanArt từ tệp hangmanArt.js. Sau đó, chúng tôi sẽ xác định ba biến-userInput , đại diện cho đầu vào do người dùng cung cấp; số ngẫu nhiên , đóng vai trò như một giá trị số nguyên tùy ý được tạo ngẫu nhiên để chọn một từ ẩn; và cuối cùng, selectedWord , chứa từ được chọn ngẫu nhiên từ mảng word.
Tạo một biến mới có tên là “selectedWord” và gán cho nó giá trị là “word”. Sau đó, khởi tạo một chuỗi trống có tên là “output”, đặt độ dài của nó bằng số ký tự trong “word”. Thiết lập các biến bổ sung bao gồm “khớp”, “tin nhắn”, “hangmanStages” và “đầu vào”. Cuối cùng, đặt “hangmanStages” bằng mảng “hangmanArt” và gán “word” cho biến “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;
Thêm các chức năng cần thiết
Chắc chắn! Đây là nỗ lực của tôi trong việc diễn giải hướng dẫn của bạn theo cách phức tạp hơn:> Khi người dùng gửi thông tin đầu vào thông qua lời nhắc của trò chơi, điều quan trọng là họ phải nhận được phản hồi ngay lập tức về việc phản hồi của họ là đúng hay sai. Để tạo điều kiện thuận lợi cho quá trình này, chúng ta có thể tạo một phương thức có tên generate\_output tạo ra hình ảnh trực quan của kết quả so sánh và hiển thị nó trên màn hình để người dùng có thể thấy họ đã làm tốt như thế nào. Bằng cách triển khai chức năng này, chúng tôi đảm bảo rằng người dùng sẽ tương tác với trò chơi bằng cách mang lại cho họ sự hài lòng tức thì và củng cố trải nghiệm học tập của họ.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i\+\+) {
if (input2[i] === "-") {
output \+= input1[i];
} else {
output \+= "-";
}
}
}
Để triển khai chức năng này trong Python, bạn có thể tạo hai hàm có tên đánh giá và generate\_output. Cái trước nên được gọi bất cứ khi nào người dùng gửi dự đoán, trong khi cái sau chỉ nên được gọi khi người dùng đoán đúng. Đây là cách bạn có thể viết các hàm này:pythondef đánh giá(word, letter):# Kiểm tra xem thư đã gửi có xuất hiện trong chữ cái wordif trong word:return Trueelse:return Falsedef generate_output():# Vẽ hình ảnh người treo cổ bằng PIL (Thư viện hình ảnh Python) )từ PIL import Image, ImageDraw# Mở một hình ảnh mới với nền trong suốtimg=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 = "";
}
Thật vậy, sau khi đã điều hướng thành công các thành phần logic của ứng dụng, giờ đây người ta có thể tiến hành mô tả cách trình bày trực quan thông qua định nghĩa đánh dấu.
Xác định Markup của dự án
php Người treo cổ
<h1 class="title">
Hangman
</h1>
Hiển thị hình người treo cổ ở giai đoạn đầu khi độ dài của các phần tử trong mảng hangmanStages vượt quá 0.
<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}
Sau đó, đưa ra lý do để đưa ra thông báo hiển thị xem người tham gia đã chiến thắng hay bị đánh bại:
{#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}
Kết xuất đầu ra và một biểu mẫu để chấp nhận đầu vào từ người dùng khi phần tử có “thông báo” lớp không có trong DOM bằng cách sử dụng 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}
Để cải thiện giao diện của ứng dụng, bây giờ chúng tôi sẽ áp dụng một thiết kế hấp dẫn bằng cách tạo phần tử trong đó chúng tôi sẽ kết hợp các quy tắc CSS cụ thể. Mã kết quả phải được thêm vào giữa thẻ mở và đóng của tài liệu HTML của chúng tôi.
* {
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;
}
Chúc mừng bạn đã phát triển thành công trò chơi treo cổ bằng Svelte, một thành tích thực sự ấn tượng!
Điều gì khiến Svelte tuyệt vời?
Svelte là một framework linh hoạt được biết đến với giao diện thân thiện với người dùng và cấu trúc đơn giản. Cú pháp của nó tương tự như JavaScript thông thường, khiến nó trở thành một lựa chọn lý tưởng cho những ai đang tìm kiếm giải pháp đáp ứng các tính năng nâng cao như lập trình phản ứng nhưng vẫn cho phép họ sử dụng các kỹ thuật JavaScript quen thuộc. Trong trường hợp một dự án đòi hỏi độ phức tạp cao hơn, SvelteKit tự cung cấp giải pháp thay thế phù hợp cho các khung như Next.js.