Welcome to SomaliNet Forums, a friendly and gigantic Somali centric active community. Login to hide this block

You are currently viewing this page as a guest. By joining our community you will have the ability to post topics, ask questions, educate others, use the advanced search, subscribe to threads and access many, many other features. Registration is quick, simple and absolutely free. Join SomaliNet forums today! Please note that registered members with over 50 posts see no ads whatsoever! Are you new to SomaliNet? These forums with millions of posts are just one section of a much larger site. Just visit the front page and use the top links to explore deep into SomaliNet oasis, Somali singles, Somali business directory, Somali job bank and much more. Click here to login. If you need to reset your password, click here. If you have any problems with the registration process or your account login, please contact us.

LONG SERIES OF HTML5 GAMES: chapter1 part7

Qaybta Xirfada Sayniska iyo iwm

Moderators: Moderators, Junior Moderators

User avatar
SomaliNet Super
SomaliNet Super
Posts: 5496
Joined: Wed Jul 22, 2009 9:46 pm
Location: We all want to become president even though Amisom controls Mogadishu

LONG SERIES OF HTML5 GAMES: chapter1 part7

Postby afisoone » Fri May 22, 2015 7:20 pm

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={

//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);

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

//kani waa functionkii keenStageka();

function keenStageka()



//kani waa functionkii updateStageKa

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




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


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


Hello, Has your question been answered on this page? We hope yes. If not, you can start a new thread and post your question(s). It is free to join. You can also search our over a million pages (just scroll up and use our site-wide search box) or browse the forums.

  • Similar Topics
    Last post

Return to “Careers - Engineering, Science & Computers”

Who is online

Users browsing this forum: No registered users and 2 guests