KeyListener and Keyboard Events

1. KeyListener and Keyboard Events • Here we track KeyEvents • to implement KeyListener, implement three methods: keyPressed, keyReleased and keyTyped • the KeyEvent, a parameter passed to the methods, includes information about which key was pressed • our code needs to obtain the key pressed and make a decision about what to do • two instructions to get the key: • getKeyCharreturns the character (e.g., ‘a’ or ‘d’) • getKeyCode can be compared against KeyEvent constants like KeyEvent.VK_LEFTor 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);

2. Using Keyboard Input • Keyboard input is otherwise similar to handling MouseEvents • 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

3. 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( );

4. 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

5. 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; } } } Methods

6. 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

7. 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; } } Methods

8. 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

9. 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

10. 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!