patorjk / javascript-snake Goto Github PK

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.

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

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 :)

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.

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

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

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.

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

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.

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.

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?

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.

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.

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

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.

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

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

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

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!

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

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:

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

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.