Како да направите игру Хангман са Свелте-ом

Свелте је радикално нови ЈаваСцрипт оквир који осваја срца програмера. Његова једноставна синтакса чини га одличним кандидатом за почетнике који желе да зароне у свет ЈаваСцрипт оквира. Један од најбољих начина за учење је изградња, тако да ћете у овом водичу научити како да користите функције које Свелте нуди да бисте креирали једноставну игру вешала.

Како Хангман ради

Хангман је игра погађања речи која се обично игра између двоје људи, где један играч размишља о речи, а други играч покушава да погоди ту реч слово по слово. Циљ играча који погађа је да открије тајну реч пре него што им понестане погрешних нагађања.

Када игра почне, домаћин бира тајну реч. Дужина речи се обично указује другом играчу (погађачу) помоћу цртица. Како нагађач погрешно погађа, цртају се додатни делови вешала, напредујући од главе, тела, руку и ногу.

Погађач побеђује у игри ако успе да погоди сва слова у речи пре него што се заврши цртање фигуре штапића. Хангман је одличан начин да тестирате вокабулар, резоновање и вештине закључивања.

Постављање развојног окружења

Да бисте покренули Свелте на вашој машини, препоручљиво је да повежете пројекат са Вите.јс. Да бисте користили Вите, уверите се да јесте Менаџер пакета чворова (НПМ) и Ноде.јс инсталиран на вашој машини. Такође можете користити алтернативни менаџер пакета као што је Иарн. Сада отворите свој терминал и покрените следећу команду:

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;

Додавање неопходних функционалности

Док играч нагађа, желите да покажете резултат играчу. Овај излаз ће помоћи играчу да зна да ли је погодио исправно или погрешно. Креирајте функцију генератеОутпут да се носи са задатком генерисања излаза.

functiongenerateOutput(input1, input2) {
 output = "";
for (let i = 0; i < input1.length; i++) {
if (input2[i] "-") {
 output += input1[i];
 } else {
 output += "-";
 }
 }
}

За свако нагађање које играч пошаље, програм ће морати да утврди да ли је то тачно. Направите ан проценити, оценити функција која ће померити цртеж вешала у следећу фазу ако играч погоди погрешно или позове генератеОутпут функција ако играч исправно погоди.

functionevaluate() {
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 елемент са текстом Хангман.

<h1class="title">
 Hangman
h1>

Направите слоган и рендерујте фигуру вешала у првој фази само ако је број елемената у ХангманСтагес низ је већи од 0.

class="tagline">
 I'm thinking of a word. Could you guess the letters in that word?
</div>
{#if hangmanStages.length > 0}
class="hangman">
 {hangmanStages[0]}</pre>
{/if}

Након тога примените логику да прикажете поруку која показује да ли је играч победио или изгубио:

{#if hangmanStages.length 1}

class="message" bind:this={message}>You Lose...</div>
{/if}
{#if selectedWord match}

class="message" bind:this={message}>You Win...</div>
{/if}

Затим, рендерујте излаз и образац за прихватање уноса од корисника. Излаз и образац би требало да се приказују само ако елемент са класом "порука" није на екрану.

{#if !message}

class="output">
 {#each output as letter}
 {#if letter !== "-"}
class="complete box">{letter}</span>
 {:else}
class="incomplete box" />
 {/if}
 {/each}
 </div>
 evaluate()}>
 type="text"
 placeholder="Enter a letter"
 maxlength="1"
 bind: value={userInput}
 />
"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.2pxgreen;
height:40px;
font-size: 15px;
 }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: inherit;
border: dotted 1.2pxgreen;
 }
.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;
 }

Направили сте игру вешала са Свелтеом. Одличан посао!

Шта Свелте чини невероватном?

Свелте је оквир који је релативно лако покупити и научити. Пошто је Свелтеова логичка синтакса слична Ванилла ЈаваСцрипт-у, ово га чини савршеним избором ако желите оквир који може да држи сложене ствари као што је реактивност, док вам даје прилику да радите са Ванилом ЈаваСцрипт. За сложеније пројекте можете користити СвелтеКит—мета оквир који је развијен као Свелтеов одговор на Нект.јс.