LONG SERIES OF HTML5 GAMES: chapter1 part11

[afisoone]

Wow we are in keyboarding. I can't believe it. I thought we will reach in long time. Ok.

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.

var sawirObject={
sawirWidth:83,
sawirHeight:59,
sawirX:0,
sawirY:0,
width:83,
height:59,
x:0,
y:0,
vx:0,
vy:0



};

Ok now we need to create our image which is the plane.

var plane= Object.create(sawirObject);


plane.x=248;
plane.y=168;
xafidSawir.push(plane);

As you can see we bring the plane in the center of the canvas. the width of canvas is 550 and height is 400.

Now we need to load the image..

var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="plane.png";

ok now it is time to write variable the holds the keyboard.
//arrow key codes

var KOR=38;
var HOOS=40;
var MIDIG=39;
var BIDIX=37;

now we need variable that holds the direction
//directionada

var korUsoco=false;
var hoosUsoco=false;
var midigUsoco=false;
var bidixUsoco=false;

now let's create addEventListener that holds the keyboard... and set the arrow keydown to true.

//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);

So if the variables KOR IYO HOOS IYO MIDIG IYO BIDIX HADII LA RIIXO SET TO TRUE IF THE keydown function called.
That is all I said it.

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);

So as you can if the key is not pressed we set all those variable to false..


Now we need to updateStageka to our directional variables and set the directions..

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;








hadbaSawir();


}

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 no
direction is pressed...

Ok. let's see what we did.. Keyboarding Demo

------------------------------------

Question about this tutorial

Student: 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...

<<<Previous Lesson