How I Created 3D Table Tennis using Vanilla JavaScript in 2 Weeks

I created a 3D game of Table Tennis using vanilla JavaScript and HTML5 Canvas in the last 2 weeks of my internship at Leapfrog Technology.

I have always been excited by 3D rendering techniques and their implementations on 2D screens. I wanted to learn more about these techniques by creating a 3D environment from scratch and writing game logic that thinks in 3D. So off I went, on a journey, to learn 3D graphics, vector mathematics and 3D Perspective projections. To my surprise, that was the easy part. I had experiences in working with Unity3D during my college days, so I knew exactly how the environment and maths needed to be set up. So that helped me a lot. The real challenge came while making the game playable (easy and intuitive). Cold hard mathematics and 3D game logics were not that helpful in making the user experience (UX) good.

That is when I realized the importance of user experience and game design. As a programmer, we not only have to think about the technical mumbo jumbo, but also the end user experience that the product will deliver. Let’s put it this way, no matter how good a product is, it would be of no use if end users are repelled by the UX.

The “hard part” of 3D perspective projections and game logic was finished within week 1 of the project life cycle. But when I asked a few of my friends to play the game, they could barely figure it out. They were constantly missing the ball, were confused by the bat’s movement and kept telling me how hard it was to even serve correctly. After few of the same comments, I was sure something needed to change.

So off I went again, on another journey into the internet, to understand what really makes a game fun and easy to play. That is when I turned to one of my favourite implementations of 3D table tennis on a mobile device, Virtual Table Tennis. I remembered how fun it was to play this game with friends. Never had we complained about the game being confusing or hard to serve in. It was just pure unfiltered fun.

When looking at the game more closely, I noticed a few things that would not make sense at all when compared to a real life table tennis game. There were some slight alterations made to the physics of the game that were questionable to say the least. I thought the developers must have faced something similar to what I was facing. This was a revelation, I was too focused on making the game physics realistic. I had actually used the equations of motions to dictate the ball’s movements. There, I understood the importance of literature review before working on a project. We can really learn a lot from people who have been where we intend to go. Experience really is the best teacher.

After all this, I tweaked the game physics to assist the player in the game rather than challenge them. Then, I added some visual cues to let the player know when their bat touched the ball along with audio cues and some other fixes with the UI/UX. This time, when I asked my friends to play the game, there were a lot of positive feedbacks, they were really happy with the handling of the game.

Control:

On Mobile Device:

· Move Finger around the screen to move the bat and flick finger to hit the ball

On PC:

· Move Mouse around the screen to move the bat and flick the mouse to hit the ball

For all the technical details, make sure you look into this github repo.

Make sure you try the game here.

Key Takeaways

I was able to learn all the pieces that need to work together to create a successful and usable product. I also got introduced to the professional yet welcoming culture here at Leapfrog.

Finally, I would like to thank my colleagues and my exceptional mentors who helped me during my internship at Leapfrog.