LONG SERIES OF HTML5 GAMES: chapter1 part12

[afisoone]

Hello Markale.. Last question was how to keep the image inside the canvaska...

Ok let's do it.

First our plane image in the keyboarding tutorial. we will test first if plan.x is less the zero. Then set it to zero.

here how you do it?

if(plane.x < 0)
{

plane.x=0;


}

Then we do similar to plane.y

if(plane.y < 0)
{

plane.y=0;

}

to get the exact leading each we add the width of the plane to see if over pass the canvaska.

if(plane.x + plane.width >canvaska.width)

{
//then we return back. actually it stops when it reached there.
plane.x=canvaska.width - plane.width;



}

then we do the samething to plane.y

if(plane.y +plane.height >canvaska.height)

{
plane.y=canvaska.height -plane.height;

}

Beautiful: Now let's add these codes to updateStageka();

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

if(korUsoco && !hoosUsoco)
{
plane.vy=-5;


}
if(hoosUsoco && !korUsoco)
{
plane.vy=5;


}
if(midigUsoco && !bidixUsoco)
{
plane.vx=-5;


}
if(bidixUsoco && !midigUsoco)
{
plane.vx=5;


}
if(!hoosUsoco && !korUsoco)
{
plane.vy=0;


}
if(!bidixUsoco && !midigUsoco)
{
plane.vx=0;


}
plane.x+=plane.vx;
plane.y+=plane.vy;

//control the canvas

if(plane.x<0)
{
plane.x=0;
}
if(plane.y<0)
{
plane.y=0;
}
if(plane.x+plane.width>canvaska.width)
{
plane.x=canvaska.width-plane.width;
}
if(plane.y+plane.height>canvaska.height)
{
plane.y=canvaska.height-plane.height;
}







hadbaSawir();


}

Here we go. Now the plane will not cross the canvaska.. Actually it will stop much less than the edge..

Let's test in our server on this one keyboard with boundaries


The Quiz
Student: Macalin Afisoone, How to put camera in this canvaska so the plane can fly on the sky passing the cload?

Macalin Afisoone: It is called scaling and I will do it our next lesson. Inshallah!

<<<Previous Lesson