Skip to content

Commit 1350e8c

Browse files
Coding-CactusCoding-Cactus
committed
did something
1 parent 63af580 commit 1350e8c

File tree

2 files changed

+173
-168
lines changed

2 files changed

+173
-168
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ TODO:
1010
- [ ] Upload your own image
1111
- [ ] Sliding animation
1212
- [ ] Noises?
13-
- [ ] Proper styling
13+
- [ ] Proper styling
14+
- [ ] 4x4 and 5x5 mode(?)

‎script.js

+171-167
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,191 @@
1-
function displayTime(d) {
2-
var m = String(Math.floor(d % 3600 / 60));
3-
var s = String(Math.floor(d % 3600 % 60));
1+
function _() {
2+
function displayTime(d) {
3+
var m = String(Math.floor(d % 3600 / 60));
4+
var s = String(Math.floor(d % 3600 % 60));
45

5-
if (s.length < 2) {s = "0" + s}
6+
if (s.length < 2) {s = "0" + s}
67

7-
return m + ":" + s;
8-
}
8+
return m + ":" + s;
9+
}
910

10-
function shuffleBoard(blank) {
11-
const tiles = [
12-
"row1 col1",
13-
"row1 col2",
14-
"row1 col3",
15-
"row2 col1",
16-
"row2 col2",
17-
"row2 col3",
18-
"row3 col1",
19-
"row3 col2",
20-
"row3 col3",
21-
];
22-
tiles[blank] = "blank";
23-
24-
for (let i = 0; i < 1000000; i++) {
25-
let moved = false;
26-
while (!moved) {
27-
let num = Math.floor(Math.random() * 4);
28-
if (num === 0) {
29-
const moveIndex = tiles.indexOf("blank") - 3;
30-
if (moveIndex > -1) {
31-
const tmp = tiles[moveIndex];
32-
tiles[moveIndex] = "blank";
33-
tiles[moveIndex+3] = tmp;
34-
moved = true;
35-
}
36-
} else if (num === 1) {
37-
const moveIndex = tiles.indexOf("blank") + 1;
38-
if (moveIndex % 3 !== 0 && moveIndex < 9) {
39-
const tmp = tiles[moveIndex];
40-
tiles[moveIndex] = "blank";
41-
tiles[moveIndex-1] = tmp;
42-
moved = true;
43-
}
44-
} else if (num === 2) {
45-
const moveIndex = tiles.indexOf("blank") + 3;
46-
if (moveIndex < 9) {
47-
const tmp = tiles[moveIndex];
48-
tiles[moveIndex] = "blank";
49-
tiles[moveIndex-3] = tmp;
50-
moved = true;
51-
}
52-
} else if (num === 3) {
53-
const moveIndex = tiles.indexOf("blank") - 1;
54-
if ((moveIndex + 1) % 3 !== 0 && moveIndex > 0) {
55-
const tmp = tiles[moveIndex];
56-
tiles[moveIndex] = "blank";
57-
tiles[moveIndex+1] = tmp;
58-
moved = true;
11+
function shuffleBoard(blank) {
12+
const tiles = [
13+
"row1 col1",
14+
"row1 col2",
15+
"row1 col3",
16+
"row2 col1",
17+
"row2 col2",
18+
"row2 col3",
19+
"row3 col1",
20+
"row3 col2",
21+
"row3 col3",
22+
];
23+
tiles[blank] = "blank";
24+
25+
for (let i = 0; i < 1000000; i++) {
26+
let moved = false;
27+
while (!moved) {
28+
let num = Math.floor(Math.random() * 4);
29+
if (num === 0) {
30+
const moveIndex = tiles.indexOf("blank") - 3;
31+
if (moveIndex > -1) {
32+
const tmp = tiles[moveIndex];
33+
tiles[moveIndex] = "blank";
34+
tiles[moveIndex+3] = tmp;
35+
moved = true;
36+
}
37+
} else if (num === 1) {
38+
const moveIndex = tiles.indexOf("blank") + 1;
39+
if (moveIndex % 3 !== 0 && moveIndex < 9) {
40+
const tmp = tiles[moveIndex];
41+
tiles[moveIndex] = "blank";
42+
tiles[moveIndex-1] = tmp;
43+
moved = true;
44+
}
45+
} else if (num === 2) {
46+
const moveIndex = tiles.indexOf("blank") + 3;
47+
if (moveIndex < 9) {
48+
const tmp = tiles[moveIndex];
49+
tiles[moveIndex] = "blank";
50+
tiles[moveIndex-3] = tmp;
51+
moved = true;
52+
}
53+
} else if (num === 3) {
54+
const moveIndex = tiles.indexOf("blank") - 1;
55+
if ((moveIndex + 1) % 3 !== 0 && moveIndex > 0) {
56+
const tmp = tiles[moveIndex];
57+
tiles[moveIndex] = "blank";
58+
tiles[moveIndex+1] = tmp;
59+
moved = true;
60+
}
5961
}
6062
}
6163
}
62-
}
6364

64-
let boardTiles = document.getElementById("board").children;
65-
for (let row = 0; row < boardTiles.length; row++) {
66-
for (let col=0; col < boardTiles[row].children.length; col++) {
67-
boardTiles[row].children[col].className = tiles[row*3+col] + " tile";
65+
let boardTiles = document.getElementById("board").children;
66+
for (let row = 0; row < boardTiles.length; row++) {
67+
for (let col=0; col < boardTiles[row].children.length; col++) {
68+
boardTiles[row].children[col].className = tiles[row*3+col] + " tile";
69+
}
6870
}
6971
}
70-
}
7172

72-
function checkWin(blank, moves, timeStart, interval) {
73-
const correctTiles = [
74-
"row1 col1",
75-
"row1 col2",
76-
"row1 col3",
77-
"row2 col1",
78-
"row2 col2",
79-
"row2 col3",
80-
"row3 col1",
81-
"row3 col2",
82-
"row3 col3",
83-
];
84-
correctTiles[blank] = "blank";
85-
86-
const boardTiles = document.getElementById("board").children;
87-
for (let row = 0; row < boardTiles.length; row++) {
88-
for (let col = 0; col < boardTiles[row].children.length; col++) {
89-
if (boardTiles[row].children[col].className.replace(" tile", "") !== correctTiles[row*3+col]) {
90-
return;
73+
function checkWin(blank, moves, timeStart, interval) {
74+
const correctTiles = [
75+
"row1 col1",
76+
"row1 col2",
77+
"row1 col3",
78+
"row2 col1",
79+
"row2 col2",
80+
"row2 col3",
81+
"row3 col1",
82+
"row3 col2",
83+
"row3 col3",
84+
];
85+
correctTiles[blank] = "blank";
86+
87+
const boardTiles = document.getElementById("board").children;
88+
for (let row = 0; row < boardTiles.length; row++) {
89+
for (let col = 0; col < boardTiles[row].children.length; col++) {
90+
if (boardTiles[row].children[col].className.replace(" tile", "") !== correctTiles[row*3+col]) {
91+
return;
92+
}
9193
}
9294
}
93-
}
9495

95-
clearInterval(interval);
96-
document.getElementById("board").className = "won";
96+
clearInterval(interval);
97+
document.getElementById("board").className = "won";
9798

98-
if (localStorage.getItem("bestScore") === null || moves < Number(localStorage.getItem("bestScore"))) {
99-
localStorage.setItem("bestScore", moves);
100-
document.getElementById("bestScore").innerHTML = moves;
101-
}
99+
if (localStorage.getItem("bestScore") === null || moves < Number(localStorage.getItem("bestScore"))) {
100+
localStorage.setItem("bestScore", moves);
101+
document.getElementById("bestScore").innerHTML = moves;
102+
}
102103

103-
let time = Math.floor((new Date() - timeStart)/1000);
104-
if (localStorage.getItem("bestTime") === null || time < Number(localStorage.getItem("bestTime"))) {
105-
localStorage.setItem("bestTime", time);
106-
document.getElementById("bestTime").innerHTML = displayTime(time);
104+
let time = Math.floor((new Date() - timeStart)/1000);
105+
if (localStorage.getItem("bestTime") === null || time < Number(localStorage.getItem("bestTime"))) {
106+
localStorage.setItem("bestTime", time);
107+
document.getElementById("bestTime").innerHTML = displayTime(time);
108+
}
107109
}
108-
}
109-
110110

111-
function play() {
112-
const old_element = document.getElementById("board");
113-
const new_element = old_element.cloneNode(true);
114-
old_element.parentNode.replaceChild(new_element, old_element);
115-
116-
document.getElementById("board").className = "";
117-
let moves = 0;
118-
document.getElementById("moves").innerHTML = moves;
119-
let timeStart = new Date().getTime();
120-
document.getElementById("time").innerHTML = "0:00";
121-
122-
const blank = Math.floor(Math.random() * 9);
123-
document.getElementById("start").innerHTML = "restart";
124-
shuffleBoard(blank);
125-
126-
const interval = setInterval(() => {
127-
document.getElementById("time").innerHTML = displayTime(Math.floor((new Date().getTime() - timeStart)/1000));
128-
}, 250);
129-
130-
document.querySelectorAll(".tile").forEach( tile => {
131-
tile.addEventListener("click", () => {
132-
const id = Number(tile.id);
133-
const row = Number(tile.parentElement.id.replace("row", ""));
134-
const col = (id - 1) % 3;
135-
136-
if (row < 3) {
137-
if (document.getElementById("row"+String(row + 1)).children[col].className.includes("blank")) {
138-
document.getElementById("row"+String(row + 1)).children[col].className = tile.className;
139-
tile.className = "blank tile";
140-
moves++;
141-
document.getElementById("moves").innerHTML = moves;
142-
checkWin(blank, moves, timeStart, interval);
143-
return
144-
}
145-
} if (row > 1) {
146-
if (document.getElementById("row"+String(row - 1)).children[col].className.includes("blank")) {
147-
document.getElementById("row"+String(row - 1)).children[col].className = tile.className;
148-
tile.className = "blank tile";
149-
moves++;
150-
document.getElementById("moves").innerHTML = moves;
151-
checkWin(blank, moves, timeStart, interval);
152-
return
153-
}
154-
} if (col < 2) {
155-
if (document.getElementById("row"+String(row)).children[col+1].className.includes("blank")) {
156-
document.getElementById("row"+String(row)).children[col+1].className = tile.className;
157-
tile.className = "blank tile";
158-
moves++;
159-
document.getElementById("moves").innerHTML = moves;
160-
checkWin(blank, moves, timeStart, interval);
161-
return
162-
}
163-
} if (col > 0) {
164-
if (document.getElementById("row"+String(row)).children[col-1].className.includes("blank")) {
165-
document.getElementById("row"+String(row)).children[col-1].className = tile.className;
166-
tile.className = "blank tile";
167-
moves++;
168-
document.getElementById("moves").innerHTML = moves;
169-
checkWin(blank, moves, timeStart, interval);
170-
return
111+
let interval = 0;
112+
function play() {
113+
const old_element = document.getElementById("board");
114+
const new_element = old_element.cloneNode(true);
115+
old_element.parentNode.replaceChild(new_element, old_element);
116+
117+
document.getElementById("board").className = "";
118+
let moves = 0;
119+
document.getElementById("moves").innerHTML = moves;
120+
let timeStart = new Date().getTime();
121+
document.getElementById("time").innerHTML = "0:00";
122+
123+
const blank = Math.floor(Math.random() * 9);
124+
document.getElementById("start").innerHTML = "restart";
125+
shuffleBoard(blank);
126+
127+
clearInterval(interval);
128+
interval = setInterval(() => {
129+
document.getElementById("time").innerHTML = displayTime(Math.floor((new Date().getTime() - timeStart)/1000));
130+
}, 250);
131+
132+
document.querySelectorAll(".tile").forEach( tile => {
133+
tile.addEventListener("click", () => {
134+
const id = Number(tile.id);
135+
const row = Number(tile.parentElement.id.replace("row", ""));
136+
const col = (id - 1) % 3;
137+
138+
if (row < 3) {
139+
if (document.getElementById("row"+String(row + 1)).children[col].className.includes("blank")) {
140+
document.getElementById("row"+String(row + 1)).children[col].className = tile.className;
141+
tile.className = "blank tile";
142+
moves++;
143+
document.getElementById("moves").innerHTML = moves;
144+
checkWin(blank, moves, timeStart, interval);
145+
return
146+
}
147+
} if (row > 1) {
148+
if (document.getElementById("row"+String(row - 1)).children[col].className.includes("blank")) {
149+
document.getElementById("row"+String(row - 1)).children[col].className = tile.className;
150+
tile.className = "blank tile";
151+
moves++;
152+
document.getElementById("moves").innerHTML = moves;
153+
checkWin(blank, moves, timeStart, interval);
154+
return
155+
}
156+
} if (col < 2) {
157+
if (document.getElementById("row"+String(row)).children[col+1].className.includes("blank")) {
158+
document.getElementById("row"+String(row)).children[col+1].className = tile.className;
159+
tile.className = "blank tile";
160+
moves++;
161+
document.getElementById("moves").innerHTML = moves;
162+
checkWin(blank, moves, timeStart, interval);
163+
return
164+
}
165+
} if (col > 0) {
166+
if (document.getElementById("row"+String(row)).children[col-1].className.includes("blank")) {
167+
document.getElementById("row"+String(row)).children[col-1].className = tile.className;
168+
tile.className = "blank tile";
169+
moves++;
170+
document.getElementById("moves").innerHTML = moves;
171+
checkWin(blank, moves, timeStart, interval);
172+
return
173+
}
171174
}
172-
}
175+
});
173176
});
174-
});
175-
}
177+
}
176178

177-
document.getElementById("start").addEventListener("click", play);
178-
179-
window.onload = () => {
180-
let bestScore = localStorage.getItem("bestScore");
181-
bestScore = bestScore === null ? "NA" : bestScore;
182-
document.getElementById("bestScore").innerHTML = bestScore;
183-
184-
let bestTime = localStorage.getItem("bestTime");
185-
bestTime = bestTime === null ? "NA" : displayTime(bestTime);
186-
document.getElementById("bestTime").innerHTML = bestTime;
187-
}
179+
document.getElementById("start").addEventListener("click", play);
180+
181+
window.onload = () => {
182+
let bestScore = localStorage.getItem("bestScore");
183+
bestScore = bestScore === null ? "NA" : bestScore;
184+
document.getElementById("bestScore").innerHTML = bestScore;
185+
186+
let bestTime = localStorage.getItem("bestTime");
187+
bestTime = bestTime === null ? "NA" : displayTime(bestTime);
188+
document.getElementById("bestTime").innerHTML = bestTime;
189+
}
190+
}
191+
_();

0 commit comments

Comments
 (0)