Sign in to follow this  
ryanroyaranas

javascript game menu up and down arrrow key navigation

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
Options
Help

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 [i]Play Game[/i] to [i]Help[/i]).
Have a separate (global in the scope of the main menu) variable, called [i]ActiveMenuItem[/i] for example. If [i]ActiveMenuItem [/i]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 [i]ActiveMenuItem[/i], when you push down, you increase it. And you "warp" the value of course.

Something like:

[i]ActiveMenuItem = (ActiveMenuItem + 1)%3;[/i] for increasing and warping around. (3 is the total number of menu items)
[i]ActiveMenuItem = (ActiveMenuItem + 2)%3;[/i] for decreasing and warping around. It's equivalent to [i]ActiveMenuItem -1[/i], 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 [i]ActiveMenuItem[/i], and you can even have a simple [color=#0000ff]switch[/color] statement and just code the actions in the [color=#0000ff]case[/color]s.


[rollup='Disclaimer']
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.
[/rollup]

I hope that helps. Edited by szecs

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this