Html5 Game Programming Tutorial for Beginners Part 2 - Keyboard and Bullets

In this part, we will load an image object, control its movement using keyboard, and then we will arm our hero with a loaded gun.

So, time to bring our hero in picture. I will load the image saved in my local folder.

Load Image

[code language="javascript"]
//create init function to initialize image loading
var img = new Image();
var imgLoaded = false;
img.onload = function() {
imgLoaded=true;
}
img.src = 'images/hero.png';
[/code]

After loading the image, we need to draw it on canvas

[code language="javascript"]context.drawImage(img,x,y);[/code]

Create Hero Object

To keep code sane, we will create hero object that will hold all properties and methods of hero. If you are new to Objects in javascript refer Working with objects

[code language="javascript"]
var hero = {
x: 50,
y: 50,
width:img.width,
height:img.height,
draw: function() {
if(imgLoaded){
context.drawImage(img,this.x,this.y);
}
}
};

[/code]

Html5 Game Programming Tutorial for Beginners Part 1 - Drawing on Canvas

I will document my learning of game programming here. I don't like writing long paragraphs so, I will just note necesary things here . Let's roll

Creating canvas 

Canvas is a rectangular space on page, which is blank until you draw something on it. We can draw stuff on canvas using JS.  

Now, lets go ahead and create a canvas and draw some text on it.

We can define canvas in  html page or we can create it using JS function.
In HTML

[code language="html"]

<canvas id="<span class=">myCanvas" width="500" height ="300">Canvas not supported</canvas></canvas>

[/code]

and save the canvas object in JS variable

[code language="javascript"]

canvas= document.getElementById("myCanvas");

[/code]

In JS

[code language="javascript"]

var canvas = document.createElement('canvas');
canvas.id = 'myCanvas';
canvas.width = 1224;
canvas.height = 768;

[/code]