Search⌘ K
AI Features
Home
Courses
Building Web-Based Games and Utility Projects Using JavaScript

Move Snake Using Keyboard Input

Explore how to implement keyboard input controls in your JavaScript snake game project. Learn to use event listeners and keydown handlers to move the snake smoothly in all directions while managing game boundaries.

We'll cover the following...

Introduction

To recap, in the previous lesson, we could move the snake in the right-hand direction horizontally. Now we will move to the next step and make the game more realistic by adding the functionality to move the snake based on the keyboard input.

Implement: Move the snake with keyboard arrows

To move the snake based on the input provided from the keyboard, we need to follow the steps mentioned below:

  1. Add an event listener to the document object. The event will listen to the keydown event. This event will trigger a callback function each time a key is pressed.

  2. Handle the snake's direction based on the keyboard input.

First let's write a function to handle the keydown event.

Node.js
//Add an Event Listener on the Document Object
function directionHandler(e){
  // If left arrow is pressed, then set the direction to be left
  if(e.key=="ArrowLeft")
    snake.direction = "left";
  // If down arrow is pressed, then set the direction to be down
  else if(e.key=="ArrowDown")
    snake.direction = "down";
  // If up arrow is pressed, then set the direction to be up
	else if(e.key=="ArrowUp")
    snake.direction = "up";
  // If any other key is pressed, then set the direction to be right
  else
			snake.direction = "right";
	}

Explanation:

    ...