Welcome to SomaliNet Forums, a friendly and gigantic Somali centric active community. Login to hide this block

You are currently viewing this page as a guest. By joining our community you will have the ability to post topics, ask questions, educate others, use the advanced search, subscribe to threads and access many, many other features. Registration is quick, simple and absolutely free. Join SomaliNet forums today! Please note that registered members with over 50 posts see no ads whatsoever! Are you new to SomaliNet? These forums with millions of posts are just one section of a much larger site. Just visit the front page and use the top links to explore deep into SomaliNet oasis, Somali singles, Somali business directory, Somali job bank and much more. Click here to login. If you need to reset your password, click here. If you have any problems with the registration process or your account login, please contact us.

LONG SERIES OF HTML5 GAMES: chapter1 part11

Qaybta Xirfada Sayniska iyo iwm

Moderators: Moderators, Junior Moderators

OUR SPONSOR: LOGIN TO HIDE
User avatar
afisoone
SomaliNet Super
SomaliNet Super
Posts: 5483
Joined: Wed Jul 22, 2009 9:46 pm
Location: We all want to become president even though Amisom controls Mogadishu

LONG SERIES OF HTML5 GAMES: chapter1 part11

Postby afisoone » Sat May 23, 2015 3:44 pm

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

OUR SPONSOR: LOGIN TO HIDE

Hello, Has your question been answered on this page? We hope yes. If not, you can start a new thread and post your question(s). It is free to join. You can also search our over a million pages (just scroll up and use our site-wide search box) or browse the forums.

  • Similar Topics
    Replies
    Views
    Last post

Return to “Careers - Engineering, Science & Computers”

Who is online

Users browsing this forum: No registered users and 2 guests