The QB Times

Creating menus for your programs

By: Nightwolf Introduction

Hi, and welcome to this article for beginning QBasic programmers about menus. I will cover some basic menus and move on to more advanced menus. In this article I'll cover: simple 'press a key menus', menu's with a 'highlight selection bar', graphical menus and even mosue driven menus. I'll discuss each type of menu with the pros & cons, an example how to make one. As a last thing I want to state that this article is especially written for newbies. I found that there were not enough articles in the QB magazines (including The QB Times) that were for newbies so I thought why don't we make some? But remember, although this is an article for newbies I do expect you to know some basic commands like FOR...NEXT, DO...LOOP and SELECT...CASE, if you don't know these commands I suggest you find a tutorial which explains them! Well let's get started now!

'Press a key menus'

What I mean with 'Press a key menus' is the following: you get a menu on your screen looking like this:

(N)ew Game
(L)oad Game
(S)ave Game
(I)nstructions
(Q)uit

And you press N for New Game, L for Load Game etc. This menu is fairly easy to make and I've seen it used in a lot of games. It's not very nice to see but it gets the job done. I'll list the Pros & Cons in a nice little table now:

Pros	Cons
Easy to make Takes almost no coding space	Doesn't look nice

So now you know the Pros & Cons of this menu let's get started on the coding. We'll use the example menu for this coding example:

PRINT "(N)ew Game"
PRINT "(L)oad Game"
PRINT "(S)ave Game"
PRINT "(I)nstructions"
PRINT "(Q)uit"

DO
 a$ = INKEY$
 SELECT CASE UCASE$(a$)
  CASE "N"
   PRINT "You selected New Game!"
  CASE "L"
   PRINT "You selected Load Game!"
  CASE "S"
   PRINT "You selected Save Game!"
  CASE "I"
   PRINT "You selected Instructions!"
  CASE "Q"
   PRINT "You selected Quit!"
   PRINT "Have a nice day!"
   SYSTEM
 END SELECT
LOOP

Click here to download this example.

This code will create an example menu and if you press one of the menu's keys the program will show which option you have chosen and if you selected Quit it'll print a greeting and then exit the program I'll discuss the program in blocks of a few lines of code now. We'll use the example menu for this coding example:

PRINT "(N)ew Game"
PRINT "(L)oad Game"
PRINT "(S)ave Game"
PRINT "(I)nstructions"
PRINT "(Q)uit"

This just prints out the basic menu.

DO
 a$ = INKEY$
 SELECT CASE UCASE$(a$)

This starts a DO...LOOP, give a$ the value of INKEY$ (the string that holds which key is pressed) and starts a SELECT CASE with the value of a$ in captial (UCASE$(a$).

CASE "N"
 PRINT "You selected New Game!"
CASE "L"
 PRINT "You selected Load Game!"
CASE "S"
 PRINT "You selected Save Game!"
CASE "I"
 PRINT "You selected Instructions!"
CASE "Q"
 PRINT "You selected Quit!"
 PRINT "Have a nice day!"
 SYSTEM

This checks which key is pressed, for instance, CASE "N" checks the value of a$ (the string in which the key that is currently pressed is stored) and if it's "N" the program executes the commands within the CASE. Which is obviously PRINT "You selected New Game!". This is the same for the rest of the CASEs, but if the users pressed "Q" for Quit, the program returns to the system with the SYSTEM command.

 END SELECT
LOOP

End the SELECT...CASE and LOOP back to DO.

Of course, this code is for example purposes only and could be optimized a lot.

My conclusion for this menu is that I would not use this menu in my game. Although it's very easy to create it really doesn't look nice. There are many other nice looking and easy to create menus, like the highlight selection menu.

'Highlight selection' menu

Highlight selection menus are the kind of menus were you have a bar and you can move the bar and when the bar is at your selection you press enter to select it. It looks something like this: (Instructions should have a blue blackground but if you use Netscape it won't show up)

New Game
Load Game
Instructions 
Quit Game

My Cons & Pros are listed in the table below:

Pros	Cons
Easy to make Takes very little code Looks good in text games	Doesn't look good in other games

Now then, let's go to the code of the menu:

DIM SHARED Menu$(4)

selection% = 1
Menu$(1) = "New Game"
Menu$(2) = "Load Game"
Menu$(3) = "Instructions"
Menu$(4) = "Quit Game"

GOSUB Redraw

DO
 A$ = INKEY$
 SELECT CASE A$
  CASE CHR$(0) + "H"
   selection% = selection% - 1
   IF selection% = 0 THEN selection% = 4
   GOSUB Redraw
  CASE CHR$(0) + "P"
   selection% = selection% + 1
   IF selection% > 4 THEN selection% = 1
   GOSUB Redraw
  CASE " "
   CLS
   PRINT "You selected: "; Menu$(selection%)
   END
 END SELECT
LOOP

Redraw:
CLS
FOR i = 1 TO 4
 PRINT Menu$(i)
NEXT i
LOCATE selection%, 1
COLOR 7, 1
PRINT Menu$(selection%)
COLOR 7, 0
RETURN

Click here to download the example menu.

I'll discuss the code now:

DIM SHARED Menu$(4)

We create an array (Menu$) with four slots for our menu options.

selection% = 1
Menu$(1) = "New Game"
Menu$(2) = "Load Game"
Menu$(3) = "Instructions"
Menu$(4) = "Quit Game"

We give the selection% (the variable which holds the current position of the selection bar) the value of 1, it's at the top of the menu now. We also fill in the four slots of the Menu$ array with the names we want to give to the menu's options.

GOSUB Redraw

We go to the Redraw label, in which the menu gets drawn.

DO
 A$ = INKEY$
 SELECT CASE A$

We start a DO...LOOP, give A$ the value of INKEY$ and start a SELECT...CASE with the value of A$

CASE CHR$(0) + "H"
 selection% = selection% - 1
 IF selection% = 0 THEN selection% = 4
 GOSUB Redraw

We check if the key currently pressed is the up arrow (CHR$(0) + "H") and if it is we subtract 1 from the selection% variable which moves the selection bar one place up. Then we check if the selection% variable is 0 and if it is we make the selection% variable 4 (this moves the selection bar from the top of the menu to the bottom, because there is no option 0). Then we goto the Redraw label to put the new menu on screen.

CASE CHR$(0) + "P"
 selection% = selection% + 1
 IF selection% > 4 THEN selection% = 1
 GOSUB Redraw

We check if the key currently pressed is the down arrow (CHR$(0) + "P") and if it is we add 1 to the selection% variable which moves the selection bar one place down. Then we check if the selection% variable is bigger than 4 and if it is we make the selection% variable 1 (this moves the selection bar from the bottom of the menu to the top, because we have only four options, if you have more options in your menu you need to increase this number). Then we goto the Redraw label to put the new menu on screen.

CASE " "
 CLS
 PRINT "You selected: "; Menu$(selection%)
 END

We check if the key currently pressed is space (" ") and if it is we clear the screen and PRINT the current selection. Then we END the program.

 END SELECT
LOOP

We END the SELECT and LOOP back to DO.

Redraw:

Here we define the Redraw: label.

CLS
FOR i = 1 TO 4
 PRINT Menu$(i)
NEXT i

We clear the screen and print out the menu options.

LOCATE selection%, 1
COLOR 7, 1
PRINT Menu$(selection%)
COLOR 7, 0

We put the cursor at the line of the current selection and change the color to white on forground, blue on background. Now we print the menu option of the current selection (this gives the bar which selects the selection). Then we change the background color back to black, forground color stays white.

RETURN

We return to where the Redraw: label was called from.

My conclusion for this menu is that if you're making a text game you can very well use this menu. But if you're making a graphical game you can make the same kind of menu with graphics and that's much nicer!

Well, you now know how to do some menus. In the next issue I'll continue this article and we'll get into making graphical and mouse driven menus. I hope you like this article.. Don't hesitate to tell me :-) Also if you've any questions regarding this article you can mail me at nwep@qb45.com.