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?
Then we do similar to plane.yif(plane.x < 0)
{
plane.x=0;
}
to get the exact leading each we add the width of the plane to see if over pass the canvaska.if(plane.y < 0)
{
plane.y=0;
}
then we do the samething to plane.yif(plane.x + plane.width >canvaska.width)
{
//then we return back. actually it stops when it reached there.
plane.x=canvaska.width - plane.width;
}
Beautiful: Now let's add these codes to updateStageka();if(plane.y +plane.height >canvaska.height)
{
plane.y=canvaska.height -plane.height;
}
Here we go. Now the plane will not cross the canvaska.. Actually it will stop much less than the edge..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();
}
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