Skip to content

Commit 08391dd

Browse files
patorjkpatorjk
committed
general cleanup and fixes
1 parent 1bc9036 commit 08391dd

File tree

5 files changed

+104
-76
lines changed

5 files changed

+104
-76
lines changed

‎css/dark-snake.css‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,32 @@ JavaScript Snake
33
By Patrick Gillespie
44
http://patorjk.com/games/snake
55
*/
6-
select {
7-
border: black;
8-
color: #938996;
9-
background: black;
10-
}
116

12-
button {
13-
border: #868484;
14-
color: #938996;
15-
background: #312e44;
7+
body {
8+
margin:0px;
9+
padding:0px;
10+
background-color:#3E2E44;
1611
}
1712

18-
body {
19-
margin:5px;
20-
padding:5px;
21-
background-color: #000
13+
.snake-toolbar {
14+
color: #938996;
2215
}
2316

2417
#game-area {
25-
margin:0px;
18+
margin:10px;
2619
padding:0px;
2720
}
2821

29-
#high-score {
30-
position: relative;
31-
left: 200px;
32-
bottom: 50px;
33-
}
34-
3522
#game-area:focus { outline: none; }
3623

3724
#mode-wrapper {
3825
font-family: Verdana, arial, helvetica, sans-serif;
3926
font-size: 14px;
40-
color: 938996;
27+
color: #938996;
4128
}
4229

4330
a.snake-link, a.snake-link:link, a.snake-link:visited {
44-
color: 938996;
31+
color: #938996;
4532
}
4633

4734
a.snake-link:hover {
@@ -61,14 +48,14 @@ a.snake-link:hover {
6148
margin-left:-150px;
6249
display:none;
6350
background-color:#3E2E44;
64-
color: 938996;
51+
color: #938996;
6552
}
6653

6754
.snake-panel-component {
6855
position: absolute;
6956
font-family: Verdana, arial, helvetica, sans-serif;
7057
font-size: 14px;
71-
color: 938996;
58+
color: #938996;
7259
text-align: center;
7360
background-color: #3E2E44;
7461
padding: 8px;

‎css/light-snake.css‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,13 @@ http://patorjk.com/games/snake
77
body {
88
margin: 0px;
99
padding: 0px;
10+
background-color: #f73378;
1011
}
1112
#game-area {
12-
margin: 0px;
13+
margin: 10px;
1314
padding: 0px;
1415
}
15-
#high-score {
16-
position: relative;
17-
left: 200px;
18-
bottom: 50px;
19-
}
16+
2017
#mode-wrapper {
2118
color: #ffffff;
2219
font-family: Verdana, arial, helvetica, sans-serif;

‎css/main-snake.css‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,15 @@ By Patrick Gillespie
44
http://patorjk.com/games/snake
55
*/
66
body {
7-
margin:5px;
7+
margin:0px;
88
padding:0px;
9+
background-color: #FC5454;
910
}
1011

1112
#game-area {
12-
margin:0px;
13+
margin:10px;
1314
padding:0px;
14-
}
15-
16-
#high-score {
17-
position: relative;
18-
left: 200px;
19-
bottom: 50px;
15+
background-color: #FC5454;
2016
}
2117

2218
#mode-wrapper {

‎index.html‎

Lines changed: 54 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,18 @@
1313
<meta charset="utf-8">
1414
<title>JavaScript Snake</title>
1515

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>
31-
<button id="high-score">Get your current high score for this game.</button>
16+
<link rel=stylesheet id="style" type="text/css" href="./css/main-snake.css" />
17+
18+
<style>
19+
.snake-toolbar {
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
z-index:10000;
24+
padding: 5px;
25+
}
26+
</style>
27+
3228
<script>
3329
function getTheme () {
3430
function changeTheme (Theme) {
@@ -37,20 +33,23 @@ <h2>Select which mode you would like to play in.</h2>
3733
var index = document.getElementById("select").selectedIndex;
3834
switch (index) {
3935
case 0:
40-
changeTheme('css/light-snake.css');
36+
changeTheme('css/light-snake.css?' + Math.random());
4137
break;
4238
case 1:
43-
changeTheme('css/main-snake.css');
39+
changeTheme('css/main-snake.css?' + Math.random());
4440
break;
4541
case 2:
46-
changeTheme('css/dark-snake.css');
42+
changeTheme('css/dark-snake.css?' + Math.random());
4743
break;
4844
default:
49-
changeTheme('css/light-snake.css');
45+
changeTheme('css/main-snake.css?' + Math.random());
5046
break;
5147
}
52-
48+
setTimeout(function() {
49+
document.getElementById('game-area').focus();
50+
}, 10);
5351
}
52+
5453
if (navigator.onLine && window.location.hostname === 'patorjk.com') {
5554
var _gaq = _gaq || [];
5655
_gaq.push(['_setAccount', 'UA-3312460-1']);
@@ -65,9 +64,42 @@ <h2>Select which mode you would like to play in.</h2>
6564
</script>
6665
</head>
6766
<body>
67+
<div class="snake-toolbar">
68+
<div style="display:inline-block;margin-right:10px;">
69+
<span>Theme:</span>
70+
<select onchange="getTheme()" id="select">
71+
<option>Light Theme</option>
72+
<option selected>Main Theme</option>
73+
<option>Dark Theme</option>
74+
</select>
75+
</div>
76+
<div style="display:inline-block;margin-right:10px;">
77+
<span>Mode:</span>
78+
<select id="selectMode">
79+
<option value="100">Easy</option>
80+
<option value="75" selected>Medium</option>
81+
<option value="50">Hard</option>
82+
</select>
83+
</div>
84+
<div style="display:inline-block;margin-right:10px;">
85+
<button id="high-score">Your High Score</button>
86+
</div>
87+
</div>
88+
89+
<!--
90+
<h2>Select which mode you would like to play in.</h2>
91+
<button id="Easy">Easy</button><br />
92+
<button id="Medium">Medium</button><br />
93+
<button id="Difficult">Difficult</button>
94+
95+
<button id="high-score">Get your current high score for this game.</button>
96+
-->
97+
<div id="mode-wrapper" style="display: inline; width: auto;">
98+
</div>
99+
68100
<div id="game-area" tabindex="0">
69101
</div>
70-
<script type="text/javascript" src="./js/min-snake.js"></script>
102+
<script type="text/javascript" src="./js/snake.js"></script>
71103
<script type="text/javascript">
72104

73105
var mySnakeBoard = new SNAKE.Board( {

‎js/snake.js‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -124,12 +124,35 @@ SNAKE.Snake = SNAKE.Snake || (function() {
124124
snakeSpeed = 75,
125125
isDead = false,
126126
isPaused = false;
127-
function getMode (mode, speed) {
128-
document.getElementById(mode).addEventListener('click', function () { snakeSpeed = speed; });
129-
}
130-
getMode('Easy', 100);
131-
getMode('Medium', 75);
132-
getMode('Difficult', 50);
127+
128+
function setModeListener (mode, speed) {
129+
document.getElementById(mode).addEventListener('click', function () { snakeSpeed = speed; });
130+
}
131+
132+
var modeDropdown = document.getElementById('selectMode');
133+
if ( modeDropdown ) {
134+
modeDropdown.addEventListener('change', function(evt) {
135+
evt = evt || {};
136+
var val = evt.target ? parseInt(evt.target.value) : 75;
137+
138+
if (isNaN(val)) {
139+
val = 75;
140+
} else if (val < 50) {
141+
val = 75
142+
}
143+
144+
snakeSpeed = val;
145+
146+
setTimeout(function() {
147+
document.getElementById('game-area').focus();
148+
}, 10);
149+
});
150+
}
151+
152+
//setModeListener('Easy', 100);
153+
//setModeListener('Medium', 75);
154+
//setModeListener('Difficult', 50);
155+
133156
// ----- public variables -----
134157
me.snakeBody = {};
135158
me.snakeBody["b0"] = new SnakeBlock(); // create snake head
@@ -824,9 +847,9 @@ SNAKE.Board = SNAKE.Board || (function() {
824847
if (config.fullScreen === true) {
825848
cTop = 0;
826849
cLeft = 0;
827-
cWidth = getClientWidth()-5;
828-
cHeight = getClientHeight()-5;
829-
document.body.style.backgroundColor = "#f73378";
850+
cWidth = getClientWidth()-20;
851+
cHeight = getClientHeight()-20;
852+
830853
} else {
831854
cTop = config.top;
832855
cLeft = config.left;
@@ -885,13 +908,6 @@ SNAKE.Board = SNAKE.Board || (function() {
885908

886909
myFood.randomlyPlaceFood();
887910

888-
// setup event listeners
889-
function getMode (mode, speed) {
890-
document.getElementById(mode).addEventListener('click', function () { snakeSpeed = speed; });
891-
}
892-
getMode('Easy', 100);
893-
getMode('Medium', 75);
894-
getMode('Difficult', 50);
895911
myKeyListener = function(evt) {
896912
if (!evt) var evt = window.event;
897913
var keyNum = (evt.which) ? evt.which : evt.keyCode;

0 commit comments

Comments
 (0)