JavaScript-Snake

6706bee2 · ninecents · cd22b8df · 6706bee2 · 6706bee2 · 6706bee2
25 changed file
--- a/JavaScript-Snake/LICENSE
+++ b/JavaScript-Snake/LICENSE
+Copyright © Patrick Gillespie, http://patorjk.com
+
+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.
\ No newline at end of file
--- a/JavaScript-Snake/README.md
+++ b/JavaScript-Snake/README.md
+# JavaScript Snake Game
+
+This is a DOM-based game of Snake that I wrote in JavaScript over a decade ago. It was made to have sort of a nostalgic feel to it.
+
+## Play and Edit the Game Online!
+
+You can now play and edit the game live in codesandbox:
+
+https://codesandbox.io/s/github/patorjk/JavaScript-Snake?file=/index.html
+
+On first load sometimes the game frame will not load correctly and you'll need to press the refresh icon above its display panel to get the game to show. 
+
+Original game is located here:
+
+http://patorjk.com/games/snake
+
+
+## How to use
+The index.html file should give an idea of how to use this code. However, below you can see how to initialize it into any div within a webpage.
+
+    var mySnakeBoard = new SNAKE.Board( {
+                                            boardContainer: "game-area",
+                                            fullScreen: false,
+                                            width: 580,
+                                            height:400
+                                        });
+                                    
+The comments within the source code are formatted a little strange because at the time I was playing around with YUI Doc which generates documentation from code. Kind of sucks that there's so much churn in the JavaScript world. However, I'm glad the rest of the code doesn't use any external libraries, as this game still works the same after over a decade.
--- a/JavaScript-Snake/css/Senura-snake.css
+++ b/JavaScript-Snake/css/Senura-snake.css
+/*
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+*/
+
+body {
+	margin:0px;
+	padding:0px;
+	background-color:#000000;
+}
+
+.snake-toolbar {
+    color: #847a87;
+}
+
+#game-area {
+	margin:10px;
+	padding:0px;
+}
+
+#game-area:focus { outline: none; }
+
+#mode-wrapper {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #f6f0f7;
+}
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+  color: #605d61;
+}
+
+a.snake-link:hover {
+  color: #a500d6;
+}
+
+.snake-pause-screen {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position:absolute;
+    width:300px;
+    height:80px;
+    text-align:center;
+    top:50%;
+    left:50%;
+    margin-top:-40px;
+    margin-left:-150px;
+    display:none;
+    background-color:#ffffff;
+    color: #938996;
+}
+
+.snake-panel-component {
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #cf6d6d;
+    text-align: center;
+    background-color: #550b70;
+    padding: 8px;
+    margin: 0px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #eddff2;
+    position: absolute;
+    border: 0px solid black;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+   background-image: url('./images/dark-snakeblock.png');
+}
+.snake-snakebody-dead {
+   background-image: url('./images/dead-dark-snakeblock.png');
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: black;
+    border: 2px solid #000000;
+    position: absolute;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: #fcfcfc;
+    border: 3px solid black;
+}
+
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    background-color: #3E2E44;
+    position: relative;
+}
+
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: black;
+    color: #ab00de;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: black;
+    color: #ab00de;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/css/dark-snake.css
+++ b/JavaScript-Snake/css/dark-snake.css
+/*
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+*/
+
+body {
+	margin:0px;
+	padding:0px;
+	background-color:#3E2E44;
+}
+
+.snake-toolbar {
+    color: #938996;
+}
+
+#game-area {
+	margin:10px;
+	padding:0px;
+}
+
+#game-area:focus { outline: none; }
+
+#mode-wrapper {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #938996;
+}
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+  color: #938996;
+}
+
+a.snake-link:hover {
+  color: #938996;
+}
+
+.snake-pause-screen {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position:absolute;
+    width:300px;
+    height:80px;
+    text-align:center;
+    top:50%;
+    left:50%;
+    margin-top:-40px;
+    margin-left:-150px;
+    display:none;
+    background-color:#3E2E44;
+    color: #938996;
+}
+
+.snake-panel-component {
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #938996;
+    text-align: center;
+    background-color: #3E2E44;
+    padding: 8px;
+    margin: 0px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #3E2E44;
+    position: absolute;
+    border: 0px solid black;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+   background-image: url('./images/dark-snakeblock.png');
+}
+.snake-snakebody-dead {
+   background-image: url('./images/dead-dark-snakeblock.png');
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: black;
+    border: 2px solid #3E2E44;
+    position: absolute;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: #312E44;
+    border: 3px solid black;
+}
+
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    background-color: #3E2E44;
+    position: relative;
+}
+
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: black;
+    color: #938996;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: black;
+    color: #938996;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/css/green-snake.css
+++ b/JavaScript-Snake/css/green-snake.css
+/*
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+*/
+body {
+	margin:0px;
+	padding:0px;
+    background-color: darkgreen;
+}
+
+.snake-toolbar {
+    background-color: rgba(255,255,255,0.4);
+    border-radius: 10px;
+}
+
+#game-area {
+	margin:10px;
+	padding:0px;
+    background-color: lightgreen;
+}
+
+#mode-wrapper {
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+
+}
+
+#game-area:focus { outline: none; }
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+  color: black;
+}
+
+a.snake-link:hover {
+  color: #FfFf54;
+}
+
+.snake-pause-screen {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position:absolute;
+    width:300px;
+    height:80px;
+    text-align:center;
+    top:50%;
+    left:50%;
+    margin-top:-40px;
+    margin-left:-150px;
+    display:none;
+    background-color:black;
+    color:white;
+}
+
+.snake-panel-component {
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: black;
+    text-align: center;
+    background-color: white;
+    padding: 8px;
+    margin: 0px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    position: absolute;
+    border: 0px solid #000080;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+   background-image: url('./images/snakeblock.png');
+}
+.snake-snakebody-dead {
+   background-image: url('./images/deadblock.png');
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: black;
+    border: 0px solid #000080;
+    position: absolute;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: white;
+    border: 0px solid #0000A8;
+}
+
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    background-color: #FC5454;
+    position: relative;
+}
+
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/css/head-snake.css
+++ b/JavaScript-Snake/css/head-snake.css
+body {
+	margin:0px;
+	padding:0px;
+    background-color: rgb(0, 0, 0);
+}
+
+#game-area {
+	margin:10px;
+	padding:0px;
+}
+
+#mode-wrapper {
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+
+}
+
+#game-area:focus { outline: none; }
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+  color: #FCFC54;
+}
+
+a.snake-link:hover {
+  color: #FfFf54;
+}
+
+.snake-pause-screen {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position:absolute;
+    width:300px;
+    height:80px;
+    text-align:center;
+    top:50%;
+    left:50%;
+    margin-top:-40px;
+    margin-left:-150px;
+    display:none;
+    background-color:black;
+    color:white;
+}
+
+.snake-panel-component {
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    padding: 8px;
+    margin: 0px;
+}
+
+#snake-snakehead-alive {
+    background-image: url('./images/green-head-snakeblock.png');
+    margin: 0px;
+    padding: 0px;
+    background-color: rgb(10, 173, 10);
+    position: absolute;
+    border: 0px solid #000080;
+    background-repeat: no-repeat;
+    border-radius: 4px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    position: absolute;
+    border: 0px solid #000080;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+   background-image: url('./images/green-body-snakeblock.png'), url('./images/green-body-snakeblock.png');
+}
+.snake-snakebody-dead {
+   background-image: url('./images/deadblock.png'), url('./images/deadblock.png');
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: rgb(182, 11, 11);
+    border: 0px solid #000080;
+    position: absolute;
+    border-radius: 6px;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: rgb(245, 245, 220);
+    border: 0px solid #0000A8;
+}
+
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    position: relative;
+}
+
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/css/images/Thumbs.db
+++ b/JavaScript-Snake/css/images/Thumbs.db
--- a/JavaScript-Snake/css/images/dark-snakeblock.png
+++ b/JavaScript-Snake/css/images/dark-snakeblock.png
--- a/JavaScript-Snake/css/images/dead-dark-snakeblock.png
+++ b/JavaScript-Snake/css/images/dead-dark-snakeblock.png
--- a/JavaScript-Snake/css/images/deadblock.png
+++ b/JavaScript-Snake/css/images/deadblock.png
--- a/JavaScript-Snake/css/images/deadblock_border.png
+++ b/JavaScript-Snake/css/images/deadblock_border.png
--- a/JavaScript-Snake/css/images/favicon.png
+++ b/JavaScript-Snake/css/images/favicon.png
--- a/JavaScript-Snake/css/images/green-body-snakeblock.png
+++ b/JavaScript-Snake/css/images/green-body-snakeblock.png
--- a/JavaScript-Snake/css/images/green-head-snakeblock.png
+++ b/JavaScript-Snake/css/images/green-head-snakeblock.png
--- a/JavaScript-Snake/css/images/matrix-food-block.png
+++ b/JavaScript-Snake/css/images/matrix-food-block.png
--- a/JavaScript-Snake/css/images/matrix-snake-block.png
+++ b/JavaScript-Snake/css/images/matrix-snake-block.png
--- a/JavaScript-Snake/css/images/snakeblock.png
+++ b/JavaScript-Snake/css/images/snakeblock.png
--- a/JavaScript-Snake/css/light-snake.css
+++ b/JavaScript-Snake/css/light-snake.css
+/*
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+*/
+
+body {
+    margin: 0px;
+    padding: 0px;
+    background-color: #f73378;
+}
+#game-area {
+    margin: 10px;
+    padding: 0px;
+}
+
+#mode-wrapper {
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+}
+#game-area:focus {
+    outline: none;
+}
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+    color: #FCFC54;
+}
+a.snake-link:hover {
+    color: #FfFf54;
+}
+.snake-pause-screen {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    width: 300px;
+    height: 80px;
+    text-align: center;
+    top: 50%;
+    left: 50%;
+    margin-top: -40px;
+    margin-left: -150px;
+    display: none;
+    background-color: black;
+    color: white;
+}
+.snake-panel-component {
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    padding: 8px;
+    margin: 0px;
+}
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    position: absolute;
+    border: 0px solid #000080;
+    background-repeat: no-repeat;
+}
+.snake-snakebody-alive {
+    background-image: url('./images/snakeblock.png');
+}
+.snake-snakebody-dead {
+    background-image: url('./images/deadblock.png');
+}
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #6cfd6a;
+    border: 0px solid #000080;
+    position: absolute;
+}
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: #ab003c;
+    border: 0px solid #ab003c;
+}
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    position: relative;
+}
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/css/main-snake.css
+++ b/JavaScript-Snake/css/main-snake.css
+/*
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+*/
+body {
+	margin:0px;
+	padding:0px;
+    background-color: #FC5454;
+}
+
+#game-area {
+	margin:10px;
+	padding:0px;
+}
+
+#mode-wrapper {
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+
+}
+
+#game-area:focus { outline: none; }
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+  color: #FCFC54;
+}
+
+a.snake-link:hover {
+  color: #FfFf54;
+}
+
+.snake-pause-screen {
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position:absolute;
+    width:300px;
+    height:80px;
+    text-align:center;
+    top:50%;
+    left:50%;
+    margin-top:-40px;
+    margin-left:-150px;
+    display:none;
+    background-color:black;
+    color:white;
+}
+
+.snake-panel-component {
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    padding: 8px;
+    margin: 0px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    position: absolute;
+    border: 0px solid #000080;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+   background-image: url('./css/images/snakeblock.png'), url('./images/snakeblock.png');
+}
+.snake-snakebody-dead {
+   background-image: url('./css/images/deadblock.png'), url('./images/deadblock.png');
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    border: 0px solid #000080;
+    position: absolute;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: #0000A8;
+    border: 0px solid #0000A8;
+}
+
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    position: relative;
+}
+
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/css/matrix-snake.css
+++ b/JavaScript-Snake/css/matrix-snake.css
+body {
+margin:0px;
+padding:0px;
+background-color: #00ff11;
+}
+
+#game-area {
+margin:10px;
+padding:0px;
+background-color: #00ff11;
+}
+
+#mode-wrapper {
+color: #000000;
+font-family: Verdana, arial, helvetica, sans-serif;
+font-size: 14px;
+
+}
+
+#game-area:focus { outline: none; }
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+color: #FCFC54;
+}
+
+a.snake-link:hover {
+color: #FfFf54;
+}
+
+.snake-pause-screen {
+font-family: Verdana, arial, helvetica, sans-serif;
+font-size: 14px;
+position:absolute;
+width:300px;
+height:80px;
+text-align:center;
+top:50%;
+left:50%;
+margin-top:-40px;
+margin-left:-150px;
+display:none;
+background-color:black;
+color:white;
+}
+
+.snake-panel-component {
+position: absolute;
+font-family: Verdana, arial, helvetica, sans-serif;
+font-size: 14px;
+color: #000000;
+text-align: center;
+background-color: #00ff11;
+padding: 8px;
+margin: 0px;
+}
+
+.snake-snakebody-block {
+margin: 0px;
+padding: 0px;
+background-color: #FF0000;
+position: absolute;
+border: 0px solid #000080;
+background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+background-image: url('./images/matrix-snake-block.png');
+}
+.snake-snakebody-dead {
+background-image: url('./images/deadblock.png');
+}
+
+.snake-food-block {
+margin: 0px;
+padding: 0px;
+background-color: #FF0000;
+border: 0px solid #000080;
+position: absolute;
+background-image: url("./images/matrix-food-block.png")
+}
+
+.snake-playing-field {
+margin: 0px;
+padding: 0px;
+position: absolute;
+background-color: #000000;
+border: 0px solid #000000;
+}
+
+.snake-game-container {
+margin: 0px;
+padding: 0px;
+border-width: 0px;
+border-style: none;
+zoom: 1;
+background-color: #00ff11;
+position: relative;
+}
+
+.snake-welcome-dialog {
+padding: 8px;
+margin: 0px;
+background-color: #000000;
+color: #00ff11;
+font-family: Verdana, arial, helvetica, sans-serif;
+font-size: 14px;
+position: absolute;
+top: 50%;
+left: 50%;
+width: 300px;
+/height: 150px;/
+margin-top: -100px;
+margin-left: -158px;
+text-align: center;
+display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+padding: 8px;
+margin: 0px;
+background-color: #000000;
+color: #ff0000;
+font-family: Verdana, arial, helvetica, sans-serif;
+font-size: 14px;
+position: absolute;
+top: 50%;
+left: 50%;
+width: 300px;
+height: 100px;
+margin-top: -75px;
+margin-left: -158px;
+text-align: center;
+display: none;
+}
\ No newline at end of file
--- a/JavaScript-Snake/css/teal-snake.css
+++ b/JavaScript-Snake/css/teal-snake.css
+/*
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+*/
+@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
+
+
+body {
+	margin:0px;
+	padding:0px;
+	background-color:teal;
+}
+
+.snake-toolbar {
+    font-family: Electrolize;
+    color: white;
+}
+
+#game-area {
+	margin:10px;
+	padding:0px;
+}
+
+#game-area:focus { outline: none; }
+
+#mode-wrapper {
+    font-family: Electrolize;
+    font-size: 14px;
+    color: whitesmoke;
+}
+
+a.snake-link, a.snake-link:link, a.snake-link:visited {
+  color: white;
+}
+
+a.snake-link:hover {
+  color: white;
+}
+
+.snake-pause-screen {
+    font-family: Electrolize;
+    font-size: 16px;
+    position:absolute;
+    width:300px;
+    height:80px;
+    text-align:center;
+    top:50%;
+    left:50%;
+    margin-top:-40px;
+    margin-left:-150px;
+    display:none;
+    background-color:#3E2E44;
+    color: whitesmoke;
+}
+
+.snake-panel-component {
+    position: absolute;
+    font-family: Electrolize;
+    font-size: 16px;
+    color: #938996;
+    text-align: center;
+    background-color: #3E2E44;
+    padding: 8px;
+    margin: 0px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: orange;
+    position: absolute;
+    border: 0px solid black;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+   background-image: url('./images/snakeblock.png');
+}
+.snake-snakebody-dead {
+   background-image: url('./images/dead-dark-snakeblock.png');
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: red;
+    border: 2px solid black;
+    position: absolute;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: rgb(0, 180, 180);
+    border: 3px solid black;
+}
+
+.snake-game-container {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    background-color: #3E2E44;
+    position: relative;
+}
+
+.snake-welcome-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: black;
+    color: whitesmoke;
+    font-family: Electrolize;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    /*height: 150px;*/
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
+}
+
+.snake-try-again-dialog, .snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: black;
+    color: whitesmoke;
+    font-family: Electrolize;
+    font-size: 16px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
--- a/JavaScript-Snake/index.html
+++ b/JavaScript-Snake/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<!--
+
+JavaScript Snake
+By Patrick Gillespie
+http://patorjk.com/games/snake
+
+Source code is available here: https://github.com/patorjk/JavaScript-Snake
+
+-->
+    <meta charset="utf-8">
+    <title>JavaScript Snake</title>
+    <link rel=stylesheet id="style" type="text/css" href="./css/main-snake.css" />
+    <link rel="shortcut icon" href="css/images/favicon.png" />
+    <style>
+      .snake-toolbar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index:10000;
+        padding: 5px;
+      }
+    </style>
+<script>
+
+function getTheme () {
+    function changeTheme(themeUrl) {
+      var elm = document.getElementById("style");
+      elm && elm.remove();
+
+      var newCss = document.createElement("link");
+      newCss.id = "style";
+      newCss.rel = "stylesheet";
+      newCss.type = "text/css";
+      newCss.href = themeUrl;
+      document.head.appendChild(newCss);
+    }
+    var index = document.getElementById("select").selectedIndex;
+    switch (index) {
+        case 0: 
+          changeTheme('css/light-snake.css?' + Math.random());
+          break;
+        case 1: 
+          changeTheme('css/main-snake.css?' + Math.random());
+          break;
+        case 2: 
+          changeTheme('css/dark-snake.css?' + Math.random());
+          break;
+        case 3: 
+          changeTheme('css/green-snake.css?' + Math.random());
+          break;
+        case 4: 
+          changeTheme('css/matrix-snake.css?' + Math.random());
+          break;
+        case 5: 
+          changeTheme('css/Senura-snake.css?' + Math.random());
+          break;
+          case 6: 
+          changeTheme('css/head-snake.css?' + Math.random());
+          break;
+        default:
+          changeTheme('css/main-snake.css?' + Math.random());
+          break;
+    }
+    setTimeout(function() {
+        document.getElementById('game-area').focus();
+    }, 10);
+}
+
+if (navigator.onLine && window.location.hostname === 'patorjk.com') {
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-3312460-1']);
+    _gaq.push(['_trackPageview']);
+
+    (function() {
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+}
+</script>
+</head>
+<body>
+    <div class="snake-toolbar">
+      <div style="display:inline-block;margin-right:10px;">
+        <span>Theme:</span>
+        <select autocomplete="off" onchange="getTheme()" id="select">
+            <option>Light Theme by yokesharun</option>
+            <option selected>Main Theme by patorjk</option>
+            <option>Dark Theme by KenyStev</option>
+            <option>Green Theme by CoffeeCatDE</option>
+            <option>Matrix Theme by Geahad Haymor</option>
+            <option>Theme by Senura Ratnayake</option>
+            <option>Snake Head Theme by Rb64</option>
+        </select>
+      </div>
+      <div style="display:inline-block;margin-right:10px;">
+        <span>Mode:</span>
+        <select id="selectMode">
+            <option value="100">Easy</option>
+            <option value="75" selected>Medium</option>
+            <option value="50">Hard</option>
+            <option value="25">Impossible</option>
+            <option value="110">Rush</option>
+        </select>
+      </div>
+      <button onclick="go_full_screen()">Full Screen</button><br />
+    </div>
+
+    <!--
+      <h2>Select which mode you would like to play in.</h2>
+      <button id="Easy">Easy</button><br />
+      <button id="Medium">Medium</button><br />
+      <button id="Difficult">Difficult</button>
+
+<button id="high-score">Get your current high score for this game.</button>
+-->
+    <div id="mode-wrapper" style="display: inline; width: auto;">
+    </div>
+
+    <div id="game-area" tabindex="0">
+    </div>
+    <script type="text/javascript" src="./js/snake.js"></script>
+    <script type="text/javascript" src="./js/init.js"></script>
+    <script type="text/javascript">
+      function go_full_screen() {
+        var elem = document.documentElement;
+        try {
+            if (elem.requestFullscreen) {
+              elem.requestFullscreen();
+            } else if (elem.msRequestFullscreen) {
+              elem.msRequestFullscreen();
+            } else if (elem.mozRequestFullScreen) {
+              elem.mozRequestFullScreen();
+            } else if (elem.webkitRequestFullscreen) {
+              elem.webkitRequestFullscreen();
+            }
+        } catch(err) {
+          console.error(err);
+          alert("Sorry, fullscreen won't work in this setup.");
+        }
+      }
+  </script>
+</body>
+</html>
--- a/JavaScript-Snake/js/init.js
+++ b/JavaScript-Snake/js/init.js
+var mySnakeBoard = new SNAKE.Board({
+  boardContainer: "game-area",
+  fullScreen: true,
+  premoveOnPause: false
+});
--- a/JavaScript-Snake/js/snake.js
+++ b/JavaScript-Snake/js/snake.js
--- a/JavaScript-Snake/package.json
+++ b/JavaScript-Snake/package.json
+{
+  "name": "javascript-snake",
+  "version": "1.0.0",
+  "description": "JavaScript Snake<br/> By Patrick Gillespie<br/> License: MIT<br/> http://patorjk.com/games/snake",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/patorjk/JavaScript-Snake.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patorjk/JavaScript-Snake/issues"
+  },
+  "homepage": "https://github.com/patorjk/JavaScript-Snake#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  }
+}