JavaScript has come a long way since its creation in 1995 by Netscape Communication programmer Brendan Eich. He was contracted by the company to build a “scheme for the browser”.
Today, JavaScript is one of the most popular programming languages in the world. How popular? Well, for instance, there are over 1.8 Billion websites in the world, and JavaScript is used on 95% of them.
UK Analyst firm SlashData’s latest survey of developers states that JavaScript and Python boast the largest developer communities, with 13.8 million and 10.2 million developers respectively.
In this article, we will explore what JavaScript is and most importantly whether it can be used to develop video games, and How To Make Games With JavaScript step by step.
Can JavaScript be used to make games?
JavaScript is a high-level, interpreted, and text-based programming language used to make web pages more interactive.
It can run on both a client’s machine and on a server and is based on an object model. Basically, JavaScript is the programming language for the web.
When creating a web page; HTML is used to build the structure, CSS to add styling, and JavaScript to make the page elements more interactive and dynamic.
Implementations of JavaScript on web pages include features such; as interactive maps, the Twitter feed, and scrolling image carousels.
If you are a front-end developer who has skills in HTML, CSS, and JavaScript then you can easily build games with a combination of the three languages.
You can also implement HTML5canvas, and in some cases, you’ll need some JavaScript game engines library like Phaser. Js (a free, open-source framework for both desktop and mobile HTML5, which uses Canvas and WebGL renders).
Is JavaScript good for games?
JavaScript is capable of creating various types of games when combined with tools and platforms like WebGL, Impact.js, and HTML5 Canvas.
JavaScript works best when developing games for mobile and web, and it can handle both 2D and 3D games. Whether or not JavaScript can create a good game will depend on the desired output.
Which type of games can you develop using JavaScript?
Firstly, JavaScript is a scripting language. A scripting language is interpreted rather than compiled. Meaning, scripted instructions are executed directly without compilation into machine instructions.
For instance, the fact that a majority of JavaScript games are built for the browser creates some limitations.
The computation power of the browser is typically not enough for rendering tasks that need heavy GPU processing. For this reason, JavaScript can’t be used to create games like Grand Theft Auto 5 or God of War.
What popular games use JavaScript?
JavaScript has been demonstrated to be capable of developing a variety of both online and offline games. Below are our top five games built by JavaScript:
Super Chrono Portal Maker
This is a puzzle game that pays homage to the Mario games. It consists of 30 game levels of run and jump action, and also includes a level builder that allows you to customize your own levels.
Underrun
This is an arcade shooter game that uses WebGL. The gameplay is set in a destroyed laboratory where your goal is to reboot the lab systems while eliminating spider-looking predators roaming around.
The game features a brown color scheme with pixelated graphics and great sound effects.
Polycraft
This is a 3D game that is playable in your browser. Polycraft is filled with exploration, adventure, fighting, and base building. It is a very polished JavaScript game that runs smoothly on most browsers.
1024 Moves
This is a well-designed 3D puzzle game where you use your keyboard arrows to move cubes/tiles until two cubes with similar values touch and merge. The goal is to reach the endpoint is only 1024 moves, hence the game title.
Words With Friends 2
This is a multiplayer word game where players use a crossword-puzzle style to build words in a way similar to scrabble though with some differences.
The game is played in turns and allows up to 40 simultaneous gameplays. It also allows you to search for friends to play with from social media sites like Facebook.
How to make a game with JavaScript step by step
Snake game JavaScript code Tutorial
1. First you need to create an index.html file. And put the basic html stuff inside.
With the HTLM code, we are simply setting up a basic blank page with a title and will also serve as a display portal for the snake game.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Snake Game</title>
</head>
<body>
2. Next you add the Canvas element to the body section of your code
In the canvas section, we define the dimensions of the game window with the div name ‘canvas.’
<canvas id="canvas" width="450" height="450"></canvas>
3. Next you add the CSS code
With CSS styling we define colors for the background and border.
body {
background-color: #375;
}
#canvas {
display: block;
margin: 5px auto;
border: 10px solid #657;
}
4. Finally the JS
Each block of code will be explained in comments so you can easily understand each step of the coding process. You can copy-paste the three sections of code on your server and it should run the snake game.
4.1. Canvas variables
$(document).ready(function(){
// First we set variables for the canvas
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
//Here we create a variable for the width of the cell so that we can manipulate it easily.
var cw = 10;
var d;
var food;
var score;
var level;
4.2. Creating The Snake
//This is where we create the snake
var snake_array; //Here we create the array of cells that makeup the snake
function init()
{
d = "right"; //This sets the default movement direction
create_snake();
create_food(); //This makes the food particle visible
//This will show the score of the game
score = 0;
level = 1;
//Now we will move the snake utilizing the timer that initiates the paint function every 60 milliseconds
if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, 100);
}
init();
function create_snake()
{
var length = 5; //This defines the snake’s length
snake_array = []; // We begin with an empty array
for(var i = length-1; i>=0; i--)
{
//This will draw the snake horizontally from the top left
snake_array.push({x: i, y:0});
}
}
4.3. Creating Food
//Here we create the food for the snake to eat
function create_food()
{
food = {
x: Math.round(Math.random()*(w-cw)/cw),
y: Math.round(Math.random()*(h-cw)/cw),
};
//This creates a cell with x/y between the range of 0-44
}4.4. Drawing The Snake
//Here we draw the snake
function paint()
{
//We need to draw the background on each frame in order to avoid a snake trail.
//Here we paint the canvas
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//Here we define the movement of the snake using simple logic
//We simply remove the tail cell and put it in front of the head cell
var nx = snake_array[0].x;
var ny = snake_array[0].y;
//This if the head cell position
//We increase it to get the new head position
//Here we define directions depending on movement
if(d == "right") nx++;
else if(d == "left") nx--;
else if(d == "up") ny--;
else if(d == "down") ny++;
//Now we will create the ‘game over’ variables
//The game will be restarted when the snake hits the wall
//So we will create the code for collision of bodies
//If the snake’s head comes into contact with its body, the game restarts
if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
{
//The restart function
init();
return;
}4.5. Feeding The Snake
//Here we will enable the snake consume the food
//Through simple logic we will first determine of the new head position of the snake
//If that position corresponds with the food, then generate new snake head instead of removing its tail
if(nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//Create new food
create_food();
}
else
{
var tail = snake_array.pop(); //The last cell is popped out tail.x = nx; tail.y = ny;
}
//Now the snake can consume food
snake_array.unshift(tail); //The tail put back as the first cell
for(var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
//Lets paint 10px wide cells
paint_cell(c.x, c.y, "blue");
}
//Lets generate the food
paint_cell(food.x, food.y, "red");
//Lets create the score
var score_text = "Score: " + score;
var level_text = "Level: " + level;
ctx.fillText(score_text, 5, h-5);
ctx.fillText(level_text, 60, h-5);
}
//Here a generic function is created to paint cells
function paint_cell(x, y, color)
{
ctx.fillStyle = color;
ctx.fillRect(x*cw, y*cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x*cw, y*cw, cw, cw);
}
function check_collision(x, y, array)
{
//Here we check an array of cells for the existence of the x/y coordinates provided
for(var i = 0; i < array.length; i++)
{
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}
// 6. Adding Keyboard Controls
//We define the keyboard keys as follows
$(document).keydown(function(e){
var key = e.which;
//The function prevents reverse gear
if(key == "37" && d != "right") d = "left";
else if(key == "38" && d != "down") d = "up";
else if(key == "39" && d != "left") d = "right";
else if(key == "40" && d != "up") d = "down";
//Now you can control the snake with the keyboard
})
})
CONCLUSION
The rise of JavaScript to be the most popular programming language is almost consistent with the rise of the internet.
With faster internet speeds and advancing computer hardware, it is no surprise that more and more game developers are using JavaScript for content creation.
Related Posts:
BEST PROGRAMMERS CHAIR | FIND THE BEST CHAIR FOR CODING
FRONT END DEVELOPER SKILLS REQUIRED & TECHNOLOGIES TO LEARN
BEST 7 WIRELESS MOUSE FOR CODING | BEST PROGRAMMER MOUSE GUIDE
