Acquiring skills for JavaScript game development will make you a great developer. And let's not forget that game development is fun to do. Skills you will get are useful in other areas of JavaScript development as well. These are the reasons why we at CodeBrainer think you should learn more about game development.
Most of the internet depends on JavaScript. Its early versions were developed in the late 1990s and since then it offered a new range of possibilities for content and form of web pages. Through time it also became a base for developing many fun and interesting games. Despite not being the most popular choice for game development, it is still a good option for beginners and smaller projects. Some games created with JavaScript are still popular today. In this article, we will introduce the world of game development with JavaScript and even share some tips.
JavaScript is a language with a wide spectrum of use. From web, mobile and desktop applications to backend servers and databases. In the middle of it all we can also include making games. In fact, both 2D and 3D libraries are available to join with JavaScript to create games for either browsers or external platforms.
What are the skills for JavaScript game development
Skills for building JavaScript games can be a lot of things, but there are a few skills that you just need to acquire to start building your first JavaScript game.
What do you need to start javascript game development:
- Basics of JavaScript, HTML and CSS
- An idea of what kind of game you want to make
- Framework for building the game
- Know what Game Loop is
- Get to know Canvas HTML
- Assets to make game look cool
- Skills to make collisions work
- Get acquainted with physics engines for JavaScript
- Design levels and game menu
Know your basics
To make a game using JavaScript, of course you need to be familiar with some JavaScript and HTML. If you are not, take some time to get to know the basics. It is not necessary for you to know the language in detail but pay some attention to the conditional statements (if, else if, else, switch), loops (for, while, do… while), objects, natives, functions, scope, closures, and some code patterns. There are many feature sets and libraries for game engines that are available to use, so take your time researching them.
The internet is vast and offers many helpful tutorials (take a look at our Tic-Tac-Toe JavaScript game) and courses, some of which are free, that can help you write simple and optimized code for your game. After watching a few tutorials, you will have already learnt something new, you can also choose just one of them to follow while making your first game.
Another, more traditional option is to get your hands on some books. The process of developing your first game will also help you understand what JavaScript is more in detail.
Decide what kind of game you want to make
First things first, you have to decide whether you want to make a browser game or an external platform game engine. That usually depends on your targeted audience. After that choose the actual game type by using some successful games as your reference. This is usually very helpful because you can form a concept of what the purpose of the game will be.
There are many famous JavaScript games, some of which you have probably played at some point. More simple ones such as 2048 or Pac-Man are a good place to start. More complex ones, such as Angry Birds or HexGL, are a good reference for future projects. You might also be familiar with the Chrome dinosaur game.
It is good to have ambitions, but we recommend keeping it simple for your first game. Lastly you should also choose a certain style, by preparing a colour palette and some character design. The visuals should be taken into the count last, since for beginners it is more important how well the game works.
Here is a short list of game types to inspire you:
- Puzzle (sudoku, Minesweeper, tetris)
- Educational (Quizzes, Questionnaires, wordplay,..)
- Adventure (Sonic, Mario...)
- Sandbox (Minecraft, Roblox, Sims like games)
- Action (Batman, Spider-Man, Doom…)
- ....
Frameworks for building JavaScript games
After starting with pure JavaScript, you can choose a framework. Frameworks are code libraries, which include some prewritten code. This is very helpful to developers since it saves some time that could be wasted on routine tasks. Framework only must be properly linked to the IDE to be used.
Some widely used JavaScript game development frameworks are:
- Phaser (Open Source HTML 5 framework for Canvas and WebGL
- ImpactJS (allows you to develop stunning HTML5 Games for desktop and mobile browsers)
- Pixi.js (Create beautiful digital content with the fastest, most flexible 2D WebGL renderer)
- Three.js (lightweight, cross-browser, general purpose 3D library)
- PlayCanvas (open source PlayCanvas HTML5 game engine, built on WebGL and glTF, for building games, playable ads, visualizations, VR and AR)
- GDevelop (Create your own games with GDevelop: an open-source game creator)
- Babylon.js (real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5)
- ...
As a novice, it is good to know some basic features of a few different frameworks and choose one to work with depending on what you want to do with your game. As mentioned in the introduction, to make a JavaScript game, both 2D and 3D engines are available. It is also important to be able to distinguish frameworks according to HTML, which is necessary for developing web games. For beginners it is usual to choose a free framework, since there is also a lot of help for it online.
The start: Project and the Game Loop
All the projects you work on should have a good foundation, which means the code should be as optimized as possible. This helps in reading, debugging, and maintaining the code. Depending on which IDE you are using, separate different parts of your game code into files instead of writing it all into a single, extremely long file. For example, game.js could be your primary game module, where you write the Game Loop, a player file could include all enemy/character related modules etc.
Regardless of which programming language you use, the most important part of developing a game is the Game Loop. This part of the code enables the gameplay to continue to progress without necessary action from the user/player. It is a simple-looking function call for updating the game, which means reforming the graphics, positions etc. to the ongoing gameplay.
The Game Loop usually looks something like this:
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
As the example shows, the game will update as long as it is running (as long as the player is playing it). Draw function is the one that creates (draws) the graphic elements to the screen. The while loop might not always be the most effective one, but it helps understand the concept. Another solution is to make a recursive function which calls itself inside the function. For example:
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
Both examples are very superficial, since to call the functions, you have to make them first. You should also be aware that there should be some time between those calls using setTimeout() or better you should take a look at window.requestAnimationFrame() to make these calls when you are making your final version.
HTML/CSS skills for JavaScript game development
JavaScript is what takes care of all the interactions in your game. Structure and style are handled by HTML and CSS. If you are new to all of this, What is HTML? HTML is the markup language used worldwide to build websites, while CSS is a style sheet to describe and enhance the presentation of the website. CSS helps us adapt colours, fonts, layout and similar. These three combined help you create blocks for your game, bring in characters and animations. They are also the basics of web development itself.
Canvas
To draw and render our game graphics we use the HTML <canvas> element. It was first introduced in WebKit by Apple for the OS X Dashboard. Today, all major browsers support it. All the drawing is done via JavaScript. Although to find the Canvas element, you first have to know about HTML DOM – Document Object Model. You can read about it in another one of our articles – createElement in JavaScript. You are not limited to only using canvas, but it is one of the best options for beginners. Default size of a canvas is 300px by 150px, but this is also customisable within the properties. Using the DOM method getElementById(), you can open the canvas.
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
Knowing how to manipulate Canvas elements and how we add and change shapes to it is one of the most important skills for JavaScript game development, this is why we have a special article that explains We are working on HTML canvas article to explain it in more detail.
Assets
When developing a game, in any programming language, it is good to have an assets folder prepared. This would include all your background textures, player/s, enemy (helper) characters, animations, sound effects etc. It is always good to be original so you can prepare these by yourself, if you have the time for it. Otherwise, there are many sites that offer free or cheap sprite sheets, background blocks, sounds and details.
To handle your assets in the project, you can create a special Asset Management component. That way you will have less trouble dealing with image loading and unknown download times, since these assets will probably be used in the web browser. Most games have this, but HTML games require a bit more attention, because assets are supposed to be loaded over a network.
What an Asset Manager usually does is along the lines of queuing up the downloads and starting them, tracking success and failure and easily retrieving all the assets. You can also add a signal for when everything is done.
Collision detection
Implementing collisions to your game is quite good. You probably wish to have some sort of interaction between characters or/and objects in your game. Collision detection works depending on the position of an object, more specifically its x and y coordinates. The collision detecting function compares coordinates of two game objects or sprites in a loop, as long as the gameplay lasts. Inside the loop you can tell the program what happens in case of collision, one object can bump into another or get destroyed for example. The condition for checking if the objects have collided in a simple game, would look something like this:
JavaScript
Thanks for reading!
If you like our code, you can give back by sharing this article!
Physics engine
One of the most complex skills for JavaScript game development and coding in general are the calculations. The physics engine makes our lives a little bit easier by solving equations of motion and detecting collisions. It is somewhat of a continuous loop that can simulate external forces. That is why it is called a physics engine, it calculates such things as the velocity, acceleration, and position of an object and transfers that data to the GPU. For these calculations it uses real formulas such as Newton’s laws and motional equations.
The loop follows multiple steps, some of which include identifying the external forces affecting the object, summing all those forces, solving the equations, and integrating the solutions. The integration is done numerically, and the most common methods used for that process are Verlet Method, Euler Method and Runge-Kutta Method. The reason this is important are the tight connections with the collision detection and collision response.
Levels and game menu
Once you get the hang of making the basic gameplay you can also make multiple levels. These would increase the difficulty of completing the game. Levels can each have their own file, and this would be good practice for optimizing and correctly calling all your functions. If you want a challenge, try implementing some screen transitions between levels and options on the game menu.
This is another task where a lot of HTML comes in. Using the <canvas> element and some images as buttons, you can create a simple interactive menu that will navigate the player through the game. For the menu to work, you also have to check the mouse position of the player, which are again some x and y coordinates. You also have to make sure the mouse clicks on one of the buttons, after that the chosen action can progress.
Conclusion
It is fun to gather Skills for JavaScript Game development and whilst learning how to build your dream game, you are learning more and more about coding and programming. We at CodeBrainer are excited that you have started your mission.
