Сoding a JavaScript game in 20 minutes 🔥

JS can be used to create complex and simple games of any genre. We will show you how to create a 2D game in JavaScript and HTML5 in just 20 minutes.

To create web games in JavaScript, the Canvas technology is used, which allows you to execute JavaScript code in an HTML5 document.

Watch this video on YouTube

Javascript game

On the html page, only the canvas tag is written, as well as the connection of the JS file, in which all the functionality will be processed. For example, an HTML file might look like this:

<!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>Flappy Bird!</title>
</head>
<body>

 <canvas id="canvas" width="288" height="512"></canvas>

 <script src="js/game.js"></script>
</body>
</html>

In the JS file, you need to find the desired canvas by id and indicate the way to work with it.

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

Contents

Adding images and audio
Drawing objects
Video tutorial
All JS code of the game

Adding images and audio

Next, you need to download all the images, as well as audio files that will be used in the game. To do this, use the Image and Audio classes, respectively. Below you can download all the necessary pictures, as well as audio files for the game.

You can download audio files from this link;

Code for adding images and audio to the game:

var bird = new Image();
var bg = new Image(); // Object creation
var fg = new Image(); // Object creation
var pipeUp = new Image(); // Object creation
var pipeBottom = new Image(); // Object creation

bird.src = "img/bird.png"; // Specifying the desired image
bg.src = "img/bg.png"; // Likewise
fg.src = "img/fg.png"; // Likewise
pipeUp.src = "img/pipeUp.png"; // Likewise
pipeBottom.src = "img/pipeBottom.png"; // Likewise

// Звуковые файлы
var fly = new Audio(); // Creating an audio object
var score_audio = new Audio(); // Creating an audio object

fly.src = "audio/fly.mp3"; // Specifying the desired entry
score_audio.src = "audio/score.mp3"; // Likewise

Drawing objects

To draw objects, as well as add functionality to the game, you need to register a function that will be constantly called. You can name such a function whatever you like. The main thing is that you need to call this function from outside it at least once, and inside it, write a method requestAnimationFrame that will call the function constantly.

function draw() {
 // Any code
 requestAnimationFrame(draw); // Calling the function constantly
}

draw(); // Calling a function from outside

All game code should be placed in this method, because it will be constantly processed in it and the game will look live and animated.

To track the player pressing any key, you must use event tracking – addEventListener. For example, to track the pressing of any key on the keyboard, you need to write the following code:

// When you press any button
document.addEventListener("keydown", someMethod);
// The method is called someMethod
function someMethod() {
 // Changing something in the code
}

Video tutorial

These were just some of the basics before creating the game itself. We invite you to watch a short video tutorial, during which you will create a small 2D game in pure JavaScript .

All JS code of the game

Below you can look at the entire JavaScript file code that was created during the video tutorial above:

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeUp = new Image();
var pipeBottom = new Image();

bird.src = "img/bird.png";
bg.src = "img/bg.png";
fg.src = "img/fg.png";
pipeUp.src = "img/pipeUp.png";
pipeBottom.src = "img/pipeBottom.png";

// Sound files
var fly = new Audio();
var score_audio = new Audio();

fly.src = "audio/fly.mp3";
score_audio.src = "audio/score.mp3";

var gap = 90;

// When you press any button
document.addEventListener("keydown", moveUp);

function moveUp() {
 yPos -= 25;
 fly.play();
}

// Creating blocks
var pipe = [];

pipe[0] = {
 x : cvs.width,
 y : 0
}

var score = 0;
// Bird position
var xPos = 10;
var yPos = 150;
var grav = 1.5;

function draw() {
 ctx.drawImage(bg, 0, 0);

 for(var i = 0; i < pipe.length; i++) {
 ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
 ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);

 pipe[i].x--;

 if(pipe[i].x == 125) {
 pipe.push({
 x : cvs.width,
 y : Math.floor(Math.random() * pipeUp.height) - pipeUp.height
 });
 }

 // Touch tracking
 if(xPos + bird.width >= pipe[i].x
 && xPos <= pipe[i].x + pipeUp.width
 && (yPos <= pipe[i].y + pipeUp.height
 || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) {
 location.reload(); // Перезагрузка страницы
 }

 if(pipe[i].x == 5) {
 score++;
 score_audio.play();
 }
 }

 ctx.drawImage(fg, 0, cvs.height - fg.height);
 ctx.drawImage(bird, xPos, yPos);

 yPos += grav;

 ctx.fillStyle = "#000";
 ctx.font = "24px Verdana";
 ctx.fillText("Счет: " + score, 10, cvs.height - 20);

 requestAnimationFrame(draw);
}

pipeBottom.onload = draw;