Computer Science
Grade 7
20 min
Using the Keyboard
Using the Keyboard
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define what a keyboard event and an event listener are.
Differentiate between a key press event and checking the keyboard's continuous state.
Use conditional statements (if/elif/else) to make a program react to specific key presses.
Identify and use the key codes for non-character keys like arrow keys, spacebar, and Enter.
Design a simple function that is triggered by a keyboard event.
Implement smooth character movement by checking the keyboard state inside a program loop.
Debug common issues related to keyboard input, such as case sensitivity and incorrect key codes.
Have you ever wondered how a video game character instantly knows when you press the jump button or the arrow keys? Let's learn the magic behind it! 🎮
In this lesson, we'...
2
Key Concepts & Vocabulary
TermDefinitionExample
Keyboard EventAn action that the program can detect, which occurs when a user interacts with the keyboard, such as pressing or releasing a key.When you press the spacebar in a game to make a character jump, that is a 'key press' event.
Event ListenerA function or part of a program that waits for a specific event to happen and then runs a block of code in response.A program might have an event listener that is always 'listening' for the 'Enter' key. When it 'hears' Enter being pressed, it runs the code to submit a form.
Key CodeA unique name or number that represents a specific key on the keyboard, especially for non-character keys.The spacebar might have the key code 'Space', and the up arrow key might be 'ArrowU...
3
Core Syntax & Patterns
The Event Listener Pattern
function onKeyPress(key) {
// code to run when any key is pressed
}
Use this pattern when you want an action to happen only ONCE, at the exact moment a key is pressed. The 'key' variable holds information about which key was pressed.
The Conditional Key Check
if (key.name == 'ArrowUp') {
// do something specific
} else if (key.name == 'a') {
// do something else
}
Inside an event listener, use an if/elif/else structure to check WHICH key was pressed and run different code for different keys.
The State-Checking Pattern
function gameLoop() {
if (isKeyDown('ArrowLeft')) {
// move character left
}
}
Use this pattern inside a continuous loop (like a game loop) for actions that shoul...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You are designing a game where the character moves left and right smoothly, but jumps with a single press of the spacebar (the character should not keep jumping if the spacebar is held down). Which combination of techniques is best?
A.Use `onKeyPress` for all movement (left, right, and jump).
B.Use `isKeyDown` in a `gameLoop` for all movement.
C.Use `isKeyDown` in a `gameLoop` for left/right movement, and `onKeyPress` for the jump.
D.Use `onKeyPress` for left/right movement, and `isKeyDown` in a `gameLoop` for the jump.
Challenging
In some games, you can move diagonally by holding down two keys at once (e.g., 'w' and 'd' to move up and right). How does the state-checking pattern make this possible?
A.By using two separate `if` statements inside the `gameLoop`, one for each key, which can both be true in the same frame.
B.The `onKeyPress` function can detect two keys being pressed at the exact same millisecond.
C.By using an `if/elif` structure, which allows two conditions to be true at once.
D.This is not possible with the techniques described; it requires a special 'diagonal' key code.
Challenging
A player complains that they can't fire their laser rapidly by holding down the spacebar; they have to tap it for each shot. The code uses `onKeyPress` to call a `fireLaser()` function. What is the core problem and the best solution?
A.The problem is `onKeyPress` only fires once. The solution is to use `onKeyRelease` instead.
B.The problem is a slow `gameLoop`. The solution is to make the loop run faster.
C.The problem is network lag. The solution is to check the player's internet connection.
D.The problem is `onKeyPress` only fires once. A better solution is to check for `isKeyDown('Space')` in the `gameLoop`, but add a cooldown timer to prevent firing every single frame.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free