using arrow keyboarding is easy.
Let us open our file Object.js
we need to add our template sawirObject vx and vy. This will store the speed of the image. Actually it is the velocity of the image. Velocity is a speed. It is velocity x and velocity y. Don't get confuse. You will see it in a minute.
let add vx iyo vy in a speed.
Ok now we need to create our image which is the plane.var sawirObject={
sawirWidth:83,
sawirHeight:59,
sawirX:0,
sawirY:0,
width:83,
height:59,
x:0,
y:0,
vx:0,
vy:0
};
As you can see we bring the plane in the center of the canvas. the width of canvas is 550 and height is 400.var plane= Object.create(sawirObject);
plane.x=248;
plane.y=168;
xafidSawir.push(plane);
Now we need to load the image..
ok now it is time to write variable the holds the keyboard.var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="plane.png";
//arrow key codes
now we need variable that holds the directionvar KOR=38;
var HOOS=40;
var MIDIG=39;
var BIDIX=37;
//directionada
now let's create addEventListener that holds the keyboard... and set the arrow keydown to true.var korUsoco=false;
var hoosUsoco=false;
var midigUsoco=false;
var bidixUsoco=false;
So if the variables KOR IYO HOOS IYO MIDIG IYO BIDIX HADII LA RIIXO SET TO TRUE IF THE keydown function called.//kulifaaqi keyboard listener
window.addEventListener("keydown",function(event){
switch(event.keyCode)
{
case KOR:
korUsoco=true;
break;
case HOOS:
hoosUsoco=true;
break;
case MIDIG:
midigUsoco=true;
break;
case BIDIX:
bidixUsoco=true;
break;
}
}, false);
That is all I said it.
So as you can if the key is not pressed we set all those variable to false..now let's add keyup addEventListener
window.addEventListener("keyup",function(event){
switch(event.keyCode)
{
case KOR:
korUsoco=false;
break;
case HOOS:
hoosUsoco=false;
break;
case MIDIG:
midigUsoco=false;
break;
case BIDIX:
bidixUsoco=false;
break;
}
}, false);
Now we need to updateStageka to our directional variables and set the directions..
Ok as you can see it in Somali.. There is no need on Explanation. We test the direction and we set to zero it is velocity if there is nofunction 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;
hadbaSawir();
}
direction is pressed...
Ok. let's see what we did.. Keyboarding Demo
------------------------------------
Question about this tutorial
<<<Previous LessonStudent: Macalin Afisoone the plane moved passed the canvas. How do I keep it inside the canvas.
Macalin Afisoone: Well, That is logic question. It is easy and we cover the next lesson...