Svelte is a radical new JavaScript framework that is winning the hearts of developers. Its simple syntax makes it a great candidate for beginners who are looking to dive into the world of JavaScript frameworks. One of the best ways to learn, is by building, so in this guide, you will learn how to use the features Svelte offers to create a simple hangman game.
How Hangman Works
Hangman is a word-guessing game typically played between two people, where one player thinks of a word and the other player tries to guess that word letter by letter. The objective for the guessing player is to figure out the secret word before they run out of incorrect guesses.
When the game starts, the host selects a secret word. The length of the word is usually indicated to the other player (guesser) using dashes. As the guesser makes incorrect guesses, additional parts of the hangman are drawn, progressing from head, body, arms, and legs.
The guesser wins the game if they manage to guess all the letters in the word before the stickman figure drawing is complete. Hangman is a great way to test vocabulary, reasoning, and deduction skills.
Setting Up the Development Environment
The code used in this project is available in aGitHub repositoryand is free for you to use under the MIT license. If you want to have a look at a live version of this project, you can check outthis demo.
To get Svelte up and running on your machine, it is advisable to scaffold the project with Vite.js. To use Vite, make sure you haveNode Package Manager (NPM)andNode.js installed on your machine. you may also use an alternative package manager like Yarn. Now, open your terminal and run the following command:
This will start a new project with the ViteCommand Line Interface (CLI). Name your project, selectSvelteas the framework, and set the variant toJavaScript. Nowcdinto the project directory and run the following command to install the dependencies:
Now, open the project, and in thesrcfolder, create ahangmanArt.jsfile and delete theassetsandlibfolder. Then clear the contents of theApp.svelteandApp.cssfiles. In theApp.cssfile, add the following;
Copy the contents of thehangmanArt.jsfile from this project’sGitHub repository, and then paste it into your ownhangmanArt.jsfile. You can start the development server with the following command:
Defining the Logic of the Application
Open theApp.sveltefile and create ascripttag that will hold most of the logic of the application. Create awordsarray to hold a list of words.
Next, import thehangmanArtarray from thehangmanArt.jsfile. Then, create a variableuserInput, a variablerandomNumber, and another variable to hold a randomly selected word from thewordsarray.
Assign theselectedWordto another variableinitial. In addition to the other variables, create the following variables:match,message,hangmanStages,andoutput. Initialize the output variable with a string of dashes, depending on the length of theselectedWord. Assign thehangmanArtarray to thehangmanStagesvariable.
Adding the Necessary Functionalities
As the player makes a guess, you want to show the output to the player. This output will help the player know if they have made the right or wrong guess. Create a functiongenerateOutputto handle the task of generating an output.
For each guess the player submits, the program will have to determine if it is the right guess. Create anevaluatefunction that will move the hangman drawing to the next stage if the player guesses wrong, or call thegenerateOutputfunction if the player makes a right guess.
And with that, you have completed the logic of the application. You can now move on to defining the markup.
Defining the Markup of the Project
Create amainelement that will house every other element in the game. In themainelement, define anh1element with the textHangman.
Create a tagline and render the hangman figure at the first stage only if the number of elements in thehangmanStagesarray is greater than 0.
Afterward, implement the logic to show a message indicating whether the player has won or lost:
Next, render the output and a form to accept input from the user. The output and the form should only be displayed if the element with the class “message” is not on the screen.
Now, you may add the appropriate styling to the application. Create astyletag and in it, add the following:
You have created a hangman game with Svelte. Great job!
What Makes Svelte Amazing?
Svelte is a framework that is relatively easy to pick up and learn. Because Svelte’s logic syntax is similar to Vanilla JavaScript, this makes it the perfect choice if you want a framework that can hold complex things like reactivity, while giving you the opportunity to work with Vanilla JavaScript. For more complex projects, you can use SvelteKit—a meta framework that was developed as Svelte’s answer to Next.js.
