PK ENV snake-game/README.mdUT sc# Snake Game
A Pen created on CodePen.io. Original URL: [https://codepen.io/Tirjasdyn/pen/YMdEpO](https://codepen.io/Tirjasdyn/pen/YMdEpO).
HTML5 and JavaScript Snake Game. PKikG PK ENV snake-game/LICENSE.txtUT scThe MIT License (MIT)
Copyright (c) 2023 Michelle Norton (https://codepen.io/Tirjasdyn/pen/YMdEpO)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.PKc c PK ENV snake-game/src/index.htmlUT sc
Your Final Score:
PKg$) PK ENV snake-game/src/style.cssUT scbody {
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;
}PKӥ] ] PK ENV snake-game/src/script.jsUT sc$(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";
}PK/jV V PK ENV snake-game/dist/index.htmlUT sc
CodePen - Snake Game
Your Final Score:
PKOo.U U PK ENV snake-game/dist/style.cssUT scbody {
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;
}PKӥ] ] PK ENV snake-game/dist/script.jsUT sc$(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";
}PK/jV V PK ENVikG snake-game/README.mdUT scPK ENVc c snake-game/LICENSE.txtUT scPK ENVg$) snake-game/src/index.htmlUT scPK ENVӥ] ] snake-game/src/style.cssUT scPK ENV/jV V snake-game/src/script.jsUT scPK ENVOo.U U 4 snake-game/dist/index.htmlUT scPK ENVӥ] ] snake-game/dist/style.cssUT scPK ENV/jV V ! snake-game/dist/script.jsUT scPK w -.