Word typing game

Code Feedback
1

Just created a word typing game, credits to traversy media, modded the game to add buttons and local storage where your high score is save please feedback :smiley:

https://balancedsan.github.io/wordTypingGame/

2

Looks good :slight_smile: add some stylings so it would make it better, bringing all the elements to the center might look good, also responsiveness.

A good one though :slight_smile:

3

I wont be able to give the best of feedback as a developer since I’m quite new.
But as a user great game! I managed to get a high score of 13 :sweat_smile: (though after about 10 words it repeats the words - maybe adding more can make it more engaging?)
Also maybe the font can be regular instead of bold? It was A-okay for me but could get in the way for some?
But great game! Cant wait till I can build something similar

4

thank you for your feedback:) making it bold is a good idea ^^ as for repetitive or words yes it can happen time to time i reused the array of words from tutorial , and im sure you will make a great game too ;D

5

I have a few suggestions for your game.

#1) Change your init function to following. I added wordInput.focus(), so as soon as you click Start, the input element has the focus, so the user does not waste time by having to click on the input to start typing.

function init(){
    refresh();
    wordInput.addEventListener("input",startMatch);
    wordInput.focus();
    setInterval(checkStatus, 50);
}

#2) While my suggestion above helps, a better option would be to start a countdown timer (3…2…1…Play!!!) after the Start button is clicked. That way the user does not waste any time lost from letting go the mouse and putting their hand back on the keyboard to type.

#3) See if you can make the layout more responsive on a mobile device, so the Game Over and Highest Score text has more space. I suggest moving this text below the Score and Time Left text to avoid the following:

image
image435×949 189 KB

1 Like
6

Below is a modified version of your function.js file. I made change #1 I suggested above, made the code DRY (do not repeat yourself) and got rid of that setInterval you were using and streamlined the code more where possible.

function init(){
    refresh();
    wordInput.addEventListener("input",startMatch);
    wordInput.focus();
}

function showWord(words){
    const randIndex = Math.floor(Math.random() * words.length);
    currentWord.textContent = words[randIndex];
}

function startMatch(){
    if(matchWords()){
        goNextStage();
    }
}

function matchWords(){
    message.textContent = wordInput.value === currentWord.textContent ? "correct" : "";
    return Boolean(message.textContent);
}

function countdown(){
    if(time > 0){
        time--;
    }
    else {
        isPlaying = false;
    }
    timeDisplay.textContent = time;
    checkStatus()
}

function checkStatus(){
    if(!isPlaying && time === 0){
        displayEndGame();
    }
}

function refresh(){
    wordInput.readOnly = false;
    message.textContent="";
    wordInput.value = "";
    seconds.textContent = currentLevel;
    time = currentLevel; // for refreshing the page
    timeDisplay.textContent = time;
    score = 0;
    scoreDisplay.textContent = score;
    resetInterval();
    showWord(words);
}

function resetInterval(){
    clearInterval(idleInterval);
    idleInterval = setInterval(countdown,1000);
}

function displayEndGame(){
    setNewHighScore();
    message.textContent = `Game Over, Your Highest score was ${getNewScore()} click start to try again`;
    wordInput.readOnly = true;
    scoreDisplay.textContent = 0;
}

function goNextStage(){
    score++;
    increaseLevel();
    isPlaying = true;
    showWord(words);
    wordInput.value = "";
    scoreDisplay.textContent = score;
}

function increaseLevel(){
    time = score >= 10 ? levels.hard : score >= 5 ? levels.medium : currentLevel;
    seconds.textContent = time;
    timeDisplay.textContent = time;
}

function setNewHighScore(){
    if(score > getNewScore()){
        localStorage.setItem("bestscore",score);
    }
}

function getNewScore(){
    const currHighestScore  = localStorage.getItem("bestscore");
    if(!currHighestScore){
        localStorage.setItem("bestscore", 0);
        return 0;
    }
    return currHighestScore;
}
7

hey, thanks a lot! , I appreciate it, that is really great help, I didn’t expect someone to go this far to correct my code. I was initially struggling to get rid of the set interval method, and tried different things, but you sort it out very cleanly. Thank you , without your help i would have not know the mistakes i made. Thanks !

8