fbpx How I created a 3D game using JavaScript in 6 weeks

How I created a 3D game using Javascript in 6 weeks

What good is a language if you cannot create something cool using it? JavaScript is the coolest universal language in the world. You can build anything such as web app, mobile app, web server, smart watches, robots, drones, or browser based games. It is the most simple and versatile programming language right now. In this blog, I will be sharing how I built a 3D game in six weeks.

Javascript looked daunting at first, but once I understood the basics, it was not that hard to work on. I already had the basic knowledge of how to write a 3D renderer using computer graphics using C++. So, I decided to create something by combining both. I tried to recreate a 3D ball game ‘Neverball’ as my final project during my internship.

About the Game

The goal of the game is to drive the ball through obstacles and tiles by tilting the floor within a given time. You lose a ball if it falls or time expires. Throughout the game, you collect coins to earn points. 

I decided to build a level editor to design the levels by yourself. You can add tiles, coins, Neverball and end goal point. After creating a level, you can click Save and go Back to Menu.  Now select  PLAY press enter and load your level from the list. I have created a demo level to play the game without designing your own level.


Control Keys:

  • Arrow keys for moving the ball
  • Escape/Enter to go to the main menu
  • Space to jump.

How I used 3D renderer in Neverball

3D rendering is a 3D computer graphics process of automatically converting 3D wire frame models into 2D images with 3D photorealistic effects. With 3D rendering, graphic designers and developers can insert disparate objects and characters, imported from 3D modeling programs into a graphically appropriate setting. These programs also have features such as lighting and texturing, that helps to add depth and realism to scenes.

1. Projection onto a Surface


The first step in creating a 3D renderer is understanding how projection onto surface works (similar to the human eye). This process is the conversion of 3-dimensional coordinates to 2 dimensional one. On a point(x, y, z), we need to find where it will be located on the screen after projection.

2. Visible Surface Detection

The second step would be visible surface detection. This step aims to find out which surfaces are visible and which surfaces are hidden.

collision detection

For a simple cube, I used backface culling to remove the surfaces that are not visible to the viewer (hidden behind the cube’s front surfaces). For many different cubes, I used a simple sorting algorithm (also known as Painters algorithm) in which the surfaces are sorted according to a single depth value and finally, surfaces are rendered from back to the front order.

Obviously, this does not work if surfaces are very close to each other. For solving visible surface detection problem efficiently and correctly, Z-buffering is a very good alternative. But, I resorted to the Painter’s Algorithm because Z-buffering would perform depth comparison on a pixel by pixel basis which will be very slow.

3. Clipping surface in a Scene

Another crucial step is clipping surfaces if we want the camera to enter a scene. Surfaces must be clipped or hidden early so that surfaces behind the camera are not rendered. Otherwise, they will appear inverted in the screen. Also, another problem would be to divide by zero while performing perspective divide.

clipping surface

Thus, z-clipping becomes a must if we want our player to move around the scene with the camera following around.

4. Creating A 3D Shape

For constructing a sphere, I used a spherical coordinate system.  A similar method for a coin (a cylinder). The sphere rotation physics is not complicated as it is to rotate the sphere about the vector perpendicular to its velocity. The rotation is dependent on the magnitude of its velocity.

3d shape

5. Collision Detection

I did the collision detection in 2D so I completely ignored the ‘y’ information. If it had been a cube v/s a cube collision detection in 3D, it would have been easy. But this game has cube v/s sphere, so the process would have been more complicated if I had not done the collision in 2d ignoring the ‘y’ component. I used Axis Aligned Bounding Box, as well as SAT (Separating Axis Test) algorithm for collision detection.

3d ball

Key Takeaways

My key takeaways from this project were using my knowledge of computer graphics, physics, and collision detection. I built this game from scratch as my intention was to learn how a game engine is built. I am happy I was able to pull off developing a game like Neverball and was a great learning experience for me. 

If you want to check out the source code see here.

And lastly, try out the game!

Other Resources

If you want to develop similar 3D games without building it from scratch, please look further in library resources such as 

4A Engine

About the Author
Uttam Khanal was one of the 13th batch interns who got selected for the 6-week internship program at Leapfrog Technology, Inc.

Like the story? Read more of our Internship Story!

More in Blogs

Learning and Development Team: Fostering learning culture at Leapfrog CultureInsights

Learning and Development Team: Fostering learning culture at Leapfrog

Leapfrog has always been about learning and growing together. For the past decade, we have been consistently planning and providing

Read more
One year later: maternity and menstrual leave CultureInsights

One year later: maternity and menstrual leave

A policy initiated by WoMen@Leapfrog WoMen@Leapfrog is a guild that creates a support group for women within Leapfrog. It is

Read more
Agile Education organizes “Agile Education Meetup” EventsInsights

Agile Education organizes “Agile Education Meetup”

Agile Education, in collaboration with Leaps and Bonds, an initiation of LeapNetwork* organized its first-ever “Agile Education Meetup” on December

Read more