patorjk / javascript-snake Goto Github PK
View Code? Open in Web Editor NEWThe game of Snake written in JavaScript.
License: MIT License
The game of Snake written in JavaScript.
License: MIT License
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;
}
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
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.
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!
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
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...
@all-contributors
please add @patorjk for code,doc,design,example.
please add @ultra17 for code,doc,design,bug.
please add @Rb64 for code,bug.
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
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
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.
I think it would be cool if the site would automatically when the user moves to different tab
There isn's any json file included in the github repo. What should such a file contain?
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 :)
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?
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.
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.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.