LONG SERIES OF HTML5 GAMES: chapter1 part7

[afisoone]

Wow now let's look review what we did it..

1. we create a template that will hold all images and we called it sawirObject
2. we store all in variable called xafidSawir
3. we create arrow image in the sawirObject using javascript Object.create
4. we load the image arrow to the canvas
5. we update the canvas stage using functionka updateStageka
6. We redraw the canvas every time the requestAnimationFrame runs

So far so good.. That is the same technique we are going to use when we need to add our games some graphics.. You will know it as we continue
to advance in our tutorial.

ok-- Here Object.js file full in Review

// Kan waa object aan u isticmaalnay as template
var sawirObject={
sawirWidth:148,
sawirHeight:104,
sawirX:0,
sawirY:0,
width:148,
height:104,
x:0,
y:0


};
//kan waa canvaska aan kulifaaqinay filekaan
var canvaska=document.querySelector("canvas");
var meeshaSawirka=canvaska.getContext("2d");

//kani waa array aan ku xafidnay imageka arrow.png
var xafidSawir=[];

//kan waa meesha kusuubinay arrow image anagoo kulifaaqinay sawirObject

var arrow= Object.create(sawirObject);
arrow.x=0;
arrow.y=168;
xafidSawir.push(arrow);

//kan waa imagekii arrow.png aan soo load kareenay
var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="arrow.png";

//kani waa functionkii keenStageka();

function keenStageka()
{


updateStageka();

}

//kani waa functionkii updateStageKa

function updateStageka()
{
window.requestAnimationFrame(updateStageka, canvaska);

arrow.x++;

hadbaSawir();


}

//Kani waa functionkii noo render kareenaayo canvaska
function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);

if(xafidSawir.length!==0)
{

for(var i=0; i<xafidSawir.length; i++)
{
var sawirkaan=xafidSawir;

meeshaSawirka.drawImage(image, sawirkaan.sawirX, sawirkaan.sawirY,sawirkaan.sawirWidth, sawirkaan.sawirHeight, Math.floor(sawirkaan.x), Math.floor(sawirkaan.y),
sawirkaan.width, sawirkaan.height);



}


}

}

//Qore: Waa Macalin Afisoone- Allah ha xafido

So as you can see this what we cover so far..

Here is the Canvas Demo.

Every game when an image is load on the canvas and runs to end another same images comes back on the screen. It is called Screen wrapping?

So my question to you How do we screen wrapping this arrow image?

That is the question I am going to answer next lesson.. Inshallah!

<<<Previous Lesson