How to create a game. (HTML)

Glitch Tutorials
1

Creating a game is pretty simple in html. The key is patience and, uhh… good code, i guess?

Anyways, firstly we start with a canvas. Add an onload attribute to the body tag, and set it to load()

Then. just add a script tag at the bottom of your body tag and add the following. Everything explained in notes

// This will start and load the canvas.
function load() {
    canvas.start();
}

// This defines the canvas.
var canvas = {
    canvas: document.createElement("canvas"), // Creates a canvas at the top of the webpage.
    start: function() {
        document.body.insertBefore(this.canvas, document.body.childNodes[0]); // Sets the canvas at the top of the webpage. Remove if you want it to be at the bottom.
        this.canvas.width = 500; // Set the canvas width to any number.
        this.canvas.height = 300; // Set the canvas height to any number.
    }, 
}

Now that you have succesfully created your game canvas, it’s time to add some sprites and commands! Creating a component is pretty simple, just follow the comments:

var canvas;

function load() {
    canvas.start();
    game = new sprite(10, 30, "blue", 40, 5); // defines your sprite and its appearance. 10 is Width, 30 is height, blue is color, 40 is X, 5 is Y. Customize them!
}

var canvas = {
    canvas: document.createElement("canvas"),
    start: function() {
        this.canvas.width = 500;
        this.canvas.height = 300;
        this.context = this.canvas.getContext("2d"); // Defines that the game is 2D.
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function sprite(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;    
    ctx = canvas.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

Now that you have defined all of the sprites, it’s time to introduce the commands! Let’s do… uhhh… arrow keys, for example!

var canvas;

function load() {
    canvas.start();
    game = new sprite(30, 30, "red", 10, 120);
}

var canvas = {
    canvas: document.createElement("canvas"),
    start: function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            canvas.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            canvas.key = false;
        })
    }, 
    clear: function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function sprite(width, height, color, x, y) {
    this.canvas = canvas;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() { // I think you can figure this code out...
        ctx = canvas.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() { // Updates position and stuff
        this.x += this.speedX;
        this.y += this.speedY;        
    }
}

function updateGameArea() { // Updates the game area when arrow keys are pressed
    canvas.clear();
    game.speedX = 0;
    game.speedY = 0;    
    if (canvas.key && canvas.key == 37) {game.speedX = -1; } // Left arrow
    if (canvas.key && canvas.key == 39) {game.speedX = 1; } // Right arrow
    if (canvas.key && canvas.key == 38) {game.speedY = -1; } // Down arrow
    if (canvas.key && canvas.key == 40) {game.speedY = 1; } // Up arrow
    game.newPos();    
    game.update();
}

So this is pretty much it. If you have any more questions or if you found a mistake, please tell me!

5 Likes
2

I don’t think canvas has a start method. By the way, in games where the game changes are not triggered by the keyboard you should take a look at requestAnimationFrame for updating the canvas.

1 Like
3

I don’t know what you mean by that? The whole thing works fine for me.

4

where’s the link to do it

5

uhhh… what do you mean

6

can be any game, right. huh? @no_one
mrjunboon17