LONG SERIES OF HTML5 GAMES: chapter1 part10

[afisoone]

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


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