Skip to content

Commit 58fe8d9

Browse files
patorjkpatorjk
authored
Merge branch 'master' into snake-pause-functions
2 parents 3de7b6a + a3ac62e commit 58fe8d9

8 files changed

Lines changed: 403 additions & 106 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ http://patorjk.com/games/snake
1818
## How to use
1919
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.
2020

21-
var mySnakeBoard = new SNAKE.Board( {
21+
const mySnakeBoard = new SNAKE.Board( {
2222
boardContainer: "game-area",
2323
fullScreen: false,
2424
width: 580,

‎css/black-snake.css‎

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

‎css/images/neon-body-snakeblock.png‎

5.08 KB
Loading

‎css/images/neon-dead-snakeblock.png‎

5.08 KB
Loading

‎css/neon-snake.css‎

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

‎index.html‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,17 @@
2727

2828
function getTheme () {
2929
function changeTheme(themeUrl) {
30-
var elm = document.getElementById("style");
30+
const elm = document.getElementById("style");
3131
elm && elm.remove();
3232

33-
var newCss = document.createElement("link");
33+
const newCss = document.createElement("link");
3434
newCss.id = "style";
3535
newCss.rel = "stylesheet";
3636
newCss.type = "text/css";
3737
newCss.href = themeUrl;
3838
document.head.appendChild(newCss);
3939
}
40-
var index = document.getElementById("select").selectedIndex;
40+
const index = document.getElementById("select").selectedIndex;
4141
switch (index) {
4242
case 0:
4343
changeTheme('css/light-snake.css?' + Math.random());
@@ -57,9 +57,14 @@
5757
case 5:
5858
changeTheme('css/Senura-snake.css?' + Math.random());
5959
break;
60-
case 6:
60+
case 6:
6161
changeTheme('css/head-snake.css?' + Math.random());
6262
break;
63+
case 7:
64+
changeTheme("css/black-snake.css?" + Math.random());
65+
case 8:
66+
changeTheme('css/neon-snake.css?' + Math.random());
67+
break;
6368
default:
6469
changeTheme('css/main-snake.css?' + Math.random());
6570
break;
@@ -70,14 +75,14 @@
7075
}
7176

7277
if (navigator.onLine && window.location.hostname === 'patorjk.com') {
73-
var _gaq = _gaq || [];
78+
const _gaq = _gaq || [];
7479
_gaq.push(['_setAccount', 'UA-3312460-1']);
7580
_gaq.push(['_trackPageview']);
7681

7782
(function() {
78-
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
83+
const ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
7984
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
80-
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
85+
const s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
8186
})();
8287
}
8388
</script>
@@ -94,6 +99,8 @@
9499
<option>Matrix Theme by Geahad Haymor</option>
95100
<option>Theme by Senura Ratnayake</option>
96101
<option>Snake Head Theme by Rb64</option>
102+
<option>Black and purple Theme by LucassSantoss</option>
103+
<option>Neon Theme by Daisy21000</option>
97104
</select>
98105
</div>
99106
<div style="display:inline-block;margin-right:10px;">
@@ -126,7 +133,7 @@ <h2>Select which mode you would like to play in.</h2>
126133
<script type="text/javascript" src="./js/init.js"></script>
127134
<script type="text/javascript">
128135
function go_full_screen() {
129-
var elem = document.documentElement;
136+
const elem = document.documentElement;
130137
try {
131138
if (elem.requestFullscreen) {
132139
elem.requestFullscreen();
@@ -144,4 +151,4 @@ <h2>Select which mode you would like to play in.</h2>
144151
}
145152
</script>
146153
</body>
147-
</html>
154+
</html>

‎js/init.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
var mySnakeBoard = new SNAKE.Board({
1+
const mySnakeBoard = new SNAKE.Board({
22
boardContainer: "game-area",
33
fullScreen: true,
44
premoveOnPause: false
5-
});
5+
});

0 commit comments

Comments
 (0)