supergoat/snake.html

## snake.html
<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>

    <script>
      /** CONSTANTS **/
      const CANVAS_BORDER_COLOUR = 'black';
      const CANVAS_BACKGROUND_COLOUR = "white";
      const SNAKE_COLOUR = 'lightgreen';
      const SNAKE_BORDER_COLOUR = 'darkgreen';

      let snake = [
        {x: 150, y: 150},
        {x: 140, y: 150},
        {x: 130, y: 150},
        {x: 120, y: 150},
        {x: 110, y: 150}
      ]

      // Horizontal velocity
      let dx = 10;
      // Vertical velocity
      let dy = 0;


      // Get the canvas element
      var gameCanvas = document.getElementById("gameCanvas");

      // Return a two dimensional drawing context
      var ctx = gameCanvas.getContext("2d");

      //  Select the colour to fill the canvas
      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
      //  Select the colour for the border of the canvas
      ctx.strokestyle = CANVAS_BORDER_COLOUR;

      // Draw a "filled" rectangle to cover the entire canvas
      ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Draw a "border" around the entire canvas
      ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);


      // Move on step to the right
      advanceSnake()
      // Change vertical velocity to 0
      dx = 0;
      // Change horizontal velocity to 10
      dy = -10;
      // Move one step up
      advanceSnake();
      // Draw snake on the canvas
      drawSnake();

      /**
       * Advances the snake by changing the x-coordinates of its parts
       * according to the horizontal velocity and the y-coordinates of its parts
       * according to the vertical veolocity
       */
      function advanceSnake() {
        const head = {x: snake[0].x + dx, y: snake[0].y + dy};
        snake.unshift(head);
        snake.pop();
      }

      /**
       * Draws the snake on the canvas
       */
      function drawSnake() {
        // loop through the snake parts drawing each part on the canvas
        snake.forEach(drawSnakePart)
      }

      /**
       * Draws a part of the snake on the canvas
       * @param { object } snakePart - The coordinates where the part should be drawn
       */
      function drawSnakePart(snakePart) {
        // Set the colour of the snake part
        ctx.fillStyle = SNAKE_COLOUR;

        // Set the border colour of the snake part
        ctx.strokestyle = SNAKE_BORDER_COLOUR;

        // Draw a "filled" rectangle to represent the snake part at the coordinates
        // the part is located
        ctx.fillRect(snakePart.x, snakePart.y, 10, 10);

        // Draw a border around the snake part
        ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Snake Game</title>
	</head>
	<body>
	<canvas id="gameCanvas" width="300" height="300"></canvas>

	<script>
	/ CONSTANTS /
	const CANVAS_BORDER_COLOUR = 'black';
	const CANVAS_BACKGROUND_COLOUR = "white";
	const SNAKE_COLOUR = 'lightgreen';
	const SNAKE_BORDER_COLOUR = 'darkgreen';

	let snake = [
	{x: 150, y: 150},
	{x: 140, y: 150},
	{x: 130, y: 150},
	{x: 120, y: 150},
	{x: 110, y: 150}
	]

	// Horizontal velocity
	let dx = 10;
	// Vertical velocity
	let dy = 0;


	// Get the canvas element
	var gameCanvas = document.getElementById("gameCanvas");

	// Return a two dimensional drawing context
	var ctx = gameCanvas.getContext("2d");

	// Select the colour to fill the canvas
	ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
	// Select the colour for the border of the canvas
	ctx.strokestyle = CANVAS_BORDER_COLOUR;

	// Draw a "filled" rectangle to cover the entire canvas
	ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
	// Draw a "border" around the entire canvas
	ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);


	// Move on step to the right
	advanceSnake()
	// Change vertical velocity to 0
	dx = 0;
	// Change horizontal velocity to 10
	dy = -10;
	// Move one step up
	advanceSnake();
	// Draw snake on the canvas
	drawSnake();

	/**
	* Advances the snake by changing the x-coordinates of its parts
	* according to the horizontal velocity and the y-coordinates of its parts
	* according to the vertical veolocity
	*/
	function advanceSnake() {
	const head = {x: snake[0].x + dx, y: snake[0].y + dy};
	snake.unshift(head);
	snake.pop();
	}

	/**
	* Draws the snake on the canvas
	*/
	function drawSnake() {
	// loop through the snake parts drawing each part on the canvas
	snake.forEach(drawSnakePart)
	}

	/**
	* Draws a part of the snake on the canvas
	* @param { object } snakePart - The coordinates where the part should be drawn
	*/
	function drawSnakePart(snakePart) {
	// Set the colour of the snake part
	ctx.fillStyle = SNAKE_COLOUR;

	// Set the border colour of the snake part
	ctx.strokestyle = SNAKE_BORDER_COLOUR;

	// Draw a "filled" rectangle to represent the snake part at the coordinates
	// the part is located
	ctx.fillRect(snakePart.x, snakePart.y, 10, 10);

	// Draw a border around the snake part
	ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
	}
	</script>
	</body>
	</html>