วิธีสร้างเกมเพชฌฆาตด้วย Svelte
Svelte เป็นเฟรมเวิร์ก JavaScript ใหม่สุดขั้วที่ชนะใจนักพัฒนา รูปแบบไวยากรณ์ที่เรียบง่ายทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับผู้เริ่มต้นที่ต้องการดำดิ่งสู่โลกของกรอบงาน JavaScript หนึ่งในวิธีที่ดีที่สุดในการเรียนรู้คือการสร้าง ดังนั้นในคู่มือนี้ คุณจะได้เรียนรู้วิธีใช้ฟีเจอร์ที่ Svelte เสนอเพื่อสร้างเกมเพชฌฆาตง่ายๆ
วิธีการทำงานของเพชฌฆาต
Hangman เป็นเกมถอดรหัสคำศัพท์ที่น่าสนใจซึ่งมักเล่นโดยคนสองคน โดยในระหว่างนั้นผู้เข้าร่วมคนหนึ่งจะปกปิดคำศัพท์ ในขณะที่อีกคนหนึ่งพยายามที่จะแยกแยะคำนั้นผ่านการพยายามเดาตัวอักษรอย่างต่อเนื่อง เป้าหมายหลักของแต่ละบุคคลที่พยายามคาดเดาคือการเปิดเผยคำที่ลึกลับก่อนที่จะหมดโอกาสในการคาดเดาที่ผิดพลาด
เมื่อเริ่มเกม วิทยากรจะเลือกคำที่ปกปิดไว้ โดยทั่วไป ความยาวของคำจะเปิดเผยให้ฝ่ายตรงข้าม (สมมุติฐาน) โดยใช้ยัติภังค์ ในขณะที่ผู้สมมุติฐานทำการอนุมานที่ผิดพลาด ส่วนประกอบเพิ่มเติมของโครงตะแลงแกงจะถูกร่างออกมา โดยเริ่มจากกะโหลก ลำตัว แขนขา และอวัยวะต่างๆ
ความสำเร็จของผู้เดาในการบรรลุการเปิดเผยตัวอักษรฉบับเต็มก่อนที่ภาพประกอบของสติกแมนจะเสร็จสิ้นจะเป็นตัวกำหนดชัยชนะในเกมนี้ เพชฌฆาตทำหน้าที่เป็นวิธีที่มีประสิทธิภาพในการประเมินความรู้ทางภาษา การคิดเชิงตรรกะ และความสามารถในการอนุมาน
การตั้งค่าสภาพแวดล้อมการพัฒนา
ซอร์สโค้ดที่ใช้ในการพยายามนี้ได้รับการอัปโหลดไปยังพื้นที่เก็บข้อมูล GitHub ซึ่งสามารถเข้าถึงได้โดยไม่เสียค่าใช้จ่ายภายใต้เงื่อนไขของใบอนุญาต MIT สำหรับผู้ที่สนใจตรวจสอบตัวอย่างการดำเนินงานของโครงการนี้ สามารถอ่านการสาธิตที่ให้ไว้ในที่นี้
หากต้องการตั้งค่าโปรเจ็กต์ Svelte ใหม่โดยใช้ Vite.js ตรวจสอบให้แน่ใจว่าคุณมีทั้ง Node Package Manager (NPM) และ Node.js ติดตั้งไว้ล่วงหน้าบนคอมพิวเตอร์ของคุณ นอกจากนี้ คุณยังอาจใช้ตัวจัดการแพ็คเกจอื่น เช่น Yarn ได้หากต้องการ เพื่อเริ่มต้นกระบวนการ โปรดทำตามขั้นตอนเหล่านี้ในเทอร์มินัลของคุณ:
npm create vite
การเริ่มต้นความพยายามครั้งใหม่ผ่านการใช้ Command Line Interface (CLI) เราสามารถเริ่มต้นด้วยการระบุตัวระบุสำหรับโครงการที่เกี่ยวข้อง ต่อมา เลือก Svelte เป็นเฟรมเวิร์กที่ต้องการในขณะที่กำหนดตัวแปรให้เป็น JavaScript ทำตามขั้นตอนเริ่มต้นเหล่านี้ จำเป็นต้องนำทางไปยังไดเร็กทอรีโปรเจ็กต์ที่ระบุ และดำเนินการคำสั่งการติดตั้งเฉพาะเพื่อจัดหาการขึ้นต่อกันที่จำเป็น
npm install
โปรดทำตามขั้นตอนเหล่านี้เพื่อแก้ไขแอปพลิเคชัน Svelte ของคุณ:1. เปิดไดเรกทอรีโครงการที่มีทั้งโฟลเดอร์ “App” (หนึ่งโฟลเดอร์สำหรับส่วนหน้าและอีกโฟลเดอร์หนึ่งสำหรับส่วนหลัง)2. นำทางไปยังโฟลเดอร์ “src” ภายในไดเร็กทอรีโปรเจ็กต์ส่วนหน้า3. สร้างไฟล์ JavaScript ใหม่ชื่อ “hangmanArt.js” นี่จะทำหน้าที่เป็นจุดเริ่มต้นสำหรับตรรกะของเกมของเรา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 จากไฟล์ hangmanArt.js ต่อไป เราจะกำหนดตัวแปรสามตัว-userInput ซึ่งแสดงถึงอินพุตที่ผู้ใช้ให้มา RandomNumber ซึ่งทำหน้าที่เป็นค่าจำนวนเต็มที่กำหนดเองที่สร้างขึ้นแบบสุ่มสำหรับการเลือกคำที่ซ่อนอยู่ และสุดท้าย SelectWord ซึ่งเก็บคำที่เลือกแบบสุ่มจากอาร์เรย์ คำ
สร้างตัวแปรใหม่ชื่อ"selectedWord"และกำหนดค่าเป็น"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 คุณสามารถสร้างฟังก์ชันสองรายการชื่อ ประเมิน และ Generate\_output ได้ อันแรกควรถูกเรียกทุกครั้งที่ผู้ใช้ส่งการเดา ในขณะที่อันหลังควรถูกเรียกเมื่อผู้ใช้ทายถูกเท่านั้น ต่อไปนี้คือวิธีที่คุณสามารถเขียนฟังก์ชันเหล่านี้ได้:pythondef ประเมิน(คำ, ตัวอักษร):# ตรวจสอบว่าตัวอักษรที่ส่งมาปรากฏในตัวอักษร word หรือไม่ถ้าตัวอักษรใน word:return Trueelse:return Falsedef Gene_output():# วาดภาพเพชmanฆาตโดยใช้ PIL (Python Imaging Library )จากรูปภาพนำเข้า PIL, 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>
แสดงผลร่างเพชฌฆาตในระยะเริ่มต้นเมื่อความยาวขององค์ประกอบภายใน HangmanStagesarray เกินศูนย์
<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 โดยใช้ 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