Skip to content

Commit ba1cb2a

Browse files
ComputerkrackComputerkrack
authored
Merge pull request #1 from Computerkrack/localStorage-recentGames
local storage
2 parents f853db7 + 4e7a716 commit ba1cb2a

File tree

3 files changed

+110
-33
lines changed

3 files changed

+110
-33
lines changed

‎index.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@
1010
<link rel="stylesheet" href="snake.css">
1111
</head>
1212
<body>
13+
<div id="controlPanel" class="controlPanel">
14+
<button class="clearLS" id="clearLSButton">Clear Local Storage</button>
15+
</div>
1316
<div class="wrapper">
1417
<div class="CenterBoard">
1518
<h1>Snake</h1>
16-
<p><button class="ModalButton" id="ModalButton">Show Controls</button></p>
19+
<p><button class="modalButton" id="ModalButton">Show Controls</button></p>
1720

1821
<div class="tg-wrap"><table class="tg">
1922
<thead>
@@ -36,7 +39,7 @@ <h1>Snake</h1>
3639
<canvas id="board"></canvas>
3740
</div>
3841
<div class="leftscore">
39-
<h2>Your Best Game:</h2>
42+
<h2>This Sessions Best Game:</h2>
4043
<div class="tg-wrap"><table class="tg" id="highScoreTable">
4144
<thead>
4245
<tr>
@@ -83,7 +86,7 @@ <h2>Recent Games:</h2>
8386
<div id="myModal" class="cmodal">
8487

8588
<div class="modal-content">
86-
<button style="float: right" id="close">x</button>
89+
<button class="button" style="float: right" id="close">x</button>
8790
<h2>Controls:</h2>
8891
<h3>
8992
<b>W / ↑ / K</b> - To move up<br />

‎snake.css

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
1+
.controlPanel {
2+
display: block;
3+
}
4+
.clearLS {
5+
color: black;
6+
background-color: red;
7+
border-radius: 42px;
8+
}
29
.CenterBoard {
310
float: right;
411
margin-right: 25%;
@@ -19,14 +26,16 @@
1926
margin-top: 42px;
2027
}
2128
.showGamesButton {
22-
display: block;
29+
display:block;
30+
border-radius: 4.2px;
2331
}
2432
.rgtable {
2533
margin-top: 10px;
2634
display: none;
2735
}
2836
.restartbut {
29-
margin-top: 10px
37+
margin-top: 10px;
38+
border-radius: 42px;
3039
}
3140

3241

@@ -53,6 +62,9 @@
5362
overflow: auto;
5463
background-color: rgba(0, 0, 0, 0);
5564
}
65+
.button {
66+
border-radius: 42px;
67+
}
5668
.dmodal {
5769
position: fixed;
5870
text-align: center;
@@ -79,14 +91,15 @@
7991
padding: 20px;
8092
border: 10px solid #ff0000;
8193
border-radius: 50px;
82-
width: 30%
94+
width: 30%;
8395
}
8496

8597
.close {
8698
color: #ff0000;
8799
float: right;
88100
font-size: 28px;
89101
font-weight: bold;
102+
border-radius: 100%;
90103
}
91104
.close:hover,
92105
.close:focus {

‎snake.js

Lines changed: 87 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// ---- temp only for development ----
2-
let temp = '!!temp42!!';
2+
let temp;
3+
temp = '!!temp42!!';
34
// ---- JS ----
45
let board;
56
let blockSize = 25 % screen.height;
@@ -15,9 +16,11 @@ let speedY = 0;
1516
let snakeBody = [];
1617
let gameOver = false;
1718
let gameRunning = false;
18-
let RGArr = [];
1919
let recentGame = [];
20-
let NowUsedRGArr = RGArr;
20+
let RGArr = [];
21+
// let HSArr = [0,0,0,0];
22+
// let newHighScoreWritten = false;
23+
2124

2225
// ----- from/for HTML ----
2326
let liveScore = document.getElementById("score");
@@ -40,10 +43,11 @@ let LiveHighScore = document.getElementById("highScore");
4043
let LiveHighSeconds = document.getElementById("highSeconds");
4144
let LiveHighSnakeLength = document.getElementById("highBodyLength");
4245
let LiveHighFootEaten = document.getElementById("highColected");
43-
let highScore;
44-
let highSeconds;
45-
let highLength;
46-
let highColected;
46+
let highScore = undefined;
47+
let highSeconds = undefined;
48+
let highLength = undefined;
49+
let highColected = undefined;
50+
let LSClearButton = document.getElementById("clearLSButton");
4751

4852
// --------------------------- End of Variables -------------------------------------------------------------
4953

@@ -78,6 +82,11 @@ function restart() {
7882
}
7983

8084
function start () {
85+
localStorageReader();
86+
updateHighScore();
87+
for (let i = 0; i < RGArr.length; i++) {
88+
recentGamesTableWriter(i);
89+
}
8190
document.getElementById("deathModal").style.display = 'none';
8291
document.getElementById("ModalButton").hidden = false;
8392
board = document.getElementById("board");
@@ -89,7 +98,9 @@ function start () {
8998
setInterval(updates, 100);
9099
setInterval(secondsCounter, 1000);
91100
setInterval(sendToHTML, 1);
92-
setInterval(sendToHTMLgameOver, 100);
101+
setInterval(updateHighScore, 1000);
102+
setInterval(hide, 1000);
103+
setInterval(localStorageWriter, 10000);
93104
}
94105

95106

@@ -216,6 +227,7 @@ function moveUpdate() {
216227
document.getElementById("ModalButton").hidden = false;
217228
document.getElementById("deathModal").style.display = 'block';
218229
deleteRGTable();
230+
sendToHTMLgameOver();
219231
addRecentGame(newScore, secondsCounted, bodyLength, collectedFood);
220232
for (let i = 0; i < RGArr.length; i++) {
221233
recentGamesTableWriter(i);
@@ -241,6 +253,7 @@ function sendToHTML() {
241253
}
242254

243255
function sendToHTMLgameOver() {
256+
updateHighScore();
244257
score = newScore;
245258
seconds = secondsCounted;
246259
length = bodyLength;
@@ -249,38 +262,56 @@ function sendToHTMLgameOver() {
249262
finalScore.innerHTML = score;
250263
finalBodyLength.innerHTML= length;
251264
finalFood.innerHTML = food;
252-
updateHighScore();
253265
}
254266

255267
function updateHighScore() {
256-
if (newScore+secondsCounted+bodyLength+collectedFood > highScore+highSeconds+highLength+highColected) {
257-
highScore = newScore
258-
highSeconds = secondsCounted
259-
highLength = bodyLength
260-
highColected = collectedFood
261-
} else if (RGArr.length === 2) {
262-
highScore = newScore
268+
// if (HSArr.length < 4) {
269+
// writeHighScore();
270+
// }
271+
if (newScore + secondsCounted + bodyLength + collectedFood > highScore + highSeconds + highLength + highColected) {
272+
highScore = newScore;
273+
highSeconds = secondsCounted;
274+
highLength = bodyLength;
275+
highColected = collectedFood;
276+
} else if (RGArr === [0, 0, 0, 0]) {
277+
highScore = newScore;
278+
highSeconds = secondsCounted;
279+
highLength = bodyLength;
280+
highColected = collectedFood;
281+
}
282+
if (highScore === undefined) {
283+
highScore = newScore;
263284
highSeconds = secondsCounted
264-
highLength = bodyLength
265-
highColected = collectedFood
285+
highLength = bodyLength;
286+
highColected = collectedFood;
266287
}
267-
LiveHighScore.innerHTML = highScore
268-
LiveHighSeconds.innerHTML = highSeconds
269-
LiveHighSnakeLength.innerHTML = highLength
270-
LiveHighFootEaten.innerHTML = highColected
288+
LiveHighScore.innerHTML = highScore;
289+
LiveHighSeconds.innerHTML = highSeconds;
290+
LiveHighSnakeLength.innerHTML = highLength;
291+
LiveHighFootEaten.innerHTML = highColected;
271292
}
272293

294+
// function writeHighScore() {
295+
// HSArr = JSON.parse(localStorage.getItem("LHSArr"));
296+
// alert(HSArr)
297+
// highScore = HSArr[0];
298+
// highSeconds = HSArr[1];
299+
// highLength = HSArr[2];
300+
// highColected = HSArr[3];
301+
//
302+
// }
303+
273304
function recentGamesTableWriter (i) {
274305
let table = document.getElementById("recentGamesTable");
275306
let row = table.insertRow(1);
276307
let cell1= row.insertCell(0);
277308
let cell2 = row.insertCell(1);
278309
let cell3 = row.insertCell(2);
279310
let cell4 = row.insertCell(3);
280-
cell1.innerHTML = NowUsedRGArr[i][0].toString();
281-
cell2.innerHTML = NowUsedRGArr[i][1].toString();
282-
cell3.innerHTML = NowUsedRGArr[i][2].toString();
283-
cell4.innerHTML = NowUsedRGArr[i][3].toString();
311+
cell1.innerHTML = RGArr[i][0].toString();
312+
cell2.innerHTML = RGArr[i][1].toString();
313+
cell3.innerHTML = RGArr[i][2].toString();
314+
cell4.innerHTML = RGArr[i][3].toString();
284315
}
285316

286317
function addRecentGame(score, seconds, length, colected) {
@@ -294,4 +325,34 @@ function deleteRGTable () {
294325
for (let i = RGTable.rows.length; i > 1; i--) {
295326
RGTable.deleteRow(-1)
296327
}
328+
}
329+
330+
function localStorageWriter () {
331+
localStorage.deleteArray(RGArr);
332+
// localStorage.deleteArray(HSArr);
333+
localStorage.setItem("LRGArr", JSON.stringify(RGArr));
334+
// localStorage.setItem("LHSArr", JSON.stringify(HSArr));
335+
}
336+
function localStorageReader () {
337+
RGArr = JSON.parse(localStorage.getItem("LRGArr"));
338+
}
339+
340+
//---------------
341+
Storage.prototype.deleteArray = function(arrayName) {
342+
this.removeItem(arrayName);
343+
}
344+
//--------------
345+
346+
347+
function hide () {
348+
if(gameRunning) {
349+
LSClearButton.style.display = "none";
350+
} else {
351+
LSClearButton.style.display = "block";
352+
}
353+
}
354+
LSClearButton.onclick = function () {
355+
localStorage.clear();
356+
deleteRGTable();
357+
RGArr = [];
297358
}

0 commit comments

Comments
 (0)