Making a Typing Game with Javascript (ZTYPE Clone)

In this example we will make a ZTYPE clone game. You can watch the code writing video above, here is the github page with the codes.

As usual, we start with our index.html file. We create a ws-wrapper class element and place all our other elements in it. A hero class named element will be at the center of the screen and we will try to destroy words by typing before they approach this center. An element with score id will also hold our score. There is no rule that requires explanation on the CSS side.

Our ws.js file for javascript will be our main file. Here we will use the modules and import / export features. Our ws.js file imports two modules, one for a Word class that we will use to create words, and the other is our helper module that contains auxiliary functions.

In our ws.js file, we create the game’s general variables. The variable maxWordCount determines how many words will be displayed on the screen at the same time. wordList takes the role of word database. Due to the logic of the game, if we enter the first letter of a word, we cannot attack other words, we need to continue writing this word. For this, we keep a record of which word we attack with the activeWordIndex variable. We create all the words with a for loop and connect the event functions required for onDie, onHit events. We bind the heroAttack function to the keyup event. We take the letter typed in the heroAttack function and check if there is a match based on the status of the activeWordIndex variable.