patorjk / javascript-snake

The game of Snake written in JavaScript.

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.

Contributors

Thanks goes to these people: (emoji key)

patorjk 💻 📖 🎨 🐛 💡	ultra17 💻 📖 🎨 🐛	Rb64 💻 🐛	Wyatt Nulton 💻 🐛	Ashish Bhoir 📖	Dan G 💻 🐛	Megas4ever 💻 🎨
Bugs Bunny 💻 🐛	James Cote 💻 🐛 📖	Arun Yokesh 💻 🎨	Greg French 💻	KT360 💻 🎨	Thusal Ranawaka 💻 🎨	C. S. 💻 🎨
Akhil Manohar 💻

javascript-snake's Issues

I need wasd keys PLEASE

I can't fuck with the arrow keys I fucken hate it. sorry but I just want the wasd keys in the game. That would make my day! but like the game

Add gamepad support

Of course many gamepads are different, but I would really appreciate the baseline support for gamepads and then an individual user can fill in the buttons for their specific pad with a config file or just somewhere in the main JS file

No package.json

There isn's any json file included in the github repo. What should such a file contain?

create a GitHub pages branch

Why not creating a GitHub page with the game itself?

If no one does it I'll make a pull request in next few days :)

Snake's body should be visibly joined together

You can't see the snake's path, especially when the player has "coiled" the snake in a series of ➡⬆⬅ moves. If the gaps between the squares were filled in, you could follow the snake's path and it would look like a snake.

vvbh

Theme selector dose not display correct theme

Reloading the page results in switching back to the main theme. If the theme is switched before the reload the theme selector still displays the name of the old theme. This seems only to be an issue on Firefox.

Noticeable input lag.

If you do down + right (or any combination really) multiple times, you can see that snake will still be doing those movements even after you've finished typing. I'm assuming this is because it's gridded rather than just a free amount of pixels but still...

Highscore check doesn't seem to work anymore

Noticed that the alert notifying the player that they beat their high score does not run anymore, and seems like it's due to jsSnakeHighScore being set whenever the snake eats food (and foodEaten gets called) and snake has a length greater than high score.

Also, should alert be used for this sort of thing, or would it be better to move this into a new dialog box?

Request to Refactor var to let and const

Proposal: Refactor var Declarations to let and const

I would like to propose a refactor of the code to replace var declarations with let and const where appropriate. This change aims to improve code readability and adhere to modern JavaScript best practices.

Proposed Changes

• Change var to let: For variables that are reassigned.
• Change var to const: For variables that are not reassigned after initialization.

Benefits

• Enhanced Readability: let and const provide block scope, making the code easier to understand and less prone to errors related to variable scope.
• Modern Best Practices: Using let and const aligns with current JavaScript standards and practices.

Example

Here’s a snippet of the code I am referring to:

Current Code:

var SNAKE = SNAKE || {};
var instanceNumber = 0;
var blockPool = [];

Proposed Changes

I propose changing the code to:

const SNAKE = SNAKE || {};
let instanceNumber = 0;
const blockPool = [];

Questions

1. Are there any concerns about making these changes?
2. Is there any additional context or consideration I should be aware of before proceeding?

Thank you for considering this refactor. I believe it will contribute to a cleaner and more maintainable codebase.

Input Edge Case Issue

If you were going in one direction (A), went in another direction (B), then went to the opposite of the first direction ("-A") before the snake moved at least one square in the second direction (B), the snake would not register direction ("-A") since it disallows input to the opposite direction the snake is travelling.

For instance, if you're travelling to the Right, then (very) quickly go Up then Left, it would register Up, but refuse to go Left since it still thinks you're travelling Right. This happens because you actually hit Left before the snake had a chance to go Up.

I've got a fix for this I'll PR in a moment.

Snake collision

Hey there dear patorjk! i was playing a slightly altered version of your snake game recently and i wanted to ask if there could be a way to fix this weird snake collision bug where the snake could go backwards into itself and make you lose:

Redundant function Call getMode(var, var).

The event listeners are already setup in the 'me' class.
The getMode sets these listeners to the corresponding buttons. That's all fine.
When the rest of the event listeners are setup the following are called once again.
getMode('Easy', 100);
getMode('Medium', 75);
getMode('Difficult', 50);
All you got todo is delete those badboys.

New Theme

I didn't know how to submit a pull request so i put the code for it here.

/*
JavaScript Snake
By Patrick Gillespie
http://patorjk.com/games/snake
*/
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 #80;
background-repeat: no-repeat;
}

.snake-snakebody-alive {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVcBKhLenVerFjc-0NkhTl0DL5ol8AQxegjsd2eb5Kc4T3LURHTw&s');
}
.snake-snakebody-dead {
background-image: url('./images/deadblock.png');
}

.snake-food-block {
margin: 0px;
padding: 0px;
background-color: #FF0000;
border: 0px solid #80;
position: absolute;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2LFuA4CWQi_gQzbWlzoALs9fFmoK7LOuy6JGwwQjR85aXdQglqw&s")
}

.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;
}

Make highscore be permanently visible at the bottom

Perhaps swapping "Length" to where the Blue Box is, and adding "Best" to where Length currently is, keeping the highscores permanently visible.

Snake's head should be a different color.

When the game is paused, it isn't clear where the snake's head is. Making it a different color would make it clear which part of the field the user is in control of without having to wait to see movement.

Snake-game multiplayer

Hello!)
I just created snake-game server. If you are not busy, how about create a client for snake game multiplayer. It will be funny!))
https://github.com/ivan1993spb/snake-server

When you pause right after it brings up the death message, you have to reload the page to get it to work again.

Social links on bottom of page.

Hello there fellas! may i ask how can i remove the social links on the bottom of the page? i would really really love it if you guys would help me out! @patorjk

Pause when user moves to a different tab

I think it would be cool if the site would automatically when the user moves to different tab

Add pause button

Wait for an arrow-key press after coming out of pause.

When coming out of pause, the game starts running right away without giving the player a chance to reorient themselves into the hectic action. It would be better if once the user has dismissed the pause box, the game game doesn't actually resume until the user then presses an arrow key.

If the arrow key is a change in direction when when the game was paused, the snake's next move should be in the new direction indicated by the player's key-press.

Too Fast

The snake goes too fast and the input lag makes it even worse... I do like the idea of snake java script so please continue working on it. You should add a scoreboard too!

When Snake starts on a tile initially, it prevents game from working.

When Snake starts on a tile initially, it prevents game from working. You cannot get the tile even if you move away and then move back.

Game crashes when snake fills up board

When you beat the game you get:

Uncaught TypeError: Cannot set property '-1' of undefined
    at SNAKE.Food.me.randomlyPlaceFood (snake.js:541)
    at SNAKE.Board.me.foodEaten (snake.js:981)
    at SNAKE.Snake.me.eatFood (snake.js:365)
    at SNAKE.Snake.me.go (snake.js:334)
    at snake.js:335

In the console, and the game freezes.

edit: The line numbers are off since I was making changes.

Breaks when window size is changed

When you change the window size during a game it breaks.
It freezes and seems to re-initiate the game every time you resize the window.

Add allcontributors section

@all-contributors
please add @patorjk for code,doc,design,example.
please add @ultra17 for code,doc,design,bug.
please add @Rb64 for code,bug.

Hitting up and down with more than one length makes you run into yourself