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...
Beautiful: It is same way we create arrow but now we started with background. The order is very crucial...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)
Now let is create our car same technique
As you can see the car is the far side which we don't need to set sawirX because the car.sawirX x=0;var car= Object.create(sawirObject);
car.x=0;
car.y=168;
xafidSawir.push(car);
Now we need to create the plane same technique. ok
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 .var plane= Object.create(sawirObject);
plane.sawirX=150;
plane.x=238;
plane.y=335;
xafidSawir.push(plane);
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..
Since it one image. we only load the background image..function updateStageka()
{
window.requestAnimationFrame(updateStageka, canvaska);
car.x++;
plane.y--;
hadbaSawir();
}
here it is..
We don't have to load nothing else and we have three images.. How easy it can get.var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="background.png";
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...
That is the one I will answer next lesson.Another question Macalin Afisoone.. How do I use the keyboard Arrows?
<<<Previous Lesson