How to Create a Snake Game | HTML, CSS, JavaScript Tutorial

Published on Apr 25, 2024

Today we are creating a simple Snake game using HTML, CSS, and JavaScript. In this video, we’ll guide you through the process step by step, so you can create your own version of this classic game.

Let’s start by taking a look at the HTML code. Here, we have the basic structure of our webpage. We’ve set the language to English and defined the character encoding. The viewport meta tag ensures that the webpage scales properly on different devices.

Inside the head section, we have the title tag where we’ve named our game Snake Game.

Voiceover: We link to an external CSS file called style dot css. This is where we’ll define the styles for our game elements.

Moving on to the body section, we have a container div with the class container.

Inside this container, we have another div with the id game container. This is where our game will be displayed.

Inside the game container, we have a canvas element with the id game Canvas. This is where we’ll draw the game graphics.

Below the canvas, we have a div with the id score Display. This is where we’ll display the player’s score during the game.

And finally, we have a button with the id start Button. This button will allow the player to start the game.

Now, let’s take a look at the JavaScript code. This is where we’ll add the functionality to our game.

We include an external Java Script file called script dot j s which contains all the game logic.

In this section, we’ll go through the CSS code line by line to understand how each style contributes to the overall look of our game.

We begin by styling the body element. We remove any default margins and padding to ensure our layout starts from the edge of the viewport.

We then use Flex box to centre our game vertically and horizontally within the viewport. This makes sure that our game is always nicely centred regardless of the screen size.

Additionally, we set a background colour to give our game a pleasant blueish green backdrop.

Moving on to the game container, we set its position to relative. This will allow us to position other elements inside it using absolute positioning.

Inside the game container, we have another div with the class container. Here, we define styles for the container that holds our game elements. We give it a white background, some padding, and rounded corners to make it visually appealing.

Now, let’s focus on the game canvas. We add a border and rounded corners to give it a neat frame.

Next, we style the score display. We position it absolutely at the top right corner of the game container and set the font size to twenty pixels.

Finally, we style the start button. We position it absolutely at the centre of the game container using the transform property. We give it some padding, a background colour matching our theme, and some additional styles to make it visually appealing.

In this section, we’ll go through the Java Script code line by line to understand how each function and variable contributes to the functionality of our game.

We start by defining some essential variables and constants. The canvas and its context are obtained using the getElementById method. We also get references to the start button and score display elements.

We then set up our canvas by defining the size and dimensions based on the grid size and tile count. This ensures our game fits nicely within the canvas area.

Voiceover: Next, we initialise variables to track the snake’s position, the apple’s position, the velocity of the snake, the score, and the game state.

We have functions to draw individual parts of the snake and the apple onto the canvas. These functions use the fillRect method to draw rectangles at specified positions.

The draw Game function clears the canvas, then calls the draw Snake, draw Apple, and draw Score functions to update the game’s visuals.

The moveSnake function updates the snake’s position based on its velocity. If the snake eats the apple, the score increases, and a new apple is generated.

The check Collision function determines if the snake has collided with the walls or itself. If a collision is detected, the game is over.

The game Loop function is the heart of our game. It continuously updates the game state, checks for collisions, and redraws the game on the canvas.

The start Game and stop Game functions control the game’s start and stop states, respectively. They also handle displaying and hiding elements like the start button and score display.

Finally, we have event listeners for keyboard input and the start button. These allow the player to control the snake and start or restart the game.

And that’s it for the JavaScript code  In the next part of our tutorial, we’ll showcase the complete Snake game in action. Stay tuned