Learn to Code via Tutorials on Repl.it!

← Back to all posts
JavaScript Arrow Keys Tutorial
h
JWZ6 (654)

Hello!

This is my 2nd JavaScript tutorial btw

I'm sure that you've heard about arrow keys. They play a big role when creating games.

Contents

  • How The Arrow Keys Look Like
  • Important JavaScript
  • Key Code Chart
  • How To Use Arrow Keys
  • Summary And Game Example

How The Arrow Keys Look Like

Right Arrow Key: ➡️
Left Arrow Key: ⬅️
Up Arrow Key: ⬆️
Down Arrow Key: ⬇️

Important JavaScript

1: addEventListener

document.addEventListener is important because it detects if a key is pressed (in our case). The format looks like:

document.addEventListener(/*Your Event*/,/*Your Function*/, /*Your useCapture*/); 

For example, you might have:

let id = document.getElementById("hover");
let look = document.getElementById("look");
id.addEventListener("mouseover",function(){look.removeChild(look.childNodes[0]);});

This would remove the HTML element that has the idof look on hover of the HTML element that has the id of hover.

Click this to learn more about event listeners, mainly addEventListener.

2: function

I explained this in my first JavaScript tutorial. Functions are helpful because like, def your_function(): in Python, you create a shortcut for the code you want to use. Functions are helpful if your using onclick or onmouseover if your in HTML. An example looks like:

function your_func(){
  // The code you want to be executed
  // Here is an example:
  alert("This works");
}

Click this to learn more about functions.

3: if, else if, else

Ah yes, some of the most well known loops. I'm sure that you already know these. These are important, though. We will use them to detect which key is being pressed. Here is an example of an if, else if, else statement:

if (10 < 15){
  alert("true");
}
else if (10 > 15){
  document.write("false");
}
else {
  alert("WHAT KIND OF SORCERY IS THIS");
}

Click me to learn more about if else if, else statements.

4: && and ||

&& means and. || means or. These are useful because if you want to have two keys combined, you can use &&. If you want to have 2 keys that have the same result, use || to save time and make things easier. For example, if I did:

if (10 > 5 && 6 > 3){
  console.log("TRUE");
}

I would get "TRUE". I could use || like:

if (4 < 8 || 8 < 5){
  alert("One is correct");
}

Click this to learn more about operators.

5: keydown

For those that are only beginners, don't panic. keydown is a bit more advanced. keydown is an event, so when a certain key or element is pressed, an event will happen. keydown is actually an event and it could be used in addEventListener.

Click me to learn more about the jQuery event, keydown.

Key Code Chart

Numbers:

KeyCode
Number 0 key48
Number 1 key49
Number 2 key50
Number 3 key51
Number 4 key52
Number 5 key53
Number 6 key54
Number 7 key55
Number 8 key56
Number 9 key57

WASD and Arrow Keys:

KeyCode
W key87
A key65
S key83
D key68
Up Arrow key38
Down Arrow key40
Left Arrow key37
Right Arrow key39

You can see the entire keycode chart here. Make sure to not get confused with keydown and keypress because they have different key codes.

How To Use Arrow Keys

Here is an example on how to use the up arrow key:

document.addEventListener("keydown", function(your_event) {
  if (your_event.which == 38 || your_event.which == 87){
    alert("Up!");
    your_event.preventDefault();
  }
});

I don't think that you might understand this. Let me break this down. Our addEventListener is waiting for a key. The keydown part detects if a key is pressed. The function is here to help detect which key is pressed. The if statement selects which key is pressed. The || allows you to have different keys that do the same things.

This is the basic format:

document.addEventListener("keydown", function(/* your_event_name */) {
  if (/* your_event_name */.which == /* your_key */){
    // Your code
    /* your_event_name */.preventDefault();
  }
});

Summary And Game Example

Summary

I hope that this tutorial helped you. We have our event waiting for a key to happen. If you still don't understand what's going on, reread what I wrote. I tried to make this informative and easy to understand.

Game Example

Check out my code if you don't uderstand this. The post is here. My game is just moving blocks. Enjoy!

I'm Done, Bye!

Comments
hotnewtop
27whuang (2)

@JWZ6 Does this work for C++ too

JWZ6 (654)

@27whuang I Don't Think So... Hold Up! I'll try to write a C++ arrow key tutorial. It'll Probably Take A Day Or Two.