I have always been interested in games. Now that I’m learning JavaScript programming, I decided to make a simple “game” in HTML5 canvas element. Disclaimer: this is my first tutorial on building a game in JavaScript so there might be some bugs and mistakes.
The final result: (move with WASD keys)
https://lamosty.com/app/uploads/scripts/ball_game/game.js
Download necessary resources
Firstly, you will need two images: one of a grass:
and the second one of a ball:
You can, of course, substitute them with your own images.
Create simple website with canvas
Now we need to create a simple HTML website with a canvas element. It might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Tank Game</title>
</head>
<body>
<canvas id="main_canvas" height="300" width="400"></canvas>
</body>
</html>
I made the canvas 300 pixels tall and 400 pixels wide. Save the page as ‘game.html’ in some folder.
The next step is to program the actual JS code.
Building game code
I’ve divided the game into two JavaScript files, just to show you how you can create an object (in our case the ball) and the game controls separately. Add following lines under the canvas element in our simple page.
http://ball.js http://game.js
Now, create a blank new file called ‘ball.js’ in the same folder where the ‘game.html’ was created. The content of our script is:
(function(window){ // pass window property to an anonymous function
// object Ball has 3 parameters - ctx is the context of the canvas
// x,y are the starting positions of the Ball
function Ball(ctx, x, y) {
this.ctx = ctx;
this.x = x;
this.y = y;
this.speed = 60; // set the speed of the ball
this.model = new Image(); // model is the image of the ball
this.model.src = "ball.png"; // set the path to the image of the ball
}
Ball.prototype.draw = function() { // function draw draws the ball
this.ctx.drawImage(this.model, this.x, this.y);
}
window.Ball = Ball; // register Ball property in the global namespace
})(window);
I hope the comments explain the code. The Ball object will be our ball that can be moved in the canvas.
Now, the harder part. Create new file called ‘game.js’ in the same folder as the other files. It will be the main game loop and controls. Here’s the code:
(function () { // make an anonymous function so we don't pollute the global namespace
var canvas; // our canvas
var ctx; // canvas context
var ball; // our ball object
var keysDown = {}; // for keyboard handling
var bgImage, bgReady = false; // background image
var then; // used for game loop
function init() { // prepares the canvas and initializes the game
canvas = document.getElementById("main_canvas"); // get the canvas
ctx = canvas.getContext('2d'); // create canvas Context
bgImage = new Image(); // background image, grass in our case
bgImage.onload = function() { // if the image is ready...
bgReady = true;
ctx.drawImage(bgImage, 0, 0); // draw it
}
bgImage.src = "grass.jpg"; // the path to the background image
// register event listeners for keyDown and keyUp
window.addEventListener("keydown", function(e) {
keysDown[e.keyCode] = true; // key with keyCode is pressed, so we set it to true
}, false);
window.addEventListener("keyup", function(e) {
delete keysDown[e.keyCode]; // when we release the key, it is removed from the pressed keys object
}, false);
ball = new Ball(ctx, canvas.width / 2, canvas.height / 2); // let's put the ball in the middle of the canvas
then = Date.now();
setInterval(mainLoop, 1); // set the main game loop
}
// called each iteration of the game loop
function update(modifier) {
// keypress handling
if (38 in keysDown) //up movement - W
ball.y -= ball.speed * modifier;
if (40 in keysDown) //down movement - S
ball.y += ball.speed * modifier;
if (37 in keysDown) //left movement - A
ball.x -= ball.speed * modifier;
if (39 in keysDown) //right movement - D
ball.x += ball.speed * modifier;
// if the ball runs out of the canvas, let's put it on the other side of it
if (ball.x < 0)
ball.x = canvas.width;
if (ball.x > canvas.width)
ball.x = 0;
if (ball.y < 0)
ball.y = canvas.height;
if (ball.y > canvas.height)
ball.y = 0;
}
function draw() {
ctx.drawImage(bgImage, 0, 0); // draws the background
ball.draw(); // draws the ball
}
// main game loop
function mainLoop() {
var now = Date.now();
var delta = now - then;
update(delta / 1000); // update movement
draw(); // draw the whole canvas
then = now;
}
init(); // call the initialization function
})();
The code should explain itself. Save all of the files and open ‘game.html’ in your favorite browser. The game should run 🙂 I’ve tested it only in Google Chrome.
I hope you like the tutorial. Have a nice day.
Nice tutorial going to test it out now. I cannot find too many people these days who use vanilla js and not jquery.
LikeLike