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.

  1. When I was first introduced to JavaScript, I was told a snake game is a great first exercise.
  2. I decided to build as much as possible from scratch.
  3. 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.