Skip to content

Commit 01d1a17

Browse files
mamamia5xmamamia5x
authored
Merge pull request patorjk#1 from patorjk/master
aaa
2 parents f18b3bd + 6def006 commit 01d1a17

13 files changed

Lines changed: 484 additions & 48 deletions

‎README.md‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
JavaScript Snake<br/>
2-
By Patrick Gillespie<br/>
3-
License: MIT<br/>
1+
# JavaScript Snake Game
2+
3+
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.
4+
5+
## Play and Edit the Game Online!
6+
7+
You can now play and edit the game live in codesandbox:
8+
9+
https://codesandbox.io/s/github/patorjk/JavaScript-Snake?file=/index.html
10+
11+
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.
12+
13+
Original game is located here:
14+
415
http://patorjk.com/games/snake
516

6-
This is a DOM-based game of Snake that I wrote in JavaScript a few years back.
717

8-
Other than the full screen mode demonstrated in the code, it can also be
9-
initialized in div tags within a page. Example:
18+
## How to use
19+
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.
1020

1121
var mySnakeBoard = new SNAKE.Board( {
1222
boardContainer: "game-area",
@@ -15,5 +25,4 @@ initialized in div tags within a page. Example:
1525
height:400
1626
});
1727
18-
The comments are formatted a little strange because at the time I was playing
19-
around with YUI Doc.
28+
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.

‎css/Senura-snake.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/*
2+
JavaScript Snake
3+
By Patrick Gillespie
4+
http://patorjk.com/games/snake
5+
*/
6+
7+
body {
8+
margin:0px;
9+
padding:0px;
10+
background-color:#000000;
11+
}
12+
13+
.snake-toolbar {
14+
color: #847a87;
15+
}
16+
17+
#game-area {
18+
margin:10px;
19+
padding:0px;
20+
}
21+
22+
#game-area:focus { outline: none; }
23+
24+
#mode-wrapper {
25+
font-family: Verdana, arial, helvetica, sans-serif;
26+
font-size: 14px;
27+
color: #f6f0f7;
28+
}
29+
30+
a.snake-link, a.snake-link:link, a.snake-link:visited {
31+
color: #605d61;
32+
}
33+
34+
a.snake-link:hover {
35+
color: #a500d6;
36+
}
37+
38+
.snake-pause-screen {
39+
font-family: Verdana, arial, helvetica, sans-serif;
40+
font-size: 14px;
41+
position:absolute;
42+
width:300px;
43+
height:80px;
44+
text-align:center;
45+
top:50%;
46+
left:50%;
47+
margin-top:-40px;
48+
margin-left:-150px;
49+
display:none;
50+
background-color:#ffffff;
51+
color: #938996;
52+
}
53+
54+
.snake-panel-component {
55+
position: absolute;
56+
font-family: Verdana, arial, helvetica, sans-serif;
57+
font-size: 14px;
58+
color: #cf6d6d;
59+
text-align: center;
60+
background-color: #550b70;
61+
padding: 8px;
62+
margin: 0px;
63+
}
64+
65+
.snake-snakebody-block {
66+
margin: 0px;
67+
padding: 0px;
68+
background-color: #eddff2;
69+
position: absolute;
70+
border: 0px solid black;
71+
background-repeat: no-repeat;
72+
}
73+
74+
.snake-snakebody-alive {
75+
background-image: url('./images/dark-snakeblock.png');
76+
}
77+
.snake-snakebody-dead {
78+
background-image: url('./images/dead-dark-snakeblock.png');
79+
}
80+
81+
.snake-food-block {
82+
margin: 0px;
83+
padding: 0px;
84+
background-color: black;
85+
border: 2px solid #000000;
86+
position: absolute;
87+
}
88+
89+
.snake-playing-field {
90+
margin: 0px;
91+
padding: 0px;
92+
position: absolute;
93+
background-color: #fcfcfc;
94+
border: 3px solid black;
95+
}
96+
97+
.snake-game-container {
98+
margin: 0px;
99+
padding: 0px;
100+
border-width: 0px;
101+
border-style: none;
102+
zoom: 1;
103+
background-color: #3E2E44;
104+
position: relative;
105+
}
106+
107+
.snake-welcome-dialog {
108+
padding: 8px;
109+
margin: 0px;
110+
background-color: black;
111+
color: #ab00de;
112+
font-family: Verdana, arial, helvetica, sans-serif;
113+
font-size: 14px;
114+
position: absolute;
115+
top: 50%;
116+
left: 50%;
117+
width: 300px;
118+
/*height: 150px;*/
119+
margin-top: -100px;
120+
margin-left: -158px;
121+
text-align: center;
122+
display: block;
123+
}
124+
125+
.snake-try-again-dialog, .snake-win-dialog {
126+
padding: 8px;
127+
margin: 0px;
128+
background-color: black;
129+
color: #ab00de;
130+
font-family: Verdana, arial, helvetica, sans-serif;
131+
font-size: 14px;
132+
position: absolute;
133+
top: 50%;
134+
left: 50%;
135+
width: 300px;
136+
height: 100px;
137+
margin-top: -75px;
138+
margin-left: -158px;
139+
text-align: center;
140+
display: none;
141+
}

‎css/images/matrix-food-block.png‎

723 Bytes
Loading

‎css/images/matrix-snake-block.png‎

508 Bytes
Loading

‎css/main-snake.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ body {
1212
#game-area {
1313
margin:10px;
1414
padding:0px;
15-
background-color: #FC5454;
1615
}
1716

1817
#mode-wrapper {
@@ -69,10 +68,10 @@ a.snake-link:hover {
6968
}
7069

7170
.snake-snakebody-alive {
72-
background-image: url('./images/snakeblock.png');
71+
background-image: url('./css/images/snakeblock.png'), url('./images/snakeblock.png');
7372
}
7473
.snake-snakebody-dead {
75-
background-image: url('./images/deadblock.png');
74+
background-image: url('./css/images/deadblock.png'), url('./images/deadblock.png');
7675
}
7776

7877
.snake-food-block {

‎css/matrix-snake.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
body {
2+
margin:0px;
3+
padding:0px;
4+
background-color: #00ff11;
5+
}
6+
7+
#game-area {
8+
margin:10px;
9+
padding:0px;
10+
background-color: #00ff11;
11+
}
12+
13+
#mode-wrapper {
14+
color: #000000;
15+
font-family: Verdana, arial, helvetica, sans-serif;
16+
font-size: 14px;
17+
18+
}
19+
20+
#game-area:focus { outline: none; }
21+
22+
a.snake-link, a.snake-link:link, a.snake-link:visited {
23+
color: #FCFC54;
24+
}
25+
26+
a.snake-link:hover {
27+
color: #FfFf54;
28+
}
29+
30+
.snake-pause-screen {
31+
font-family: Verdana, arial, helvetica, sans-serif;
32+
font-size: 14px;
33+
position:absolute;
34+
width:300px;
35+
height:80px;
36+
text-align:center;
37+
top:50%;
38+
left:50%;
39+
margin-top:-40px;
40+
margin-left:-150px;
41+
display:none;
42+
background-color:black;
43+
color:white;
44+
}
45+
46+
.snake-panel-component {
47+
position: absolute;
48+
font-family: Verdana, arial, helvetica, sans-serif;
49+
font-size: 14px;
50+
color: #000000;
51+
text-align: center;
52+
background-color: #00ff11;
53+
padding: 8px;
54+
margin: 0px;
55+
}
56+
57+
.snake-snakebody-block {
58+
margin: 0px;
59+
padding: 0px;
60+
background-color: #FF0000;
61+
position: absolute;
62+
border: 0px solid #000080;
63+
background-repeat: no-repeat;
64+
}
65+
66+
.snake-snakebody-alive {
67+
background-image: url('./images/matrix-snake-block.png');
68+
}
69+
.snake-snakebody-dead {
70+
background-image: url('./images/deadblock.png');
71+
}
72+
73+
.snake-food-block {
74+
margin: 0px;
75+
padding: 0px;
76+
background-color: #FF0000;
77+
border: 0px solid #000080;
78+
position: absolute;
79+
background-image: url("./images/matrix-food-block.png")
80+
}
81+
82+
.snake-playing-field {
83+
margin: 0px;
84+
padding: 0px;
85+
position: absolute;
86+
background-color: #000000;
87+
border: 0px solid #000000;
88+
}
89+
90+
.snake-game-container {
91+
margin: 0px;
92+
padding: 0px;
93+
border-width: 0px;
94+
border-style: none;
95+
zoom: 1;
96+
background-color: #00ff11;
97+
position: relative;
98+
}
99+
100+
.snake-welcome-dialog {
101+
padding: 8px;
102+
margin: 0px;
103+
background-color: #000000;
104+
color: #00ff11;
105+
font-family: Verdana, arial, helvetica, sans-serif;
106+
font-size: 14px;
107+
position: absolute;
108+
top: 50%;
109+
left: 50%;
110+
width: 300px;
111+
/height: 150px;/
112+
margin-top: -100px;
113+
margin-left: -158px;
114+
text-align: center;
115+
display: block;
116+
}
117+
118+
.snake-try-again-dialog, .snake-win-dialog {
119+
padding: 8px;
120+
margin: 0px;
121+
background-color: #000000;
122+
color: #ff0000;
123+
font-family: Verdana, arial, helvetica, sans-serif;
124+
font-size: 14px;
125+
position: absolute;
126+
top: 50%;
127+
left: 50%;
128+
width: 300px;
129+
height: 100px;
130+
margin-top: -75px;
131+
margin-left: -158px;
132+
text-align: center;
133+
display: none;
134+
}

0 commit comments

Comments
 (0)