Свелте је радикално нови ЈаваСцрипт оквир који осваја срца програмера. Његова једноставна синтакса чини га одличним кандидатом за почетнике који желе да зароне у свет ЈаваСцрипт оквира. Један од најбољих начина за учење је изградња, тако да ћете у овом водичу научити како да користите функције које Свелте нуди за креирање једноставне игре вешала.
Преглед садржаја
Како Хангман ради
Хангман је игра погађања речи која се обично игра између двоје људи, где један играч размишља о речи, а други играч покушава да погоди ту реч слово по слово. Циљ играча који погађа је да открије тајну реч пре него што им понестане погрешних нагађања.
Када игра почне, домаћин бира тајну реч. Дужина речи се обично указује другом играчу (погађачу) помоћу цртица. Како нагађач погрешно погађа, цртају се додатни делови вешала, напредујући од главе, тела, руку и ногу.
Погађач побеђује у игри ако успе да погоди сва слова у речи пре него што се заврши цртање фигуре штапића. Хангман је одличан начин да тестирате вокабулар, резоновање и вештине закључивања.
Постављање развојног окружења
Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом. Ако желите да погледате живу верзију овог пројекта, можете погледати овај демо.
Да бисте покренули Свелте на вашој машини, препоручљиво је да повежете пројекат са Вите.јс. Да бисте користили Вите, уверите се да имате инсталиран Ноде Пацкаге Манагер (НПМ) и Ноде.јс на вашој машини. Такође можете користити алтернативни менаџер пакета као што је Иарн. Сада отворите свој терминал и покрените следећу команду:
npm create vite
Ово ће започети нови пројекат са Вите интерфејсом командне линије (ЦЛИ). Именујте свој пројекат, изаберите Свелте као оквир и поставите варијанту на ЈаваСцрипт. Сада цд у директоријум пројекта и покрените следећу команду да бисте инсталирали зависности:
npm install
Сада отворите пројекат и у директоријуму срц креирајте датотеку хангманАрт.јс и избришите фасциклу имовине и либ. Затим обришите садржај датотека Апп.свелте и Апп.цсс. У датотеци Апп.цсс додајте следеће;
:root{
background-color: rgb(0, 0, 0);
color:green;
font-family: monospace;
}
Копирајте садржај датотеке хангманАрт.јс из овог пројекта ГитХуб спремиште, а затим га налепите у сопствену датотеку хангманАрт.јс. Можете покренути развојни сервер са следећом командом:
npm run dev
Дефинисање логике апликације
Отворите датотеку Апп.свелте и направите ознаку скрипте која ће задржати већину логике апликације. Направите низ речи да бисте садржали листу речи.
let words = [
"appetizer",
"roommates",
"shrinking",
"freedom",
"happiness",
"development",
];
Затим увезите низ хангманАрт из датотеке хангманАрт.јс. Затим креирајте променљиву усерИнпут, променљиву рандомНумбер и другу променљиву која ће држати насумично изабрану реч из низа речи.
Доделите изабрану реч другој почетној променљивој. Поред осталих променљивих, креирајте следеће варијабле: матцх, мессаге, ХангманСтагес и оутпут. Иницијализујте излазну променљиву низом цртица, у зависности од дужине изабране речи. Доделите низ хангманАрт променљивој хангманСтагес.
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;
Додавање неопходних функционалности
Док играч нагађа, желите да покажете резултат играчу. Овај излаз ће помоћи играчу да зна да ли је погодио исправно или погрешно. Креирајте функцију генератеОутпут која ће се бавити задатком генерисања излаза.
function generateOutput(input1, input2) {
output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] === "-") {
output += input1[i];
} else {
output += "-";
}
}
}
За свако нагађање које играч пошаље, програм ће морати да утврди да ли је то тачно. Направите функцију евалуације која ће померити цртеж вешала у следећу фазу ако играч погоди погрешно, или позовите функцију генератеОутпут ако играч добро погоди.
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 = "";
}
И тиме сте употпунили логику апликације. Сада можете прећи на дефинисање ознаке.
Дефинисање ознаке пројекта
Направите главни елемент који ће сместити сваки други елемент у игри. У главном елементу дефинишите х1 елемент са текстом Хангман.
<h1 class="title">
Hangman
</h1>
Направите слоган и рендерујте фигуру вешала у првој фази само ако је број елемената у низу ХангманСтагес већи од 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}
Након тога примените логику да прикажете поруку која показује да ли је играч победио или изгубио:
{#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}
Затим, рендерујте излаз и образац за прихватање уноса од корисника. Излаз и образац треба да се приказују само ако елемент са класом „порука“ није на екрану.
{#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}
Сада можете додати одговарајући стил апликацији. Направите ознаку стила и у њу додајте следеће:
* {
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;
}
Направили сте игру вешала са Свелтеом. Одличан посао!
Шта Свелте чини невероватном?
Свелте је оквир који је релативно лако покупити и научити. Пошто је Свелтеова логичка синтакса слична Ванилла ЈаваСцрипт-у, ово га чини савршеним избором ако желите оквир који може да држи сложене ствари као што је реактивност, док вам даје прилику да радите са Ванилла ЈаваСцрипт-ом. За сложеније пројекте можете користити СвелтеКит—мета оквир који је развијен као Свелтеов одговор на Нект.јс.