<body>
<div class="container">
	<div id="overlay">
		Your Final Score: <span id="final_score"></span>
		<br />
		<button onclick="window.location.reload(true)">Click To Play Again</button>
	</div>
	<canvas id="canvas" width="600px" height="450px">Your browser doesn't support canvas</canvas>
	<div id="stats">
		<div id="score" class="score"></div>
		<div id="hi_score" class="score"></div>
		<button onclick="resetScore()" id="reset_score">Reset High Score</button>
	</div>
</div>
</body>
body {
	background: #000000 url(https://images.unsplash.com/photo-1539389004540-770367e1bccb?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) no-repeat top left;
	font-family: arial;
}

button {
	color:#FFFFFF;
	text-decoration: none;
	background: #666666;
}

.container {
	margin: 30px auto 0 auto;
	width:600px;
	position:relative;
	oveflow:auto;
}

canvas {
	background: #000000;
	border: 5px solid #cccccc;
}

#stats{
	width:590px;
	background: #333333;
	padding: 5px;
	font-size: 20px;
	color: #FFFFFF;
	overflow: auto;
	margin-bottom:5px;
}

.score{
	width: 25%;
	height: 50px;
	padding-top: 20px;
	float:left;
	margin-right:5px;
	overflow: auto;
	background: #000000;
	text-align:center;
}

#reset_score {
	padding: 10px;
	float: right;
}

#overlay {
	display:none;
	color:#ffffff;
	font-size:25px;
	text-align:center;
	position:absolute;
	top:170px;
	left:180px;
	}

#overlay button {
	display: block;
	margin-top: 10px;
	padding: 10px;
	background: #666666;
	text-align:center;
}

#overlay button:hover {
	display: block;
	margin-top: 10px;
	padding: 10px;
	background: #333333;
}
$(document).ready(function() {
//Define Vars
  var canvas = $('#canvas')[0];
	var ctx = canvas.getContext("2d");
  var w = $("#canvas").width();
	var h = $("#canvas").height();
	var cw = 15;
	var d = "right";
	var food;
	var score;
	var color = "#587cb7";
	var speed = 130;
	
	//Snake Array
	var snake_array;
	
	//Initializer
	function init() {
		d = "right";
		create_snake();
		create_food();
		score = 0;

    //Use a timer to call paint function
		if (typeof game_loop != "undefined") clearInterval(game_loop);
		game_loop = setInterval(paint, speed);
	}
	
	init();
	
	//Create Snake
	function create_snake(){
		var length = 5;
		snake_array = [];
		for(var i = length-1;i >= 0;i--){
			snake_array.push({x: i,y:0});
		}
	}
	
	//Create Food
	function create_food() {
		food = {
			x: Math.round(Math.random()*(w-cw)/cw),
			y: Math.round(Math.random()*(h-cw)/cw),
		};
	}
	
	//Paint this snake
	function paint() {
		ctx.fillStyle = "black";
		ctx.fillRect(0,0,w,h);
		ctx.strokeStyle = "white";
		ctx.strokeRect(0,0,w,h);
		
		var nx = snake_array[0].x;
		var ny = snake_array[0].y;
		
		if(d == 'right') nx++;
		else if(d == 'left') nx--;
		else if (d == 'up') ny--;
		else if (d == 'down') ny++;
		
		//collide
		if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array)) {
			//init();
			//Insert Score
			$('#final_score').html(score);
			$('#overlay').fadeIn(300);
			return;
		}
		
		if (nx == food.x && ny == food.y) {
			var tail = {x: nx, y: ny};
			score++;
			//create food
			create_food();
		} else {
			var tail = snake_array.pop();
			tail.x = nx; tail.y = ny;
		}
		
		snake_array.unshift(tail);

    function paint_cell(x,y) {
  		ctx.fillStyle=color;
  		ctx.fillRect(x*cw,y*cw,cw,cw);
  		ctx.strokeStyle="#c19bdb";
  		ctx.strokeRect(x*cw,y*cw,cw,cw);
  	}
		
		function paint_cell_food(x,y) {
  		ctx.fillStyle="#894e6f";
  		ctx.fillRect(x*cw,y*cw,cw,cw);
  		ctx.strokeStyle="#c19bdb";
  		ctx.strokeRect(x*cw,y*cw,cw,cw);
  	}
    
		for(var i = 0;i < snake_array.length;i++) {
			var c = snake_array[i];
			paint_cell(c.x,c.y);
		}
		
		paint_cell_food(food.x,food.y);
		
		//Check Score
		checkscore(score);
		
		$('#score').html('Your Score: ' + score);
	}
	

	
	function check_collision(x,y,array) {
		for(var i = 0;i < array.length;i++) {
			if(array[i.x == x && array[i].y == y])
				return true;
		}		
		return false;
	}
	
	function checkscore(score){
			
		if(localStorage.getItem('highscore') === null) {
			//no high score
					localStorage.setItem('highscore',score); 
			 } else {
				 if(score > localStorage.getItem('highscore')) {
					 localStorage.setItem('highscore',score)
				 }
			 }
		$('#hi_score').html('High Score: '+localStorage.highscore)
	}
	
	//Keyboard Controller
	$(document).keydown(function(e) {
		var key = e.which;
		if(key == 37 && d != "right") d = "left";
		else if(key == 38 && d != "down") d = "up";
		else if(key == 39 && d != "left") d = "right";
		else if(key == 40 && d != "up") d = "down";
	});
});

function resetScore() {
	localStorage.highscore = 0;
	highscorediv = document.getElementById('hi_score');
	highscorediv.innerHTML = "High Score: 0";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js