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!