patorjk · DylanLCrocker · Jan 15, 2026 · Jan 15, 2026
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1,7 +1,9 @@
 {
  "projectName": "JavaScript-Snake",
  "projectOwner": "patorjk",
-  "files": ["README.md"],
+  "files": [
+    "README.md"
+  ],
  "commitType": "docs",
  "commitConvention": "angular",
  "contributorsPerLine": 7,
@@ -11,105 +13,162 @@
      "name": "patorjk",
      "avatar_url": "https://avatars.githubusercontent.com/u/521224?v=4",
      "profile": "http://patorjk.com/",
-      "contributions": ["code", "doc", "design", "bug", "example"]
+      "contributions": [
+        "code",
+        "doc",
+        "design",
+        "bug",
+        "example"
+      ]
    },
    {
      "login": "ultra17",
      "name": "ultra17",
      "avatar_url": "https://avatars.githubusercontent.com/u/27869698?v=4",
      "profile": "https://github.com/ultra17",
-      "contributions": ["code", "doc", "design", "bug"]
+      "contributions": [
+        "code",
+        "doc",
+        "design",
+        "bug"
+      ]
    },
    {
      "login": "Rb64",
      "name": "Rb64",
      "avatar_url": "https://avatars.githubusercontent.com/u/91498309?v=4",
      "profile": "https://github.com/Rb64",
-      "contributions": ["code", "bug"]
+      "contributions": [
+        "code",
+        "bug"
+      ]
    },
    {
      "login": "legoman8304",
      "name": "Wyatt Nulton",
      "avatar_url": "https://avatars.githubusercontent.com/u/43346988?v=4",
      "profile": "https://github.com/legoman8304",
-      "contributions": ["code", "bug"]
+      "contributions": [
+        "code",
+        "bug"
+      ]
    },
    {
      "login": "ashishsiot",
      "name": "Ashish Bhoir",
      "avatar_url": "https://avatars.githubusercontent.com/u/63919950?v=4",
      "profile": "https://github.com/ashishsiot",
-      "contributions": ["doc"]
+      "contributions": [
+        "doc"
+      ]
    },
    {
      "login": "dginovker",
      "name": "Dan G",
      "avatar_url": "https://avatars.githubusercontent.com/u/32943174?v=4",
      "profile": "http://dginovker.github.io",
-      "contributions": ["code", "bug"]
+      "contributions": [
+        "code",
+        "bug"
+      ]
    },
    {
      "login": "Megas4ever",
      "name": "Megas4ever",
      "avatar_url": "https://avatars.githubusercontent.com/u/28103886?v=4",
      "profile": "https://github.com/Megas4ever",
-      "contributions": ["code", "design"]
+      "contributions": [
+        "code",
+        "design"
+      ]
    },
    {
      "login": "mamamia5x",
      "name": "Bugs Bunny",
      "avatar_url": "https://avatars.githubusercontent.com/u/57536929?v=4",
      "profile": "https://github.com/mamamia5x",
-      "contributions": ["code", "bug"]
+      "contributions": [
+        "code",
+        "bug"
+      ]
    },
    {
      "login": "Coteh",
      "name": "James Cote",
      "avatar_url": "https://avatars.githubusercontent.com/u/3276350?v=4",
      "profile": "https://www.jamescote.ca",
-      "contributions": ["code", "bug", "doc"]
+      "contributions": [
+        "code",
+        "bug",
+        "doc"
+      ]
    },
    {
      "login": "yokesharun",
      "name": "Arun Yokesh",
      "avatar_url": "https://avatars.githubusercontent.com/u/12830078?v=4",
      "profile": "http://yokesharun.github.io/",
-      "contributions": ["code", "design"]
+      "contributions": [
+        "code",
+        "design"
+      ]
    },
    {
      "login": "GregFrench",
      "name": "Greg French",
      "avatar_url": "https://avatars.githubusercontent.com/u/17938510?v=4",
      "profile": "https://github.com/GregFrench",
-      "contributions": ["code"]
+      "contributions": [
+        "code"
+      ]
    },
    {
      "login": "KT360",
      "name": "KT360",
      "avatar_url": "https://avatars.githubusercontent.com/u/31077743?v=4",
      "profile": "https://github.com/KT360",
-      "contributions": ["code", "design"]
+      "contributions": [
+        "code",
+        "design"
+      ]
    },
    {
      "login": "Thusal06",
      "name": "Thusal Ranawaka",
      "avatar_url": "https://avatars.githubusercontent.com/u/66709891?v=4",
      "profile": "https://thusal06.github.io/",
-      "contributions": ["code", "design"]
+      "contributions": [
+        "code",
+        "design"
+      ]
    },
    {
      "login": "Furtano",
      "name": "C. S.",
      "avatar_url": "https://avatars.githubusercontent.com/u/4115133?v=4",
      "profile": "https://github.com/Furtano",
-      "contributions": ["code", "design"]
+      "contributions": [
+        "code",
+        "design"
+      ]
    },
    {
      "login": "akhill2606",
      "name": "Akhil Manohar",
      "avatar_url": "https://avatars.githubusercontent.com/u/56164681?v=4",
      "profile": "https://github.com/akhill2606",
-      "contributions": ["code"]
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "DylanLCrocker",
+      "name": "Dylan Crocker",
+      "avatar_url": "https://avatars.githubusercontent.com/DylanLCrocker",
+      "profile": "https://github.com/DylanLCrocker",
+      "contributions": [
+        "code"
+      ]
    }
  ]
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 .parcel-cache
+/dist
+/node_modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/css/blue-snake.css b/src/css/blue-snake.css
@@ -0,0 +1,138 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    background-color: rgb(0, 70, 32);
+}
+
+#game-area {
+    margin: 10px;
+    padding: 0px;
+}
+
+#mode-wrapper {
+    color: #ffffff;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+}
+
+a.snake-link,
+a.snake-link:link,
+a.snake-link:visited {
+    color: #ffffff;
+}
+
+.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: rgb(0, 70, 32);
+    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("src/css/images/green-head-snakeblock.png");
+    margin: 0px;
+    padding: 0px;
+    background-color: rgb(6, 104, 134);
+    position: absolute;
+    border: 0px solid #000000;
+    background-repeat: no-repeat;
+    border-radius: 4px;
+}
+
+.snake-snakebody-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: #247fb4;
+    position: absolute;
+    background-repeat: no-repeat;
+}
+
+.snake-snakebody-alive {
+    background-image: url("src/css/images/snakeblock.png");
+}
+
+.snake-snakebody-dead {
+    background-image: url("src/css/images/deadblock.png");
+}
+
+.snake-food-block {
+    margin: 0px;
+    padding: 0px;
+    background-color: rgb(207, 33, 33);
+    border: 0px solid #000000;
+    position: absolute;
+    border-radius: 6px;
+}
+
+.snake-playing-field {
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: rgb(20, 156, 54);
+    border: 0px solid #000000;
+}
+
+.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;
+}