Description:
This is a typing practice web app I build using react, where I try to replicate a flash typing practice game called 快打高手 I played when I was small.
The Insights from the typing practice game
The origin of this project
When I was studying in primary school, there was a game called 快打高手(translation of this would be something like the guru of speed typing). It was popular among my classmates at the time. After you start the game, there will be letters keep falling down from the top. Your job is the press the corresponding key on the keyboard to remove that letter. You would lose when one of the letters reaches the bottom of the game window. To prevent players from randomly pressing keys on the keyboard, there is also a life system: player would have 10 lives at the beginning, every typo(the letter that is absent in the falling letters) would deduce one life from the player, and the game is over when you have no more lives. One day, I just had an idea that it would be fun to make this game with react.
Creating the project
I decided to create the app with vite and react instead of create-react-app, since I found the speed of vite when creating and bundling the app was higher than that of the CRA. I also wanted to familiar myself with vite more.
Starting out
Before I start writing code, I like to think about what the basic structure of the app is, and how I would like to structure the app. I wanted the app to consist of a main page, which contains links to the game site and the instructions. I wished to make it a single page application, so I would need to install react-router.
The instruction page would be the easiest, all I need was to write some instructions and the rules of the game. The game site is the main focus of the project. There are a lot of functionalities required for it to work: it needs to read user's input, reacts to user's input, reflecting the score, makes alphabets falling automatically, and so on. I usually start with the most basic and essential feature of the app, and then adding the remaining functionalities one by one. Hence I decided to begin with the falling alphabets.
The obstacle
At the beginning, I was planning to use different divs to wrap the alphabets, and a big div to wrap the game, such that the letters are falling inside the div. For the alphabets, I decided to use an object-oriented-programming approach, to store all of its properties inside an object. I want to randomly assign the position of the letter, so I would need x and y coordinate as two of its properties. My thought was to use the manipulate the position of the letters using CSS, but I realized a problem after adding the event listener for the interaction between the user and the game: whenever a letter was removed, a div was removed from DOM, results in a shifting of the letters to the left. This would be awkward and obviously a bad user experience for the players. I tried looking for solutions online but there was not any satisfactory one.
The solution
The night, when I was scrolling on Youtube, I found a tutorial about how to implement OOP in game development with JavaScript. This quickly caught my attention as I was working on something similar. The tutorial was about building a classic pong game. Instead of building the game interface with different HTML elements, the tutorial used canvas, which I had never used before. Basically, canvas is like a canvas in real life, we can use JavaScript to draw different image on the canvas, and it will render on screen. I thought this seemed to be a better choice then writing the game with the HTML element, as I did not have to concern about the horizontal movement whenever a letter was removed. I watched a couple of different tutorials on making web game with JavaScript, and all of them were using canvas. Therefore I did some research on canvas, as well as how to utilize it in JavaScript development, and built this typing practice game with canvas.
Room of improvement
One issue of the game is that when the letters are getting more and more, it is likely that some letters overlap on each other, making it difficult to identify the letter, especially with the time constraint. There may be ways to prevent the letters from stacking on each other.
Also, I would like to add the leaderboard feature in the future. This could involve some more skills like a database to save the scores of different player. I would love to improve the app if I have time.