Skip to content

Commit 2c405e0

Browse files
patorjkpatorjk
committed
Added pause feature and wasd keys
1 parent ac16966 commit 2c405e0

7 files changed

Lines changed: 88 additions & 18 deletions

File tree

‎README.md‎

100644100755
File mode changed.

‎css/images/Thumbs.db‎

100644100755
File mode changed.

‎css/images/deadblock.png‎

100644100755
File mode changed.

‎css/images/snakeblock.png‎

100644100755
File mode changed.

‎css/snake.css‎

100644100755
Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,21 @@ a.snake-link:hover {
2323
color: #FfFf54;
2424
}
2525

26+
.snake-pause-screen {
27+
font-family: Verdana, arial, helvetica, sans-serif;
28+
font-size: 14px;
29+
position:absolute;
30+
width:300px;
31+
height:80px;
32+
text-align:center;
33+
top:50%;
34+
left:50%;
35+
margin-top:-40px;
36+
margin-left:-150px;
37+
display:none;
38+
background-color:black;
39+
color:white;
40+
}
2641

2742
.snake-panel-component {
2843
position: absolute;
@@ -88,7 +103,7 @@ a.snake-link:hover {
88103
top: 50%;
89104
left: 50%;
90105
width: 300px;
91-
height: 150px;
106+
/*height: 150px;*/
92107
margin-top: -100px;
93108
margin-left: -158px;
94109
text-align: center;

‎index.htm‎

100644100755
Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html manifest="snake.appcache">
33
<head>
44
<!--
55
66
JavaScript Snake
77
By Patrick Gillespie
88
http://patorjk.com/games/snake
99
10-
Terms of Re-Use:
11-
- If you're interested in using this app (which includes this file, patorjk.com/games/snake/snake.js and
12-
patorjk.com/games/snake/style.css) on your website, I give you permission as long as you link back to
13-
patorjk.com somewhere noticable in your application or on the website the app is hosted on.
14-
- As long as that condition is met, this app is free for you to build on and play around with.
10+
Soure code is available here: https://github.com/patorjk/JavaScript-Snake
1511
1612
-->
1713
<title>JavaScript Snake</title>
1814
<link rel="stylesheet" type="text/css" href="./css/snake.css" />
15+
16+
<script type="text/javascript">
17+
if (navigator.onLine && window.location.hostname === 'patorjk.com') {
18+
var _gaq = _gaq || [];
19+
_gaq.push(['_setAccount', 'UA-3312460-1']);
20+
_gaq.push(['_trackPageview']);
21+
22+
(function() {
23+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
24+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
25+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
26+
})();
27+
}
28+
</script>
1929
</head>
2030
<body>
2131
<div id="game-area" tabindex="0">

‎js/snake.js‎

Lines changed: 56 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,8 @@ SNAKE.Snake = SNAKE.Snake || (function() {
123123
xPosShift = [],
124124
yPosShift = [],
125125
snakeSpeed = 75,
126-
isDead = false;
126+
isDead = false,
127+
isPaused = false;
127128

128129
// ----- public variables -----
129130

@@ -179,6 +180,13 @@ SNAKE.Snake = SNAKE.Snake || (function() {
179180

180181
// ----- public methods -----
181182

183+
me.setPaused = function(val) {
184+
isPaused = val;
185+
};
186+
me.getPaused = function() {
187+
return isPaused;
188+
};
189+
182190
/**
183191
* This method is called when a user presses a key. It logs arrow key presses in "moveQueue", which is used when the snake needs to make its next move.
184192
* @method handleArrowKeys
@@ -192,28 +200,35 @@ SNAKE.Snake = SNAKE.Snake || (function() {
192200
2
193201
*/
194202
me.handleArrowKeys = function(keyNum) {
195-
if (isDead) {return;}
203+
if (isDead || isPaused) {return;}
196204

197205
var snakeLength = me.snakeLength;
198206
var lastMove = moveQueue[0] || currentDirection;
199207

208+
//console.log("lastmove="+lastMove);
209+
//console.log("dir="+keyNum);
210+
200211
switch (keyNum) {
201212
case 37:
213+
case 65:
202214
if ( lastMove !== 1 || snakeLength === 1 ) {
203215
moveQueue.unshift(3); //SnakeDirection = 3;
204216
}
205217
break;
206218
case 38:
219+
case 87:
207220
if ( lastMove !== 2 || snakeLength === 1 ) {
208221
moveQueue.unshift(0);//SnakeDirection = 0;
209222
}
210223
break;
211224
case 39:
225+
case 68:
212226
if ( lastMove !== 3 || snakeLength === 1 ) {
213227
moveQueue.unshift(1); //SnakeDirection = 1;
214228
}
215229
break;
216230
case 40:
231+
case 83:
217232
if ( lastMove !== 0 || snakeLength === 1 ) {
218233
moveQueue.unshift(2);//SnakeDirection = 2;
219234
}
@@ -232,6 +247,11 @@ SNAKE.Snake = SNAKE.Snake || (function() {
232247
myDirection = currentDirection,
233248
grid = playingBoard.grid; // cache grid for quicker lookup
234249

250+
if (isPaused === true) {
251+
setTimeout(function(){me.go();}, snakeSpeed);
252+
return;
253+
}
254+
235255
me.snakeTail = newHead.prev;
236256
me.snakeHead = newHead;
237257

@@ -260,7 +280,7 @@ SNAKE.Snake = SNAKE.Snake || (function() {
260280

261281
if (grid[newHead.row][newHead.col] === 0) {
262282
grid[newHead.row][newHead.col] = 1;
263-
setTimeout(function(){me.go();}, snakeSpeed);
283+
setTimeout(function(){me.go();}, snakeSpeed);
264284
} else if (grid[newHead.row][newHead.col] > 0) {
265285
me.handleDeath();
266286
} else if (grid[newHead.row][newHead.col] === playingBoard.getGridFoodValue()) {
@@ -287,7 +307,7 @@ SNAKE.Snake = SNAKE.Snake || (function() {
287307
index = "b" + me.snakeLength++;
288308
me.snakeBody[index] = blocks[ii];
289309
me.snakeBody[index].prev = prevNode;
290-
me.snakeBody[index].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'');
310+
me.snakeBody[index].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'')
291311
me.snakeBody[index].elm.className += " snake-snakebody-alive";
292312
prevNode.next = me.snakeBody[index];
293313
prevNode = me.snakeBody[index];
@@ -305,7 +325,7 @@ SNAKE.Snake = SNAKE.Snake || (function() {
305325
*/
306326
me.handleDeath = function() {
307327
me.snakeHead.elm.style.zIndex = getNextHighestZIndex(me.snakeBody);
308-
me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-alive\b/,'');
328+
me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-alive\b/,'')
309329
me.snakeHead.elm.className += " snake-snakebody-dead";
310330

311331
isDead = true;
@@ -346,12 +366,12 @@ SNAKE.Snake = SNAKE.Snake || (function() {
346366
for (var ii = 0; ii < blocks.length; ii++) {
347367
blocks[ii].elm.style.left = "-1000px";
348368
blocks[ii].elm.style.top = "-1000px";
349-
blocks[ii].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'');
369+
blocks[ii].elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'')
350370
blocks[ii].elm.className += " snake-snakebody-alive";
351371
}
352372

353373
blockPool.concat(blocks);
354-
me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'');
374+
me.snakeHead.elm.className = me.snakeHead.elm.className.replace(/\bsnake-snakebody-dead\b/,'')
355375
me.snakeHead.elm.className += " snake-snakebody-alive";
356376
me.snakeHead.row = config.startRow || 1;
357377
me.snakeHead.col = config.startCol || 1;
@@ -556,8 +576,9 @@ SNAKE.Board = SNAKE.Board || (function() {
556576
mySnake,
557577
boardState = 1, // 0: in active; 1: awaiting game start; 2: playing game
558578
myKeyListener,
579+
isPaused = false,//note: both the board and the snake can be paused
559580
// Board components
560-
elmContainer, elmPlayingField, elmAboutPanel, elmLengthPanel, elmWelcome, elmTryAgain;
581+
elmContainer, elmPlayingField, elmAboutPanel, elmLengthPanel, elmWelcome, elmTryAgain, elmPauseScreen;
561582

562583
// --- public variables ---
563584
me.grid = [];
@@ -575,6 +596,10 @@ SNAKE.Board = SNAKE.Board || (function() {
575596
elmContainer.focus();
576597
}, false);
577598

599+
elmPauseScreen = document.createElement("div");
600+
elmPauseScreen.className = "snake-pause-screen";
601+
elmPauseScreen.innerHTML = "<div style='padding:10px;'>[Paused]<p/>Press [space] to unpause.</div>";
602+
578603
elmAboutPanel = document.createElement("div");
579604
elmAboutPanel.className = "snake-panel-component";
580605
elmAboutPanel.innerHTML = "<a href='http://patorjk.com/blog/software/' class='snake-link'>more patorjk.com apps</a> - <a href='https://github.com/patorjk/JavaScript-Snake' class='snake-link'>source code</a>";
@@ -596,6 +621,8 @@ SNAKE.Board = SNAKE.Board || (function() {
596621

597622
elmContainer.className = "snake-game-container";
598623

624+
elmPauseScreen.style.zIndex = 10000;
625+
elmContainer.appendChild(elmPauseScreen);
599626
elmContainer.appendChild(elmPlayingField);
600627
elmContainer.appendChild(elmAboutPanel);
601628
elmContainer.appendChild(elmLengthPanel);
@@ -687,6 +714,19 @@ SNAKE.Board = SNAKE.Board || (function() {
687714
// public functions
688715
// ---------------------------------------------------------------------
689716

717+
me.setPaused = function(val) {
718+
isPaused = val;
719+
mySnake.setPaused(val);
720+
if (isPaused) {
721+
elmPauseScreen.style.display = "block";
722+
} else {
723+
elmPauseScreen.style.display = "none";
724+
}
725+
};
726+
me.getPaused = function() {
727+
return isPaused;
728+
};
729+
690730
/**
691731
* Resets the playing board for a new game.
692732
* @method resetBoard
@@ -771,7 +811,7 @@ SNAKE.Board = SNAKE.Board || (function() {
771811
if (!elmPlayingField) {createBoardElements();} // create playing field
772812

773813
// calculate width of our game container
774-
var cWidth, cHeight, cTop, cLeft;
814+
var cWidth, cHeight;
775815
if (config.fullScreen === true) {
776816
cTop = 0;
777817
cLeft = 0;
@@ -843,7 +883,7 @@ SNAKE.Board = SNAKE.Board || (function() {
843883
var keyNum = (evt.which) ? evt.which : evt.keyCode;
844884

845885
if (me.getBoardState() === 1) {
846-
if ( !(keyNum >= 37 && keyNum <= 40) ) {return;} // if not an arrow key, leave
886+
if ( !(keyNum >= 37 && keyNum <= 40) && !(keyNum === 87 || keyNum === 65 || keyNum === 83 || keyNum === 68)) {return;} // if not an arrow key, leave
847887

848888
// This removes the listener added at the #listenerX line
849889
SNAKE.removeEventListener(elmContainer, "keydown", myKeyListener, false);
@@ -852,6 +892,11 @@ SNAKE.Board = SNAKE.Board || (function() {
852892
if (!evt) var evt = window.event;
853893
var keyNum = (evt.which) ? evt.which : evt.keyCode;
854894

895+
//console.log(keyNum);
896+
if (keyNum === 32) {
897+
me.setPaused(!me.getPaused());
898+
}
899+
855900
mySnake.handleArrowKeys(keyNum);
856901

857902
evt.cancelBubble = true;
@@ -922,4 +967,4 @@ SNAKE.Board = SNAKE.Board || (function() {
922967
}
923968

924969
}; // end return function
925-
})();
970+
})();

0 commit comments

Comments
 (0)