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 continue1. 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
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?
That is the question I am going to answer next lesson.. Inshallah!So my question to you How do we screen wrapping this arrow image?
<<<Previous Lesson