Skip to content

Commit 1bc9036

Browse files
patorjkpatorjk
authored
Merge pull request patorjk#44 from yokesharun/master
Light Coloured Theme was added
2 parents 818492b + 934d220 commit 1bc9036

3 files changed

Lines changed: 172 additions & 20 deletions

File tree

‎css/light-snake.css‎

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

‎index.html‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,44 @@
1212
-->
1313
<meta charset="utf-8">
1414
<title>JavaScript Snake</title>
15-
<link rel="icon" href="./css/images/favicon.ico">
16-
<link rel=stylesheet id=style type=text/css href=./css/main-snake.css />
17-
<button onclick=getTheme() id=themeToggle>Dark theme</button>
18-
<div id="mode-wrapper">Select which mode you would like to play in.<br /><button id="Easy">Easy</button><br /><button id="Medium">Medium</button><br /><button id="Difficult">Difficult</button></div>
15+
16+
<link rel=stylesheet id=style type=text/css href=./css/light-snake.css />
17+
<h4>Theme
18+
<select onchange="getTheme()" id="select">
19+
<option>Light Theme</option>
20+
<option>Main Theme</option>
21+
<option>Dark Theme</option>
22+
<option>Revert To Original</option>
23+
</select>
24+
</h4>
25+
<div id="mode-wrapper" style="display: inline; width: auto;">
26+
<h2>Select which mode you would like to play in.</h2>
27+
<button id="Easy">Easy</button><br />
28+
<button id="Medium">Medium</button><br />
29+
<button id="Difficult">Difficult</button>
30+
</div>
1931
<button id="high-score">Get your current high score for this game.</button>
2032
<script>
21-
var bool = true;
22-
function getTheme() {
23-
function changeTheme (theme, text) {
24-
document.getElementById('style').setAttribute('href', theme);
25-
document.getElementById('themeToggle').innerText = text;
26-
}
27-
28-
bool = !bool;
29-
var theme = bool ? 'css/dark-snake.css' : 'css/main-snake.css';
30-
var text = bool ? 'Light theme' : 'Dark theme';
31-
changeTheme(theme, text);
33+
function getTheme () {
34+
function changeTheme (Theme) {
35+
document.getElementById('style').setAttribute('href', Theme);
36+
}
37+
var index = document.getElementById("select").selectedIndex;
38+
switch (index) {
39+
case 0:
40+
changeTheme('css/light-snake.css');
41+
break;
42+
case 1:
43+
changeTheme('css/main-snake.css');
44+
break;
45+
case 2:
46+
changeTheme('css/dark-snake.css');
47+
break;
48+
default:
49+
changeTheme('css/light-snake.css');
50+
break;
51+
}
52+
3253
}
3354
if (navigator.onLine && window.location.hostname === 'patorjk.com') {
3455
var _gaq = _gaq || [];
@@ -48,10 +69,12 @@
4869
</div>
4970
<script type="text/javascript" src="./js/min-snake.js"></script>
5071
<script type="text/javascript">
51-
var mySnakeBoard = new SNAKE.Board( {
52-
boardContainer: "game-area",
53-
fullScreen: true
54-
});
72+
73+
var mySnakeBoard = new SNAKE.Board( {
74+
boardContainer: "game-area",
75+
fullScreen: true
76+
});
77+
5578
</script>
5679
</body>
5780
</html>

‎js/snake.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -826,7 +826,7 @@ SNAKE.Board = SNAKE.Board || (function() {
826826
cLeft = 0;
827827
cWidth = getClientWidth()-5;
828828
cHeight = getClientHeight()-5;
829-
document.body.style.backgroundColor = "#FC5454";
829+
document.body.style.backgroundColor = "#f73378";
830830
} else {
831831
cTop = config.top;
832832
cLeft = config.left;

0 commit comments

Comments
 (0)