Snake Game
First Skills
Purpose:
The goal was to create a snake game without referencing other existing concepts. As a first project in JS, it showcases my decision-making at an early stage and demonstrates my eagerness to learn.
- When I was first introduced to JavaScript, I was told a snake game is a great first exercise.
- I decided to build as much as possible from scratch.
- I found the starting point to begin with is drawing objects with HTML Canvas
Drawing a grid on a canvas():
To create a snake game, the basis for the game exists in a 2D plane. I needed a way to draw this grid so that I could place objects within the grid. The canvas element is a square, 600x600 pixels. I initialize the size of the cells in the grid to be the quotient of the canvas size and the given number of cells per side desired. Taking in the parameter x allows this. The grid lines are drawn using a simple for loop, where the object ctx is a CanvasRenderingContext2D object and acts like a cursor to draw in 2D. In the loop, a line is drawn from bottom to top, then left to right, placing the cellSize width between them.