KeyListener and Keyboard Events• Just as we can implement listeners to handle mouse

events, we can do the same for keyboard events (keypresses)– to implement KeyListener, you must implement three methods:

keyPressed, keyReleased and keyTyped• all three methods receive a KeyEvent• the KeyEvent includes information about which key was pressed• in our code, we will want logic to obtain the key pressed and make a

decision about what to do about it• there are two instructions we will want to use to get the key:

getKeyChar returns the character (e.g., ‘a’ or ‘d’) but this is not useful if we want to use the arrow keys or space bar, etc, so we also have getKeyCode which we can compare against constants like KeyEvent.VK_LEFT or KeyEvent.VK_ENTER (left arrow, enter key)

– in order for your Java program to watch for key presses, you also have to get your container (probably a JPanel) to watch the keyboard, this is done by saying

• panel.setFocusable(true);

Using Keyboard Input• Now that you have implemented both JButtons and

Mouse handling, using keyboard input is much the same

• So the question is, how do we want to use the keyboard?– We want to select some keys that will control movement in

a game• Move around a maze• Move the “sights” of a gun or a missile launcher• Move a paddle (for instance in Pong or Breakout)

– So we will want to designate certain keys for use– We will then place our logic to move the item in one of the

keyListener methods such as keyTyped– For instance, if a key is typed, in keyTyped we get the key’s

character and see if it was ‘a’ to move left or ‘d’ to move right and then adjust an x coordinate

Moving Objects• We will assume an object on the screen at

coordinates x, y– We define a set of keys for data movement

• for instance, the arrow keys or a, w, d, x for left, up, right, down– In keyPressed, keyReleased or keyTyped, we test for the

character and make the proper movement in x or y• if(e.getKeyChar( ) = = ‘a’) x--;• else if(e.getKeyChar( ) = = ‘w’) y--;• else if(e.getKeyChar( ) = = ‘d’) x++;• else if(e.getKeyChar( ) = = ‘x’) y++;

– Notice that we are not using an else statement here because this method is called whenever ANY key is pressed, so the statement else y++; would move the object down whenever any key which is not ‘a’, ‘w’ or ‘d’ is pressed/typed/released

– We follow the above code with repaint( );

Borders• Imagine our drawing area is 500x500

– We start at x=250,y=250

• For each of a, w, d, x, we move the object accordingly– What happens if the user presses x 250 times? x will be

500, can we draw something there?– Yes, but we will not see it

• When we move the object in the keyPressed method, we want to make sure it does not sound the object beyond a border

• We need to add code like this:– if(x>480) x=480; to force the object to “stop” moving– or if(x>480) x=0; to “wrap-around” to the other side of the

screen

Etch a Sketch Program• Let’s use the keyboard input to control the drawing

of short lines like the old etch a sketch game– This program requires a Graphics object to draw on and a

KeyListener

– Since we do not need GUI components, they can both go in the same class which we will call ESPanel

– ESPanel requires the current x,y coordinate of the line being drawn and the direction we want to extend the line

– The direction will be controlled by the keyboard by using the up, down, left or right arrows

– We will also allow the user to “erase” the image by using the enter key, which will be indicated through a boolean variable called setClear, initialized to false

Methods

public void keyPressed(KeyEvent e) { if(e.getKeyCode()==KeyEvent.VK_LEFT) direction = 0; else if(e.getKeyCode()==KeyEvent.VK_UP) direction = 1; else if(e.getKeyCode()==KeyEvent.VK_RIGHT) direction = 2; else if(e.getKeyCode()==KeyEvent.VK_DOWN) direction = 3; else if(e.getKeyCode()==KeyEvent.VK_ENTER setClear = true; repaint( ); }

public void paintComponent(Graphics g) { if(setClear) {

boolean super.paintComponent(g); setClear = false;

} else { g.setColor(Color.black);

if(direction==0) {g.drawLine(x, y, x-2, y); x-=2; if (x < 10) x = 10;} else if(direction==1) { g.drawLine(x, y, x, y-2); y-=2; if (y < 10) y = 10; }else if(direction== 2) { g.drawLine(x, y, x+2, y); x+=2; if (x > 290) x = 290;}else if(direction==3) { g.drawLine(x, y, x, y+2); y+=2; if (y > 290) y = 290; }

}}

Typewriter Program• Another example is to allow the user to “type” on the

Graphics area– This will require using the mouse to position the cursor (to get

the x,y coordinate of where to “type”)– A KeyListener to receive the lastest key stroke and use a

g.drawString to output that character at the x, y coordinate– After typing in a letter, we want to move x a little to the right

as if it were a typewriter– We could also add the ability to delete characters or clear the

screen, but we won’t bother with those details here• Variables needed

– x, y for the coordinates of where the next character should appear

– c the latest character obtained by a KeyEvent• We need to implement MouseListener and KeyListener on

one JPanel

Methods

public void mouseClicked(MouseEvent e) {int tempX = e.getX(); int tempY = e.getY(); if(tempX > 10 && tempX < 290 && tempY > 10 && tempY < 290) {

x = tempX; y = tempY;

}}public void keyTyped(KeyEvent e) {

key = e.getKeyChar(); repaint();

}public void paintComponent(Graphics g) {

String temp = "" + key; g.setColor(Color.white);drawString(temp, x, y); x+=7;if(x>290) {

x=10;y+=12;

}}

Maze• Today’s project is to build a maze game

– The maze will be drawn via paintComponent– The user moves around the maze using keyboard input

• unlike the typewriter and etch a sketch where we had to ensure that the user didn’t go off the screen, here we have to ensure that the user doesn’t move into or beyond a wall!

– The maze itself will have to be stored as an array (we will use an array of ints because it’s a little easier to set up than an array of booleans)

– We will use an int value of 1 for a wall and 0 for an opening– For instance, we might have a few rows of the array look like

this:• 111111111111111111111111111111111• 111100000000011111100011111110011• 110001111111000000001010000000111• 110100001111111111111000111111111• 001111100000000000000011111111111• 111111111111111111111111111111111

More• Aside from the array itself, we need the

current location of the user (x, y)• When the user presses a key, we first check to

see if that would move the user beyond a border and if not, we check to see if that move is into a wall or not– Only if the move is not beyond a border or into a

wall do we make the move– For instance,

• if(key==‘a’&&x>1&&maze[x-1][y]==0) x--;• this says: “if the key is ‘a’, and the user is not on the

leftmost border, and the square being moved into is 0 (an opening) then move to that square

Maze Program• This program will need a JPanel for drawing• The JPanel class will implement KeyListener and have

a 2-D array of ints to represent the maze, and the current x, y coordinate

• Implement keyTyped (or keyPressed) to check to see if the move is legal and if so, adjust x or y, and call repaint

• In repaint, draw the maze borders in one color and then draw the current location of the user in another color– The maze walls should be squares, for instance 10x10, the

user should be a circle (10x10 also)– See the skeleton program, notice the maze is already set up,

you can adjust it as you like– To create multiple mazes, you need to have either multiple

arrays or a 3-D array!