How to make a Snake Game using JavaScript and html5

I compiled stapes to create a game similar to Nokia developed, popular game called 'snake'

Snake was first developed by Nokia, programmed in 1997 by Taneli Armanto and published on Nokia mobile devices,  It was introduced on Nokia model 6110, 3310 from 2000 and later the game was rebranded as "Snake Xenzia" Included on later mobile phone models

I made a version that is more simplified and more beginners friendly, It's based on the same idea of making a snake that grows as it eats stuff and the score increases as it grows

I'm implementing this whole game in pure vanilla JavaScript and a taste of html5 canvas, In this project the canvas is used as a renderer for the game's visual output

concepts and initial ideas

I got the idea while doing another retro gaming project, i thought it would be good too if i created this game, from start my plan had been simplicity and making this game easy to implement,

So to simplify everything i had a great deal of planning prior getting started to write any code at all,

I ended up making everything circular so that collision detection is a matter of adding the radii of colliding objects and comparing it to the distance of the same colliding objects

Objects and game characters

The game has two objects

First object

An apple is an edible entity named 'apple' it's update loop has a statement responsible for inducing blinking by randomly tangling the boolean responsible for enabling it to draw its own body

Second object

A snake is an entity capable of keeping track of it's trail, upon collision with the first object 'Apple' the snake increases it's trail gradually as a way to accommodate growth, upon receiving the input event the snake changes it's velocity factor gradually changing it's direction, In the snake's update block there's a piece of code responsible for displacing the snake's {x, y} coordinates by it's velocity factor to archive movement 'locomotion', the snake also folds it's position upon moving out of the game world boundaries

Game world space

Game world is a responsive, monochrome 2d space stretching across the viewport's width and height, completely covering it, Game function is responsible for clearing the screen and updating all constituent entites residing in it's array of entities.

I open sourced this project on Github in a public repository, contributors are welcome as long as the contribution does not change the main idea of the game

The original source code is embedded in a gist below;

Insightful references;
Full source code
Github swashvirus/snake/ repository,

Wikipedia Snake Game reference

Snake (Video game general) —— Wikipedia