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 part6

Qaybta Xirfada Sayniska iyo iwm

Moderators: Moderators, Junior Moderators

OUR SPONSOR: LOGIN TO HIDE
User avatar
afisoone
SomaliNet Super
SomaliNet Super
Posts: 5483
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 part6

Postby afisoone » Fri May 22, 2015 5:19 pm

Wow I can't believe we are almost there..

Now we are going to build hadbaSawir();

As you know canvaska waa sida TV Screen. It draws the image and redraw it again. Since the animation is about 15 seconds. You can't see it.
first we need to clear the canvaska every time up it renders.. Ok..


let' do it
function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);

}
Beautiful: so now all you need is bring the image to the canvaska. Ok..

Before we do that. Remember arrow.png is in the array xafidSawir(); We have to test if that array holds any image at all.
let' test it.
function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);

if(xafidSawir.length!==0)
{


}

}

Very good.. Waxaan ku dhahay haduuna empty aheen. Then do something..

Let's do something.. We are going to draw the image on the canvas..
function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);

if(xafidSawir !==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);



}


}

}


Woow I can't believe we draw the image on to the canvas using drawImage...

On the of Math.floor, all I am doing to round up to one.. That is all..
All the properties we passed in our template object oo ahaa sawirObject...

As you variableka sawirkaan waxaan ku lifaaqinay meeshii uu ku xafidnaa sawirkaan oo aheed variableka xafidSawir();

We for loop the array to get the image it holds. In this case we have only one image.. We can put many images such as background.
you will see soon.

So how do we put all these codes together?
That is the question I will answer the next lesson...


<<Previous Lesson

OUR SPONSOR: LOGIN TO HIDE

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
    Replies
    Views
    Last post

Return to “Careers - Engineering, Science & Computers”

Who is online

Users browsing this forum: No registered users and 5 guests