supergoat/snake.html

## snake.html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">

  </head>

  <body>

    <div id="score">0</div>
    <canvas id="gameCanvas" width="300" height="300"></canvas>

    <style>
      #gameCanvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      #score {
        text-align: center;
        font-size: 140px;
        font-family: 'Antic Slab', serif;
      }
    </style>
  </body>

  <script>
    const GAME_SPEED = 100;
    const CANVAS_BORDER_COLOUR = 'black';
    const CANVAS_BACKGROUND_COLOUR = "white";
    const SNAKE_COLOUR = 'lightgreen';
    const SNAKE_BORDER_COLOUR = 'darkgreen';
    const FOOD_COLOUR = 'red';
    const FOOD_BORDER_COLOUR = 'darkred';

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

    // The user's score
    let score = 0;
    // When set to true the snake is changing direction
    let changingDirection = false;
    // Food x-coordinate
    let foodX;
    // Food y-coordinate
    let foodY;
    // Horizontal velocity
    let dx = 10;
    // Vertical velocity
    let dy = 0;

    // Get the canvas element
    const gameCanvas = document.getElementById("gameCanvas");
    // Return a two dimensional drawing context
    const ctx = gameCanvas.getContext("2d");

    // Start game
    main();
    // Create the first food location
    createFood();
    // Call changeDirection whenever a key is pressed
    document.addEventListener("keydown", changeDirection);


    /**
     * Main function of the game
     * called repeatedly to advance the game
     */
    function main() {
      // If the game ended return early to stop game
      if (didGameEnd()) return;

      setTimeout(function onTick() {
        changingDirection = false;
        clearCanvas();
        drawFood();
        advanceSnake();
        drawSnake();

        // Call game again
        main();
      }, GAME_SPEED)
    }

    /**
     * Change the background colour of the canvas to CANVAS_BACKGROUND_COLOUR and
     * draw a border around it
     */
    function clearCanvas() {
      //  Select the colour to fill the drawing
      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);
    }

    /**
     * Draw the food on the canvas
     */
    function drawFood() {
      ctx.fillStyle = FOOD_COLOUR;
      ctx.strokestyle = FOOD_BORDER_COLOUR;
      ctx.fillRect(foodX, foodY, 10, 10);
      ctx.strokeRect(foodX, foodY, 10, 10);
    }

    /**
     * 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() {
      // Create the new Snake's head
      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
      // Add the new head to the beginning of snake body
      snake.unshift(head);

      const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
      if (didEatFood) {
        // Increase score
        score += 10;
        // Display score on screen
        document.getElementById('score').innerHTML = score;

        // Generate new food location
        createFood();
      } else {
        // Remove the last part of snake body
        snake.pop();
      }
    }

    /**
     * Returns true if the head of the snake touched another part of the game
     * or any of the walls
     */
    function didGameEnd() {
      for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
      }

      const hitLeftWall = snake[0].x < 0;
      const hitRightWall = snake[0].x > gameCanvas.width - 10;
      const hitToptWall = snake[0].y < 0;
      const hitBottomWall = snake[0].y > gameCanvas.height - 10;

      return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
    }

    /**
     * Generates a random number that is a multiple of 10 given a minumum
     * and a maximum number
     * @param { number } min - The minimum number the random number can be
     * @param { number } max - The maximum number the random number can be
     */
    function randomTen(min, max) {
      return Math.round((Math.random() * (max-min) + min) / 10) * 10;
    }

    /**
     * Creates random set of coordinates for the snake food.
     */
    function createFood() {
      // Generate a random number the food x-coordinate
      foodX = randomTen(0, gameCanvas.width - 10);
      // Generate a random number for the food y-coordinate
      foodY = randomTen(0, gameCanvas.height - 10);

      // if the new food location is where the snake currently is, generate a new food location
      snake.forEach(function isFoodOnSnake(part) {
        const foodIsoNsnake = part.x == foodX && part.y == foodY;
        if (foodIsoNsnake) createFood();
      });
    }

    /**
     * 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);
    }

    /**
     * Changes the vertical and horizontal velocity of the snake according to the
     * key that was pressed.
     * The direction cannot be switched to the opposite direction, to prevent the snake
     * from reversing
     * For example if the the direction is 'right' it cannot become 'left'
     * @param { object } event - The keydown event
     */
    function changeDirection(event) {
      const LEFT_KEY = 37;
      const RIGHT_KEY = 39;
      const UP_KEY = 38;
      const DOWN_KEY = 40;

      /**
       * Prevent the snake from reversing
       * Example scenario:
       * Snake is moving to the right. User presses down and immediately left
       * and the snake immediately changes direction without taking a step down first
       */
      if (changingDirection) return;

      changingDirection = true;

      const keyPressed = event.keyCode;

      const goingUp = dy === -10;
      const goingDown = dy === 10;
      const goingRight = dx === 10;
      const goingLeft = dx === -10;

      if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
      }

      if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
      }

      if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
      }

      if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
      }
    }

  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Snake Game</title>
	<link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">

	</head>

	<body>

	<div id="score">0</div>
	<canvas id="gameCanvas" width="300" height="300"></canvas>

	<style>
	#gameCanvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	#score {
	text-align: center;
	font-size: 140px;
	font-family: 'Antic Slab', serif;
	}
	</style>
	</body>

	<script>
	const GAME_SPEED = 100;
	const CANVAS_BORDER_COLOUR = 'black';
	const CANVAS_BACKGROUND_COLOUR = "white";
	const SNAKE_COLOUR = 'lightgreen';
	const SNAKE_BORDER_COLOUR = 'darkgreen';
	const FOOD_COLOUR = 'red';
	const FOOD_BORDER_COLOUR = 'darkred';

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

	// The user's score
	let score = 0;
	// When set to true the snake is changing direction
	let changingDirection = false;
	// Food x-coordinate
	let foodX;
	// Food y-coordinate
	let foodY;
	// Horizontal velocity
	let dx = 10;
	// Vertical velocity
	let dy = 0;

	// Get the canvas element
	const gameCanvas = document.getElementById("gameCanvas");
	// Return a two dimensional drawing context
	const ctx = gameCanvas.getContext("2d");

	// Start game
	main();
	// Create the first food location
	createFood();
	// Call changeDirection whenever a key is pressed
	document.addEventListener("keydown", changeDirection);


	/**
	* Main function of the game
	* called repeatedly to advance the game
	*/
	function main() {
	// If the game ended return early to stop game
	if (didGameEnd()) return;

	setTimeout(function onTick() {
	changingDirection = false;
	clearCanvas();
	drawFood();
	advanceSnake();
	drawSnake();

	// Call game again
	main();
	}, GAME_SPEED)
	}

	/**
	* Change the background colour of the canvas to CANVAS_BACKGROUND_COLOUR and
	* draw a border around it
	*/
	function clearCanvas() {
	// Select the colour to fill the drawing
	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);
	}

	/**
	* Draw the food on the canvas
	*/
	function drawFood() {
	ctx.fillStyle = FOOD_COLOUR;
	ctx.strokestyle = FOOD_BORDER_COLOUR;
	ctx.fillRect(foodX, foodY, 10, 10);
	ctx.strokeRect(foodX, foodY, 10, 10);
	}

	/**
	* 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() {
	// Create the new Snake's head
	const head = {x: snake[0].x + dx, y: snake[0].y + dy};
	// Add the new head to the beginning of snake body
	snake.unshift(head);

	const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
	if (didEatFood) {
	// Increase score
	score += 10;
	// Display score on screen
	document.getElementById('score').innerHTML = score;

	// Generate new food location
	createFood();
	} else {
	// Remove the last part of snake body
	snake.pop();
	}
	}

	/**
	* Returns true if the head of the snake touched another part of the game
	* or any of the walls
	*/
	function didGameEnd() {
	for (let i = 4; i < snake.length; i++) {
	if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
	}

	const hitLeftWall = snake[0].x < 0;
	const hitRightWall = snake[0].x > gameCanvas.width - 10;
	const hitToptWall = snake[0].y < 0;
	const hitBottomWall = snake[0].y > gameCanvas.height - 10;

	return hitLeftWall \|\| hitRightWall \|\| hitToptWall \|\| hitBottomWall
	}

	/**
	* Generates a random number that is a multiple of 10 given a minumum
	* and a maximum number
	* @param { number } min - The minimum number the random number can be
	* @param { number } max - The maximum number the random number can be
	*/
	function randomTen(min, max) {
	return Math.round((Math.random() * (max-min) + min) / 10) * 10;
	}

	/**
	* Creates random set of coordinates for the snake food.
	*/
	function createFood() {
	// Generate a random number the food x-coordinate
	foodX = randomTen(0, gameCanvas.width - 10);
	// Generate a random number for the food y-coordinate
	foodY = randomTen(0, gameCanvas.height - 10);

	// if the new food location is where the snake currently is, generate a new food location
	snake.forEach(function isFoodOnSnake(part) {
	const foodIsoNsnake = part.x == foodX && part.y == foodY;
	if (foodIsoNsnake) createFood();
	});
	}

	/**
	* 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);
	}

	/**
	* Changes the vertical and horizontal velocity of the snake according to the
	* key that was pressed.
	* The direction cannot be switched to the opposite direction, to prevent the snake
	* from reversing
	* For example if the the direction is 'right' it cannot become 'left'
	* @param { object } event - The keydown event
	*/
	function changeDirection(event) {
	const LEFT_KEY = 37;
	const RIGHT_KEY = 39;
	const UP_KEY = 38;
	const DOWN_KEY = 40;

	/**
	* Prevent the snake from reversing
	* Example scenario:
	* Snake is moving to the right. User presses down and immediately left
	* and the snake immediately changes direction without taking a step down first
	*/
	if (changingDirection) return;

	changingDirection = true;

	const keyPressed = event.keyCode;

	const goingUp = dy === -10;
	const goingDown = dy === 10;
	const goingRight = dx === 10;
	const goingLeft = dx === -10;

	if (keyPressed === LEFT_KEY && !goingRight) {
	dx = -10;
	dy = 0;
	}

	if (keyPressed === UP_KEY && !goingDown) {
	dx = 0;
	dy = -10;
	}

	if (keyPressed === RIGHT_KEY && !goingLeft) {
	dx = 10;
	dy = 0;
	}

	if (keyPressed === DOWN_KEY && !goingUp) {
	dx = 0;
	dy = 10;
	}
	}

	</script>
	</html>