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

Add Movement to the Snake

Explore how to implement horizontal movement for the snake in a JavaScript-based Snake game. You will learn to manipulate the snake's position using array operations and update the game loop for continuous rightward motion, setting the foundation for further game controls.

We'll cover the following...

Introduction

In the previous lesson, we created the snake and the board for our game. However, a stationary snake is of no use. Let us now move to the next step in building the game. We will add a movement to the snake. When the game loads, we would by default set the snake to move horizontally to the right on the screen. Later on, we will add keyboard movements to the game. You can see in the below output that the snake moves in the right-hand direction.

Implement: Add the snake's movement to the right

The snake, which was drawn while initializing the game, had 2 blocks. We must pop the last coordinates inserted in the cells array to move the snake in the right-hand direction. Then we need to add the co-ordinates in the cells array by incrementing the x-coordinate by 1 while making no change in the y-coordinate.

We will write a function to update the snake by one cell to the right. To implement this functionality, we will follow the steps mentioned below:

  1. Remove the last inserted coordinate from the cells array, which will point to the leftmost block of the snake.

  2. Store the coordinates of the rightmost block of the snake.

  3. Increment the x value of the rightmost coordinate by 1 while making no change in the y value (because we are moving the snake horizontally to the right).

  4. Add the new coordinates in the cells array to draw a block of the snake with these new coordinates.

Now let's write a function to move the snake to the right.

Node.js
// Update the snake by moving it horizontally to the right
updateSnake: function() {
	
	// Remove the last coordinates from the cells array (pointing to the leftmost block)
	this.cells.pop();
	// Store the coordinates of the righmost block of the snake 
	let rightX = this.cells[0].x;
	let rightY = this.cells[0].y;
	// Increment the x-value and no change in y-value (for movement horizontally to the right)
	let newX = rightX + 1;
	let newY = rightY;
	// Add the new coordinates to the cells array
	this.cells.unshift({x: newX, y: newY});
}

Explanation:

  • In line 5, we call the pop() method on the cells array to remove the leftmost coordinate from the array. Remember, we initialized the cells array starting from the rightmost coordinate. Hence, the last coordinate inserted into the array would point to the leftmost block of the snake.

  • In lines 8–9, we store the rightmost coordinate of the snake, because we need to add a block after the current rightmost block of the snake.

  • In lines 12–13, we create the coordinates of the new block.

  • Finally, in line 16, we call the unshift() method to insert the new coordinates of the block into the cells array. Note that the insertion will be done at the start of the array. It means that the snake's rightmost coordinate is now the first pair in the cells array.

Now let's merge the above function with our main JavaScript code. While doing so, we would also need to write an update() function (a part of the game loop step) and call the update() function from the gameloop() function.

<html>
	<head>
		<title>Snake Game</title>
	</head>
	<style>
		#snake-game{
 		   background-image: url("./snake_game_background.jpg");
    		border:10px solid green;
		}
	</style>
	<body>
		<canvas id="snake-game"> </canvas>
	</body>
	<script src="./game_logic.js"></script>
</html>
Add movement to the snake

Explanation:

  • We make the following changes in the game_logic.js from the previous lesson's code:

    • Lines 35–51: We add the updateSnake() function, which will move the snake in the right-hand direction horizontally.

    • Line 61: We call the clearRect() method to clear all the rectangles (blocks of the snake) from the canvas since we will update the snake in every loop.

    • Lines 66–68: We create an update() function, which calls the updateSnake() function.

    • Line 73: We call the update() function, the last step in the game loop.

  • Click on the "Run" button and open the app URL to view the snake in the browser tab.