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 part10

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 part10

Postby afisoone » Sat May 23, 2015 12:05 pm

Hi markale,

Waxey noo joogtay sidee usoo bisanaa background image. I will show even more skillful way to save your time to load multiple graphics.

Here it is a simple image and it has car and plane inside the one image let me show you that image
Image

Top of the image it has car and plane... Ok.. and it is one image.. I will make get that background and let the car and plane move in the canvas.
How is that?

First let use our old template sawirObject and to create our background image...
var background=Object.create(sawirObject);
background.sawirY=64;
background.sawirWidth = 550;
background.sawirHeight = 400;
background.width = 550;
background.height = 400;
background.x = 0;
background.y = 0;
xafidSawir.push(background)
Beautiful: It is same way we create arrow but now we started with background. The order is very crucial...

Now let is create our car same technique
var car= Object.create(sawirObject);

car.x=0;
car.y=168;
xafidSawir.push(car);
As you can see the car is the far side which we don't need to set sawirX because the car.sawirX x=0;

Now we need to create the plane same technique. ok
var plane= Object.create(sawirObject);
plane.sawirX=150;

plane.x=238;
plane.y=335;
xafidSawir.push(plane);
Now we set the plane.sawirX=150 because the plane is far from the car almost 150 px apart.. That how we are going to get .

now in the functionka updateStageka we will set plan.y--- so it can go up. As you plane.x in the canvaska x= 238, y= 335; almost the all
the to the bottom.
here the is the updateStageka..
function updateStageka()
{
window.requestAnimationFrame(updateStageka, canvaska);

car.x++;

plane.y--;








hadbaSawir();


}
Since it one image. we only load the background image..
here it is..
var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="background.png";
We don't have to load nothing else and we have three images.. How easy it can get.

So now here the demo.background with images

So that how you set up your graphics.. It one image and it much faster way to setup graphics for you game...
Another question Macalin Afisoone.. How do I use the keyboard Arrows?
That is the one I will answer 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 3 guests