The idea is simple. Display a number and then let the user type the number they see on screen. There is a twist though. We start by displaying single digit number and then we proceed by adding the number of digits displayed as the user goes to higher levels. We also introduce a timeout display on the number, such that the number will display only for a specific duration and then it will be hidden from the user. Ez right?
I am going to skip the html and css part and get right into the vuejs part and making the game.
Now that generating a random number is taken care of let’s make a new vue instance with the game setup.
Lets imagine that the user has already seen the number, how long should we wait before hiding it? This is how i did it. let time = this.level * 160 . There is no special thing about the 160 . After testing with various interval i concluded that this interval would be pretty fair. We will use setTimeout to hide the number by calling hideNumber() function.
One last thing. We need to display a number a soon our component is loaded. In vuejs this is simple. We need to place our code in the mounted function.
This post was inspired by Pham Mikun’s codepen (React Version)