Skip to content

Instruction and pause buttons #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Samuelcook29create wants to merge 5 commits into
base: main
Choose a base branch
from
+149 −148
Draft

Instruction and pause buttons #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
95380c6
add dist/node_modules to .gitignore
Samuelcook29create Jan 13, 2026
a45290b
update package-lock with peer:true
Samuelcook29create Jan 13, 2026
c79559d
update version and removed one space in code
Samuelcook29create Jan 15, 2026
4536321
ctrl s to sync lines
Samuelcook29create Jan 15, 2026
8735a26
add instructions
Samuelcook29create Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
.parcel-cache
/dist
/node_modules
23 changes: 5 additions & 18 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

248 changes: 125 additions & 123 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<!--

<head>
<!--

JavaScript Snake
https://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) {
const elm = document.getElementById("style");
elm && elm.remove();
<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) {
const elm = document.getElementById("style");
elm && elm.remove();

const newCss = document.createElement("link");
newCss.id = "style";
newCss.rel = "stylesheet";
newCss.type = "text/css";
newCss.href = themeUrl;
document.head.appendChild(newCss);
}
const newCss = document.createElement("link");
newCss.id = "style";
newCss.rel = "stylesheet";
newCss.type = "text/css";
newCss.href = themeUrl;
document.head.appendChild(newCss);
}

const 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;
case 7:
changeTheme("css/black-snake.css?" + Math.random());
break;
case 8:
changeTheme("css/neon-snake.css?" + Math.random());
break;
default:
changeTheme("css/main-snake.css?" + Math.random());
break;
}
setTimeout(function () {
document.getElementById("game-area").focus();
}, 10);
const 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;
case 7:
changeTheme("css/black-snake.css?" + Math.random());
break;
case 8:
changeTheme("css/neon-snake.css?" + Math.random());
break;
default:
changeTheme("css/main-snake.css?" + Math.random());
break;
}
</script>
<!--
setTimeout(function () {
document.getElementById("game-area").focus();
}, 10);
}
</script>
<!--
<script async src="https://www.googletagmanager.com/gtag/js?id=G-352HTB3H82"></script>
<script>
window.dataLayer = window.dataLayer || [];
Expand All @@ -88,64 +84,70 @@

gtag('config', 'G-352HTB3H82');
</script>
--></head>
<body>
<div class="snake-toolbar">
<div style="display: inline-block; margin-right: 10px">
<span>Theme:</span>
<select autocomplete="off" 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>
<option>Black and purple Theme by LucassSantoss</option>
<option>Neon Theme by Daisy21000</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>
-->
</head>

<body>
<div class="snake-toolbar">
<div style="display: inline-block; margin-right: 10px">
<span>Theme:</span>
<select autocomplete="off" 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>
<option>Black and purple Theme by LucassSantoss</option>
<option>Neon Theme by Daisy21000</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>
<div style="display: inline-block; margin-right: 10px">
<button id="go_full_screen">Full Screen</button>
<br />
</div>
<button id="instruction_btn">Instructions</button>

<div id="mode-wrapper" style="display: inline; width: auto"></div>
</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">
document.getElementById('select').addEventListener('change', getTheme);
<div id="mode-wrapper" style="display: inline; width: auto"></div>

function go_full_screen() {
const 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.");
<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">
document.getElementById('select').addEventListener('change', getTheme);

function go_full_screen() {
const 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.");
}
}

document.getElementById('go_full_screen').addEventListener('click', go_full_screen);
</script>
</body>

document.getElementById('go_full_screen').addEventListener('click', go_full_screen);
</script>
</body>
</html>
</html>
24 changes: 17 additions & 7 deletions src/js/snake.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -310,7 +310,7 @@ SNAKE.Snake =
if (isDead || (isPaused && !config.premoveOnPause)) {
return;
}

// mark line here
let directionFound = MOVE_NONE;

switch (keyNum) {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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: