Jump to content
  • Advertisement
Sign in to follow this  

javascript game menu up and down arrrow key navigation

This topic is 2228 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

anyone here had an experience in using pure javascript, i'm having hard time coding it, especially the up and down arrow key event in navigating the menu key,.

i have 3 options in game menu:

Play Game

I want this three image button can be navigated by the up and down arrow key and when i navigate one of them i want it to be highlighted.

any good tutorials or link would be good.

p.s. please excuse my English. =)

Share this post

Link to post
Share on other sites
There are many way to to this.

One way: the buttons have identifiers 0,1,2 (from Play Game to Help).
Have a separate (global in the scope of the main menu) variable, called ActiveMenuItem for example. If ActiveMenuItem is 0, Play Game is selected. If it's 1, Options is selected, and so on.
You don't actually have to have variables for the buttons as identifiers, because you the identifiers go from zero to the number of menu items minus one.

When you push the up arrow you decrease ActiveMenuItem, when you push down, you increase it. And you "warp" the value of course.

Something like:

ActiveMenuItem = (ActiveMenuItem + 1)%3; for increasing and warping around. (3 is the total number of menu items)
ActiveMenuItem = (ActiveMenuItem + 2)%3; for decreasing and warping around. It's equivalent to ActiveMenuItem -1, but the % operator doesn't quite work as expected with negative numbers, that's why we use 2. (total number of menu items minus one)

For this, you need to track key down (or up) events.

For rendering, there are many ways, depending on how you render the buttons. Since you know what the active button is, you can draw that differently to highlight it.
For the action to take when you press enter for example, you again check the value of ActiveMenuItem, and you can even have a simple [color=#0000ff]switch statement and just code the actions in the [color=#0000ff]cases.

This is the simplest, but not the most elegant solution. I wouldn't go for a more elegant or general solution for a simple menu like the one you want.
I have written menus like that which had 10 or more items. Even it's ugly in code, it's super simple, easy to implement and to expand. I guess this is what they call "immediate mode GUI"

As for the Sub menus: You can "duplicate" this logic. It does sound like a hacky messy thing, but if you don't have many sub items and many levels of menus, it's pretty simple.

This system is for game GUIs. For more complex GUIs, like GUI for a level editor, much more sophisticated GUI system is needed.

I hope that helps. Edited by szecs

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!