This arena is forward fast with technology! People always deserve a new update gadget from times. Once children play in the field to make pleasure. Noy they depend on the home at PC for video games! They try to make a new thing always. 

Today in this post I will be showing you how to make an HTML5 Canvas Snake Game with 2 minutes in your desktop and how to play it!
HTML5 Canvas Snake Game

This is very simple tricks and source code I provided below to make the game. This game originally makes by Codepen.

Make HTML5 Snake Game

So, let's see the methods and follow them properly to make a snake game with HTHL5 Codes.

Rule 1: First you have to copy these codes are highlighted below and paste it in any text document specially Notepad or Notepad++.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Snake</title>
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=VT323");
::selection {color:#FFFFFF; background:transparent;}
::-moz-selection {color:#FFFFFF; background:transparent;}
*{
margin: 0;
padding: 0;
font-family: "VT323";
}
body{
background-color: #000000;
}
.wrap{
margin-left: auto;
margin-right: auto;
}
header{
width: 340px;
font-size: 0;
}
canvas{
display: none;
border-style: solid;
border-width: 10px;
border-color: #FFFFFF;
}
canvas:focus{
outline: none;
}
/* Top Styles */
h1{
display: inline-block;
width: 100px;
font-size: 32px;
color: #FFFFFF;
}
.score{
display: inline-block;
width: 240px;
font-size: 20px;
color: #FFFFFF;
text-align: right;
}
.score_value{
font-size: inherit;
}
/* All screens style */
#gameover a, #setting a, #menu a{
display: block;
}
#gameover a, #setting a:hover, #menu a:hover{
cursor: pointer;
}
#gameover a:hover::before, #setting a:hover::before, #menu a:hover::before{
content: ">";
margin-right: 10px;
}
/* Menu Screen Style */
#menu{
display: block;
width: 340px;
padding-top: 95px;
padding-bottom: 95px;
font-size: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFF;
}
#menu h2{
-webkit-animation: logo-ani 1000ms linear infinite;
animation: logo-ani 1000ms linear infinite;
margin-bottom: 30px;
}
#menu a{
font-size: 30px;
}
@-webkit-keyframes logo-ani{
50%{-webkit-transform: scale(1.3,1.3);}
100%{-webkit-transform: scale(1.0,1.0);}
}
@keyframes logo-ani{
50%{transform: scale(1.3,1.3);}
100%{transform: scale(1.0,1.0);}
}
/* Game Over Screen Style */
#gameover{
display: none;
width: 340px;
padding-top: 95px;
padding-bottom: 95px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 30px;
color: #FFF;
}
#gameover p{
margin-top: 25px;
font-size: 20px;
}
/* Settings Screen Style */
#setting{
display: none;
width: 340px;
margin-left: auto;
margin-right: auto;
padding-top: 85px;
padding-bottom: 85px;
font-size: 30px;
color: #FFF;
text-align: center;
}
#setting h2{
margin-bottom: 15px;
}
#setting p{
margin-top: 10px;
}
#setting input{
display:none;
}
#setting label{
cursor: pointer;
}
#setting input:checked + label{
background-color: #FFF;
color: #000;
}
</style>
<body data-rsssl=1>
<header class="wrap">
<h1>Snake</h1>
<p class="score">Score: <span id="score_value">0</span></p>
</header>
<canvas class="wrap" id="snake" width="320" height="320" tabindex="1"></canvas>
<!-- Game Over Screen -->
<div id="gameover">
<h2>Game Over</h2>
<p>press <span style="background-color: #FFFFFF; color: #000000">space</span> to begin a</p>
<a id="newgame_gameover">new game</a>
<a id="setting_gameover">settings</a>
</div>
<!-- Setting screen -->
<div id="setting">
<h2>Settings</h2>
<a id="newgame_setting">new game</a>
<p>Speed:
<input id="speed1" type="radio" name="speed" value="120" checked/>
<label for="speed1">Slow</label>
<input id="speed2" type="radio" name="speed" value="75"/>
<label for="speed2">Normal</label>
<input id="speed3" type="radio" name="speed" value="35"/>
<label for="speed3">Fast</label>
</p>
<p>Wall:
<input id="wallon" type="radio" name="wall" value="1" checked/>
<label for="wallon">On</label>
<input id="walloff" type="radio" name="wall" value="0"/>
<label for="walloff">Off</label>
</p>
</div>
<!-- Main Menu Screen -->
<div id="menu">
<h2>Snake</h2>
<a id="newgame_menu">new game</a>
<a id="setting_menu">settings</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
(function(){ 
/////////////////////////////////////////////////////////////
// Canvas & Context
var canvas;
var ctx;
// Snake
var snake;
var snake_dir;
var snake_next_dir;
var snake_speed;
// Food
var food = {x: 0, y: 0};
// Score
var score;
// Wall
var wall;
// HTML Elements
var screen_snake;
var screen_menu;
var screen_setting;
var screen_gameover;
var button_newgame_menu;
var button_newgame_setting;
var button_newgame_gameover;
var button_setting_menu;
var button_setting_gameover;
var ele_score;
var speed_setting;
var wall_setting;
/////////////////////////////////////////////////////////////
var activeDot = function(x, y){
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(x * 10, y * 10, 10, 10);
}
/////////////////////////////////////////////////////////////
var changeDir = function(key){
if(key == 38 && snake_dir != 2){
snake_next_dir = 0;
}else{
if (key == 39 && snake_dir != 3){
snake_next_dir = 1;
}else{
if (key == 40 && snake_dir != 0){
snake_next_dir = 2;
}else{
if(key == 37 && snake_dir != 1){
snake_next_dir = 3;
} } } }
}
/////////////////////////////////////////////////////////////
var addFood = function(){
food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));
food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));
for(var i = 0; i < snake.length; i++){
if(checkBlock(food.x, food.y, snake[i].x, snake[i].y)){
addFood();
}
}
}
/////////////////////////////////////////////////////////////
var checkBlock = function(x, y, _x, _y){
return (x == _x && y == _y) ? true : false;
}
/////////////////////////////////////////////////////////////
var altScore = function(score_val){
ele_score.innerHTML = String(score_val);
}
/////////////////////////////////////////////////////////////
var mainLoop = function(){
var _x = snake[0].x;
var _y = snake[0].y;
snake_dir = snake_next_dir;
// 0 - Up, 1 - Right, 2 - Down, 3 - Left
switch(snake_dir){
case 0: _y--; break;
case 1: _x++; break;
case 2: _y++; break;
case 3: _x--; break;
}
snake.pop();
snake.unshift({x: _x, y: _y});
// --------------------
// Wall
if(wall == 1){
// On
if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10){
showScreen(3);
return;
}
}else{
// Off
for(var i = 0, x = snake.length; i < x; i++){
if(snake[i].x < 0){
snake[i].x = snake[i].x + (canvas.width / 10);
}
if(snake[i].x == canvas.width / 10){
snake[i].x = snake[i].x - (canvas.width / 10);
}
if(snake[i].y < 0){
snake[i].y = snake[i].y + (canvas.height / 10);
}
if(snake[i].y == canvas.height / 10){
snake[i].y = snake[i].y - (canvas.height / 10);
}
}
}
// --------------------
// Autophagy death
for(var i = 1; i < snake.length; i++){
if (snake[0].x == snake[i].x && snake[0].y == snake[i].y){
showScreen(3);
return;
}
}
// --------------------
// Eat Food
if(checkBlock(snake[0].x, snake[0].y, food.x, food.y)){
snake[snake.length] = {x: snake[0].x, y: snake[0].y};
score += 1;
altScore(score);
addFood();
activeDot(food.x, food.y);
}
// --------------------
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// --------------------
for(var i = 0; i < snake.length; i++){
activeDot(snake[i].x, snake[i].y);
}
// --------------------
activeDot(food.x, food.y);
// Debug
//document.getElementById("debug").innerHTML = snake_dir + " " + snake_next_dir + " " + snake[0].x + " " + snake[0].y;   
setTimeout(mainLoop, snake_speed);
}
/////////////////////////////////////////////////////////////
var newGame = function(){
showScreen(0);
screen_snake.focus();
snake = [];
for(var i = 4; i >= 0; i--){
snake.push({x: i, y: 15});
}
snake_next_dir = 1;
score = 0;
altScore(score);
addFood();
canvas.onkeydown = function(evt) {
evt = evt || window.event;
changeDir(evt.keyCode);
}
mainLoop();
}
/////////////////////////////////////////////////////////////
// Change the snake speed...
// 150 = slow
// 100 = normal
// 50 = fast
var setSnakeSpeed = function(speed_value){
snake_speed = speed_value;
}
/////////////////////////////////////////////////////////////
var setWall = function(wall_value){
wall = wall_value;
if(wall == 0){screen_snake.style.borderColor = "#606060";}
if(wall == 1){screen_snake.style.borderColor = "#FFFFFF";}
}
/////////////////////////////////////////////////////////////
// 0 for the game
// 1 for the main menu
// 2 for the settings screen
// 3 for the game over screen
var showScreen = function(screen_opt){
switch(screen_opt){
case 0:  screen_snake.style.display = "block";
screen_menu.style.display = "none";
screen_setting.style.display = "none";
screen_gameover.style.display = "none";
break;
case 1:  screen_snake.style.display = "none";
screen_menu.style.display = "block";
screen_setting.style.display = "none";
screen_gameover.style.display = "none";
break;
case 2:  screen_snake.style.display = "none";
screen_menu.style.display = "none";
screen_setting.style.display = "block";
screen_gameover.style.display = "none";
break;
case 3: screen_snake.style.display = "none";
screen_menu.style.display = "none";
screen_setting.style.display = "none";
screen_gameover.style.display = "block";
break;
}
}
/////////////////////////////////////////////////////////////
window.onload = function(){
canvas = document.getElementById("snake");
ctx = canvas.getContext("2d");
// Screens
screen_snake = document.getElementById("snake");
screen_menu = document.getElementById("menu");
screen_gameover = document.getElementById("gameover");
screen_setting = document.getElementById("setting");
// Buttons
button_newgame_menu = document.getElementById("newgame_menu");
button_newgame_setting = document.getElementById("newgame_setting");
button_newgame_gameover = document.getElementById("newgame_gameover");
button_setting_menu = document.getElementById("setting_menu");
button_setting_gameover = document.getElementById("setting_gameover");
// etc
ele_score = document.getElementById("score_value");
speed_setting = document.getElementsByName("speed");
wall_setting = document.getElementsByName("wall");
// --------------------
button_newgame_menu.onclick = function(){newGame();};
button_newgame_gameover.onclick = function(){newGame();};
button_newgame_setting.onclick = function(){newGame();};
button_setting_menu.onclick = function(){showScreen(2);};
button_setting_gameover.onclick = function(){showScreen(2)};
setSnakeSpeed(150);
setWall(1);
showScreen("menu");
// --------------------
// Settings
// speed
for(var i = 0; i < speed_setting.length; i++){
speed_setting[i].addEventListener("click", function(){
for(var i = 0; i < speed_setting.length; i++){
if(speed_setting[i].checked){
setSnakeSpeed(speed_setting[i].value);
}
}
});
}
// wall
for(var i = 0; i < wall_setting.length; i++){
wall_setting[i].addEventListener("click", function(){
for(var i = 0; i < wall_setting.length; i++){
if(wall_setting[i].checked){
setWall(wall_setting[i].value);
}
}
});
}
document.onkeydown = function(evt){
if(screen_gameover.style.display == "block"){
evt = evt || window.event;
if(evt.keyCode == 32){
newGame();
}
}
}
}
})();
</script>
</body>
Rules 2: After doing this process you just now save it in you desktop with the name of SnakeGame.html

Now double click on the Snake Game icon to pay the games. Finally, you are done to make HTML5 Canvas Snake Game and enjoy the game.