Skip to content

Commit b0fef16

Browse files
patorjkpatorjk
committedNov 29, 2015
Merge pull request patorjk#13 from Ultra17/master
Implement: Optional CSS swapping. High-score recording on localstorage. Different difficulty modes (Easy, Medium, Difficult).
2 parents 2c405e0 + 9daf3b1 commit b0fef16

7 files changed

+223
-18
lines changed
 

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@ initialized in div tags within a page. Example:
1616
});
1717
1818
The comments are formatted a little strange because at the time I was playing
19-
around with YUI Doc.
19+
around with YUI Doc.

‎css/dark-snake.css

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

‎css/images/dark-snakeblock.png

1.01 KB
Loading

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

1.22 KB
Loading

‎css/snake.css ‎css/main-snake.css

+14-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,19 @@ body {
1313
padding:0px;
1414
}
1515

16+
#high-score {
17+
position: relative;
18+
left: 200px;
19+
bottom: 50px;
20+
}
21+
22+
#mode-wrapper {
23+
color: #ffffff;
24+
font-family: Verdana, arial, helvetica, sans-serif;
25+
font-size: 14px;
26+
27+
}
28+
1629
#game-area:focus { outline: none; }
1730

1831
a.snake-link, a.snake-link:link, a.snake-link:visited {
@@ -126,4 +139,4 @@ a.snake-link:hover {
126139
margin-left: -158px;
127140
text-align: center;
128141
display: none;
129-
}
142+
}

‎index.htm ‎index.html

+24-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,37 @@
11
<!DOCTYPE html>
2-
<html manifest="snake.appcache">
2+
<!--<html manifest="snake.appcache">-->
33
<head>
44
<!--
55
66
JavaScript Snake
77
By Patrick Gillespie
88
http://patorjk.com/games/snake
99
10-
Soure code is available here: https://github.com/patorjk/JavaScript-Snake
10+
Source code is available here: https://github.com/patorjk/JavaScript-Snake
1111
1212
-->
1313
<title>JavaScript Snake</title>
14-
<link rel="stylesheet" type="text/css" href="./css/snake.css" />
15-
16-
<script type="text/javascript">
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>
21+
<button id="high-score">Get your current high score for this game.</button>
22+
<script>
23+
function getTheme () {
24+
function changeTheme (Theme) {
25+
document.getElementById('style').setAttribute('href', Theme);
26+
}
27+
var index = document.getElementById("select").selectedIndex;
28+
switch (index) {
29+
case 0:
30+
changeTheme('css/dark-snake.css');
31+
break;
32+
case 1: changeTheme('css/main-snake.css');
33+
}
34+
}
1735
if (navigator.onLine && window.location.hostname === 'patorjk.com') {
1836
var _gaq = _gaq || [];
1937
_gaq.push(['_setAccount', 'UA-3312460-1']);
@@ -38,4 +56,4 @@
3856
});
3957
</script>
4058
</body>
41-
</html>
59+
</html>

‎js/snake.js

+31-10
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ var SNAKE = SNAKE || {};
1818
* @param {Function} funct The function to execute when the event is triggered.
1919
* @param {Boolean} evtCapturing True to do event capturing, false to do event bubbling.
2020
*/
21-
2221
SNAKE.addEventListener = (function() {
2322
if (window.addEventListener) {
2423
return function(obj, event, funct, evtCapturing) {
@@ -125,9 +124,13 @@ SNAKE.Snake = SNAKE.Snake || (function() {
125124
snakeSpeed = 75,
126125
isDead = false,
127126
isPaused = false;
128-
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);
129133
// ----- public variables -----
130-
131134
me.snakeBody = {};
132135
me.snakeBody["b0"] = new SnakeBlock(); // create snake head
133136
me.snakeBody["b0"].row = config.startRow || 1;
@@ -324,6 +327,15 @@ SNAKE.Snake = SNAKE.Snake || (function() {
324327
* @method handleDeath
325328
*/
326329
me.handleDeath = function() {
330+
function recordScore () {
331+
var highScore = localStorage.jsSnakeHighScore;
332+
if (highScore == undefined) localStorage.setItem('jsSnakeHighScore', me.snakeLength);
333+
if (me.snakeLength > highScore) {
334+
alert('Congratulations! You have beaten your previous high score, which was ' + highScore + '.');
335+
localStorage.setItem('jsSnakeHighScore', me.snakeLength);
336+
}
337+
}
338+
recordScore();
327339
me.snakeHead.elm.style.zIndex = getNextHighestZIndex(me.snakeBody);
328340
me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-alive\b/,'')
329341
me.snakeHead.elm.className += " snake-snakebody-dead";
@@ -384,7 +396,6 @@ SNAKE.Snake = SNAKE.Snake || (function() {
384396
// ---------------------------------------------------------------------
385397
// Initialize
386398
// ---------------------------------------------------------------------
387-
388399
createBlocks(growthIncr*2);
389400
xPosShift[0] = 0;
390401
xPosShift[1] = playingBoard.getBlockWidth();
@@ -642,7 +653,7 @@ SNAKE.Board = SNAKE.Board || (function() {
642653
}
643654

644655
function createWelcomeElement() {
645-
var tmpElm = document.createElement("div");
656+
var tmpElm = document.createElement("div");
646657
tmpElm.id = "sbWelcome" + myId;
647658
tmpElm.className = "snake-welcome-dialog";
648659

@@ -653,8 +664,7 @@ SNAKE.Board = SNAKE.Board || (function() {
653664
}
654665
welcomeTxt.innerHTML = "JavaScript Snake<p></p>Use the <strong>arrow keys</strong> on your keyboard to play the game. " + fullScreenText + "<p></p>";
655666
var welcomeStart = document.createElement("button");
656-
welcomeStart.appendChild( document.createTextNode("Play Game"));
657-
667+
welcomeStart.appendChild(document.createTextNode("Play Game"));
658668
var loadGame = function() {
659669
SNAKE.removeEventListener(window, "keyup", kbShortcut, false);
660670
tmpElm.style.display = "none";
@@ -709,7 +719,6 @@ SNAKE.Board = SNAKE.Board || (function() {
709719
tmpElm.appendChild(tryAgainStart);
710720
return tmpElm;
711721
}
712-
713722
// ---------------------------------------------------------------------
714723
// public functions
715724
// ---------------------------------------------------------------------
@@ -877,7 +886,12 @@ SNAKE.Board = SNAKE.Board || (function() {
877886
myFood.randomlyPlaceFood();
878887

879888
// setup event listeners
880-
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);
881895
myKeyListener = function(evt) {
882896
if (!evt) var evt = window.event;
883897
var keyNum = (evt.which) ? evt.which : evt.keyCode;
@@ -967,4 +981,11 @@ SNAKE.Board = SNAKE.Board || (function() {
967981
}
968982

969983
}; // end return function
970-
})();
984+
})();
985+
function getHighScore () {
986+
document.getElementById('high-score').addEventListener('click', function () {
987+
if (localStorage.jsSnakeHighScore == undefined) alert('You have not played this game yet!');
988+
else
989+
alert('Your current high score is ' + localStorage.jsSnakeHighScore + '.'); });
990+
}
991+
getHighScore();

0 commit comments

Comments
 (0)
Please sign in to comment.