In the first part of this series, we will write all HTML and CSS and implement a few utility functions that we will often use in the game.
In the HTML file, we will have a header with text that shows current and best score of the player, and container to which will be attached canvas.
Besides HTML file, we will also have one file with code for the game and one file with styles that we are loading via link and script attributes.
We have nothing fancy in styles. To make content take the full height of the page — we are making the height of html and body equal to100%. Our goal is to make the game look cool on any screen size, to do so we will make text size in percents.
Most boring stuff is done and we won’t come back to the index.html and styles.css later in this series.
At the end of the series, we will fill each region and make an exciting snake game.
We start by creating a few utils that we will use in different parts of the game.
Below you can see examples of what they do.
The last function is checking if two float numbers are equal, by checking if their absolute difference is smaller than some super small number.
Reach the next level of focus and productivity with increaser.org.