Skip to content

Commit d3b6826

Browse files
yokesharunyokesharun
committed
Light Theme was added
1 parent 02873c3 commit d3b6826

3 files changed

Lines changed: 158 additions & 13 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: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,21 @@
1111
1212
-->
1313
<title>JavaScript Snake</title>
14-
<link rel=stylesheet id=style type=text/css href=./css/main-snake.css />
15-
<button onclick=getTheme()>Click to use this theme.</button>
16-
<select id="select">
17-
<option>Dark Theme</option>
18-
<option>Revert To Original</option>
19-
</select>
20-
<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>
14+
<link rel=stylesheet id=style type=text/css href=./css/light-snake.css />
15+
<h4>Theme
16+
<select onchange="getTheme()" id="select">
17+
<option>Light Theme</option>
18+
<option>Main Theme</option>
19+
<option>Dark Theme</option>
20+
<option>Revert To Original</option>
21+
</select>
22+
</h4>
23+
<div id="mode-wrapper" style="display: inline; width: auto;">
24+
<h2>Select which mode you would like to play in.</h2>
25+
<button id="Easy">Easy</button><br />
26+
<button id="Medium">Medium</button><br />
27+
<button id="Difficult">Difficult</button>
28+
</div>
2129
<button id="high-score">Get your current high score for this game.</button>
2230
<script>
2331
function getTheme () {
@@ -27,9 +35,17 @@
2735
var index = document.getElementById("select").selectedIndex;
2836
switch (index) {
2937
case 0:
38+
changeTheme('css/light-snake.css');
39+
break;
40+
case 1:
41+
changeTheme('css/main-snake.css');
42+
break;
43+
case 2:
3044
changeTheme('css/dark-snake.css');
3145
break;
32-
case 1: changeTheme('css/main-snake.css');
46+
default:
47+
changeTheme('css/light-snake.css');
48+
break;
3349
}
3450
}
3551
if (navigator.onLine && window.location.hostname === 'patorjk.com') {
@@ -50,10 +66,10 @@
5066
</div>
5167
<script type="text/javascript" src="./js/snake.js"></script>
5268
<script type="text/javascript">
53-
var mySnakeBoard = new SNAKE.Board( {
54-
boardContainer: "game-area",
55-
fullScreen: true
56-
});
69+
var mySnakeBoard = new SNAKE.Board( {
70+
boardContainer: "game-area",
71+
fullScreen: true
72+
});
5773
</script>
5874
</body>
5975
</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)