Add Food for the Snake

// The first step in the game loop
function init(){
	canvas = document.getElementById('snake-game');
	H = canvas.height = 500;
	W = canvas.width = 1000;
	pen = canvas.getContext('2d');
	blockSize = 66;
	game_over = false;
	
	score = 2; // to keep track of the score of the user
	
	//Create an Image object for food
	food_img = new Image();
	food_img.src = "./snake_food.png";

	food = generateFoodCoordinates();

	snake = {
		length: 2, // number of rectangles making up the snake
		color: "blue", // the color of the snake
		cells: [], // the positions of each of the rectangle
		direction: "right", // the direction in which the rectangle moves

		// Create the snake by initializing the coordinates
		createSnake: function() {

			for(let i = this.length ; i > 0; i--)
				// Add the (x, 0) coordinates to the cells array
				this.cells.push({x: i, y: 0});
		
		},

		  // Draw the snake on the HTML canvas
		drawSnake: function() {
			for(let i = 0; i < this.cells.length; i++){
				// Set the color of the snake
				pen.fillStyle = this.color;

				// Draw rectangle by a margin of 3 so that each rectangle is separated from its adjacent
				pen.fillRect(this.cells[i].x * blockSize, this.cells[i].y * blockSize, blockSize - 3, blockSize - 3);
			}
		},

		// Update the snake by moving it horizontally to the right
		updateSnake: function() {

			// Store the coordinates of the righmost block of the snake 
			var rightX = this.cells[0].x;
			var rightY = this.cells[0].y;

			// If the snake reaches the food coordinate
			if(rightX == food.x && rightY == food.y){
				food = generateFoodCoordinates();
				score++;
			}
			else{
				// Remove the last coordinates from the cells array (pointing to the leftmost block)
				this.cells.pop();
			}

			var newX,newY;

			// Update the new coordinates if the direction if left
			if(this.direction == "left"){
				newX = rightX - 1;
				newY = rightY;
			}

			// Update the new coordinates if the direction if down
			else if(this.direction == "down"){
				newX = rightX;
				newY = rightY + 1;
			}

			// Update the new coordinates if the direction if up
			else if(this.direction == "up"){
				newX = rightX;
				newY = rightY - 1;
			}

			// Update the new coordinates if the direction if right
			else{
				newX = rightX + 1;
				newY = rightY;
			}

			// Add the new coordinates to the cells array
			this.cells.unshift({x: newX, y: newY});

			var last_x = Math.round(W/blockSize);
			var last_y = Math.round(H/blockSize);

			if(this.cells[0].y<0 || this.cells[0].x < 0 || this.cells[0].x > last_x || this.cells[0].y > last_y){
				game_over = true;
			}	
		}
    }

	// Create the Snake
	snake.createSnake();


	//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";
	}

	document.addEventListener('keydown', directionHandler) ;

}

// The draw function for the game loop
function draw(){
	pen.clearRect(0,0,W,H); // Clear the canvas so that previous blocks of snake are erased
	snake.drawSnake();

	// Draw the food image on the canvas
	pen.fillStyle = food.color;
	pen.drawImage(food_img,food.x * blockSize, food.y * blockSize, blockSize, blockSize);

	// Display the current score to the user
	paragraph = document.getElementById("game_status");
	paragraph.innerText = `Score: ${score}`;
}

// The update function for the game loop
function update(){
	snake.updateSnake(); 
}

// The game loop function
function gameloop(){
	if(game_over==true){
		clearInterval(f);
		paragraph = document.getElementById("game_status");
		paragraph.innerText = `Game Over! Your score is: ${score}`;
		return;
	}
	draw();
	update();
}

// Function to generate the coordinates of the food object randomly
function generateFoodCoordinates(){

  // Generate the x and y coordinates randomly while ensuring the range to be withing
  // the canvas width and height 
	var foodXCoordinate = Math.round(Math.random()*(W - blockSize) / blockSize);
	var foodYCoordinate = Math.round(Math.random()*(H - blockSize) / blockSize);

  // Create the food object
	var food = {
		x: foodXCoordinate,
		y: foodYCoordinate,
		color:"red",
	}

  // Return the food object
	return food
}

// Call the init() method to initialize the game
init();

// Execute the game loop at an interval of 100 milliseconds
var f = setInterval(gameloop, 200);