<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";
}
This Pen doesn't use any external CSS resources.