From 95380c624ac86671eb48a946c3066ba3dc2c6a54 Mon Sep 17 00:00:00 2001 From: Sam cook Date: Tue, 13 Jan 2026 17:01:36 +0000 Subject: [PATCH 1/6] add dist/node_modules to .gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index f78ec928..8514f353 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .parcel-cache +/dist +/node_modules From a45290be56d5cc2ab7fbabc75a2d534f4cd70e7e Mon Sep 17 00:00:00 2001 From: Sam cook Date: Tue, 13 Jan 2026 17:01:54 +0000 Subject: [PATCH 2/6] update package-lock with peer:true --- package-lock.json | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index d7f43490..c95b3b01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -372,6 +372,7 @@ "integrity": "sha512-SRZFtqGiaKHlZ2YAvf+NHvBFWS3GnkBvJMfOJM7kxJRK3M1bhbwJa/GgSdzqro5UVf9Bfj6E+pkdrRQIOZ7jMQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@mischnic/json-sourcemap": "^0.1.0", "@parcel/cache": "2.13.3", @@ -2024,6 +2025,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -3256,21 +3258,6 @@ "node": ">=10" } }, - "node_modules/srcset": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/srcset/-/srcset-5.0.1.tgz", - "integrity": "sha512-/P1UYbGfJVlxZag7aABNRrulEXAwCSDo7fklafOQrantuPTDmYgijJMks2zusPCVzgW9+4P69mq7w6pYuZpgxw==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", From c79559d7ae83f657cbc80ed18a34721c6c6e3822 Mon Sep 17 00:00:00 2001 From: Sam cook Date: Thu, 15 Jan 2026 17:09:53 +0000 Subject: [PATCH 3/6] update version and removed one space in code --- package-lock.json | 6 +++--- src/index.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c95b3b01..ff91a369 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2050,9 +2050,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001696", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz", - "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==", + "version": "1.0.30001764", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz", + "integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==", "dev": true, "funding": [ { diff --git a/src/index.html b/src/index.html index 03dc6b10..f9592364 100755 --- a/src/index.html +++ b/src/index.html @@ -116,7 +116,7 @@ -
+
From 4536321925f9c925e5f2e58e10e09569cc5a9d44 Mon Sep 17 00:00:00 2001 From: Sam cook Date: Thu, 15 Jan 2026 17:21:13 +0000 Subject: [PATCH 4/6] ctrl s to sync lines --- src/index.html | 247 +++++++++++++++++++++++++------------------------ 1 file changed, 124 insertions(+), 123 deletions(-) diff --git a/src/index.html b/src/index.html index f9592364..81e65a42 100755 --- a/src/index.html +++ b/src/index.html @@ -1,7 +1,8 @@ - - - - JavaScript Snake - - - - - - -
-
- Theme: - -
-
- Mode: - -
+ --> + + + +
+
+ Theme: + +
+
+ Mode: + +
+
-
+ +
-
+
-
- - - + + + - document.getElementById('go_full_screen').addEventListener('click', go_full_screen); - - - + \ No newline at end of file From 8735a2676b652373103d01d569143bdb06658a71 Mon Sep 17 00:00:00 2001 From: Sam cook Date: Thu, 15 Jan 2026 17:59:59 +0000 Subject: [PATCH 5/6] add instructions --- src/index.html | 3 ++- src/js/snake.js | 24 +++++++++++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 81e65a42..43fcff94 100755 --- a/src/index.html +++ b/src/index.html @@ -116,7 +116,8 @@
- + +
diff --git a/src/js/snake.js b/src/js/snake.js index 6232e8d9..f19fbb62 100644 --- a/src/js/snake.js +++ b/src/js/snake.js @@ -249,8 +249,8 @@ SNAKE.Snake = if (me.snakeLength > highScore) { alert( "Congratulations! You have beaten your previous high score, which was " + - highScore + - ".", + highScore + + ".", ); localStorage.setItem(HIGH_SCORE_KEY, me.snakeLength); } @@ -310,7 +310,7 @@ SNAKE.Snake = if (isDead || (isPaused && !config.premoveOnPause)) { return; } - + // mark line here let directionFound = MOVE_NONE; switch (keyNum) { @@ -338,6 +338,7 @@ SNAKE.Snake = * This method is executed for each move of the snake. It determines where the snake will go and what will happen to it. This method needs to run quickly. * @method go */ + // here me.go = function () { const oldHead = me.snakeHead, newHead = me.snakeTail, @@ -760,17 +761,17 @@ SNAKE.Board = // defaults if (!config.onLengthUpdate) { - config.onLengthUpdate = () => {}; + config.onLengthUpdate = () => { }; } if (!config.onPauseToggle) { - config.onPauseToggle = () => {}; + config.onPauseToggle = () => { }; } if (!config.onWin) { - config.onWin = () => {}; + config.onWin = () => { }; } if (!config.onDeath) { - config.onDeath = () => {}; + config.onDeath = () => { }; } let myFood, @@ -1409,3 +1410,12 @@ SNAKE.Board = } }; // end return function })(); + +let InstructionBtn = document.getElementById("instruction_btn"); +function instructions() { + if (typeof mySnakeBoard !== "undefined" && mySnakeBoard.getBoardState() !== BOARD_NOT_READY) { + mySnakeBoard.setPaused(!mySnakeBoard.getPaused()); + } +} +InstructionBtn.addEventListener("click", instructions); +// The pause screen text is set at snake.js:827. You can change it there to update what's displayed when paused. For example: \ No newline at end of file From cbfed3df915f4671732cc5db0ab8a17eb9885f76 Mon Sep 17 00:00:00 2001 From: Sam cook Date: Tue, 20 Jan 2026 17:09:44 +0000 Subject: [PATCH 6/6] update pause screen (instructions) --- src/css/Senura-snake.css | 15 ++-- src/css/black-snake.css | 11 +-- src/css/dark-snake.css | 15 ++-- src/css/green-snake.css | 11 +-- src/css/head-snake.css | 11 +-- src/css/light-snake.css | 24 +++-- src/css/main-snake.css | 11 +-- src/css/matrix-snake.css | 190 ++++++++++++++++++++------------------- src/css/neon-snake.css | 15 ++-- src/css/teal-snake.css | 19 ++-- src/js/snake.js | 2 +- 11 files changed, 176 insertions(+), 148 deletions(-) diff --git a/src/css/Senura-snake.css b/src/css/Senura-snake.css index 2102a783..cc950c49 100644 --- a/src/css/Senura-snake.css +++ b/src/css/Senura-snake.css @@ -43,16 +43,16 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; - background-color: #ffffff; - color: #938996; + background-color: black; + color: white; } .snake-panel-component { @@ -78,6 +78,7 @@ a.snake-link:hover { .snake-snakebody-alive { background-image: url("src/css/images/dark-snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/css/images/dead-dark-snakeblock.png"); } @@ -143,4 +144,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/black-snake.css b/src/css/black-snake.css index a92710b5..299d5fe2 100644 --- a/src/css/black-snake.css +++ b/src/css/black-snake.css @@ -39,13 +39,13 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; background-color: black; color: white; @@ -74,6 +74,7 @@ a.snake-link:hover { background-image: url("src/cssss/images/snakeblock.png"), url("src/css/images/snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/cssss/images/deadblock.png"), url("src/css/images/deadblock.png"); @@ -139,4 +140,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/dark-snake.css b/src/css/dark-snake.css index 16388e41..ec475ce8 100644 --- a/src/css/dark-snake.css +++ b/src/css/dark-snake.css @@ -43,16 +43,16 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; - background-color: #3e2e44; - color: #938996; + background-color: black; + color: white; } .snake-panel-component { @@ -78,6 +78,7 @@ a.snake-link:hover { .snake-snakebody-alive { background-image: url("src/css/images/dark-snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/css/images/dead-dark-snakeblock.png"); } @@ -143,4 +144,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/green-snake.css b/src/css/green-snake.css index 9cd114c5..52520e11 100644 --- a/src/css/green-snake.css +++ b/src/css/green-snake.css @@ -44,13 +44,13 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; background-color: black; color: white; @@ -79,6 +79,7 @@ a.snake-link:hover { .snake-snakebody-alive { background-image: url("src/css/images/snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/css/images/deadblock.png"); } @@ -144,4 +145,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/head-snake.css b/src/css/head-snake.css index 0e7daf95..e5a00a55 100644 --- a/src/css/head-snake.css +++ b/src/css/head-snake.css @@ -33,13 +33,13 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; background-color: black; color: white; @@ -79,6 +79,7 @@ a.snake-link:hover { background-image: url("src/css/images/green-body-snakeblock.png"), url("src/css/images/green-body-snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/css/images/deadblock.png"), url("src/css/images/deadblock.png"); @@ -145,4 +146,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/light-snake.css b/src/css/light-snake.css index db0be890..d57d3e0a 100644 --- a/src/css/light-snake.css +++ b/src/css/light-snake.css @@ -9,6 +9,7 @@ body { padding: 0px; background-color: #f73378; } + #game-area { margin: 10px; padding: 0px; @@ -19,32 +20,37 @@ body { 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; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; background-color: black; color: white; } + .snake-panel-component { position: absolute; font-family: Verdana, arial, helvetica, sans-serif; @@ -54,6 +60,7 @@ a.snake-link:hover { padding: 8px; margin: 0px; } + .snake-snakebody-block { margin: 0px; padding: 0px; @@ -62,12 +69,15 @@ a.snake-link:hover { border: 0px solid #000080; 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; @@ -75,6 +85,7 @@ a.snake-link:hover { border: 0px solid #000080; position: absolute; } + .snake-playing-field { margin: 0px; padding: 0px; @@ -82,6 +93,7 @@ a.snake-link:hover { background-color: #ab003c; border: 0px solid #ab003c; } + .snake-game-container { margin: 0px; padding: 0px; @@ -90,6 +102,7 @@ a.snake-link:hover { zoom: 1; position: relative; } + .snake-welcome-dialog { padding: 8px; margin: 0px; @@ -107,6 +120,7 @@ a.snake-link:hover { text-align: center; display: block; } + .snake-try-again-dialog, .snake-win-dialog { padding: 8px; @@ -124,4 +138,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/main-snake.css b/src/css/main-snake.css index 7938bf34..55a77bea 100755 --- a/src/css/main-snake.css +++ b/src/css/main-snake.css @@ -38,13 +38,13 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; background-color: black; color: white; @@ -73,6 +73,7 @@ a.snake-link:hover { background-image: url("./images/snakeblock.png"), url("./images/snakeblock.png"); } + .snake-snakebody-dead { background-image: url("./images/deadblock.png"), url("./images/deadblock.png"); } @@ -137,4 +138,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/matrix-snake.css b/src/css/matrix-snake.css index 643d6960..87d8fd45 100644 --- a/src/css/matrix-snake.css +++ b/src/css/matrix-snake.css @@ -1,134 +1,140 @@ body { -margin:0px; -padding:0px; -background-color: #00ff11; + margin: 0px; + padding: 0px; + background-color: #00ff11; } #game-area { -margin:10px; -padding:0px; -background-color: #00ff11; + margin: 10px; + padding: 0px; + background-color: #00ff11; } #mode-wrapper { -color: #000000; -font-family: Verdana, arial, helvetica, sans-serif; -font-size: 14px; + color: #000000; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; } -#game-area:focus { outline: none; } +#game-area:focus { + outline: none; +} -a.snake-link, a.snake-link:link, a.snake-link:visited { -color: #FCFC54; +a.snake-link, +a.snake-link:link, +a.snake-link:visited { + color: #FCFC54; } a.snake-link:hover { -color: #FfFf54; + 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; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; + position: absolute; + width: 350px; + height: 130px; + text-align: center; + top: 50%; + left: 50%; + margin-top: -100px; + margin-left: -190px; + 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; + 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; + margin: 0px; + padding: 0px; + background-color: #FF0000; + position: absolute; + border: 0px solid #000080; + background-repeat: no-repeat; } .snake-snakebody-alive { -background-image: url('src/css/images/matrix-snake-block.png'); + background-image: url('src/css/images/matrix-snake-block.png'); } + .snake-snakebody-dead { -background-image: url('src/css/images/deadblock.png'); + background-image: url('src/css/images/deadblock.png'); } .snake-food-block { -margin: 0px; -padding: 0px; -background-color: #FF0000; -border: 0px solid #000080; -position: absolute; -background-image: url("src/css/images/matrix-food-block.png") + margin: 0px; + padding: 0px; + background-color: #FF0000; + border: 0px solid #000080; + position: absolute; + background-image: url("src/css/images/matrix-food-block.png") } .snake-playing-field { -margin: 0px; -padding: 0px; -position: absolute; -background-color: #000000; -border: 0px solid #000000; + 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; + 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; + 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; -} +.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 diff --git a/src/css/neon-snake.css b/src/css/neon-snake.css index 49591510..128ab771 100644 --- a/src/css/neon-snake.css +++ b/src/css/neon-snake.css @@ -42,16 +42,16 @@ a.snake-link:hover { font-family: Verdana, arial, helvetica, sans-serif; font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; - background-color: #0fff00; - color: #000000; + background-color: black; + color: white; } .snake-panel-component { @@ -77,6 +77,7 @@ a.snake-link:hover { background-image: url("src/css/images/neon-body-snakeblock.png"), url("src/cssss/images/neon-body-snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/css/images/neon-dead-snakeblock.png"), url("src/cssss/images/neon-dead-snakeblock.png"); @@ -142,4 +143,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/css/teal-snake.css b/src/css/teal-snake.css index ac06471a..c4089675 100644 --- a/src/css/teal-snake.css +++ b/src/css/teal-snake.css @@ -42,19 +42,19 @@ a.snake-link:hover { } .snake-pause-screen { - font-family: Electrolize; - font-size: 16px; + font-family: Verdana, arial, helvetica, sans-serif; + font-size: 14px; position: absolute; - width: 300px; - height: 80px; + width: 350px; + height: 130px; text-align: center; top: 50%; left: 50%; - margin-top: -40px; - margin-left: -150px; + margin-top: -100px; + margin-left: -190px; display: none; - background-color: #3e2e44; - color: whitesmoke; + background-color: black; + color: white; } .snake-panel-component { @@ -80,6 +80,7 @@ a.snake-link:hover { .snake-snakebody-alive { background-image: url("src/css/images/snakeblock.png"); } + .snake-snakebody-dead { background-image: url("src/css/images/dead-dark-snakeblock.png"); } @@ -145,4 +146,4 @@ a.snake-link:hover { margin-left: -158px; text-align: center; display: none; -} +} \ No newline at end of file diff --git a/src/js/snake.js b/src/js/snake.js index f19fbb62..b55338d3 100644 --- a/src/js/snake.js +++ b/src/js/snake.js @@ -824,7 +824,7 @@ SNAKE.Board = elmPauseScreen = document.createElement("div"); elmPauseScreen.className = "snake-pause-screen"; elmPauseScreen.innerHTML = - "
[Paused]

Press [space] to unpause.

"; + "
[Paused]

Press [space] to unpause/pause.

Click before moving or you will select buttons.

Use wasd or arrow keys to move.

"; elmAboutPanel = document.createElement("div"); elmAboutPanel.className = "snake-panel-component";