Anonymous user
16 puzzle game: Difference between revisions
no edit summary
(Added Go) |
No edit summary |
||
Line 267:
Congratulations, you have won the game in 3 moves!!
</pre>
=={{header|Javascript}}==
You also need a html file:
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
<title>16 Puzzle</title>
</head>
<body>
<div id="done">WELL DONE!</div>
<div id="board"></div>
<div id="moves">123</div>
<button id="shuffle">SHUFFLE</button>
<script src="./src/index.js" type="module"></script>
</body>
</html>
</pre>
And css file:
<pre>
* {
margin: 0;
border: 0;
text-align: center;
font-family: 'Ubuntu Mono', monospace;
user-select: none;
}
button {
border-radius: 5px;
width: 300px;
height: 80px;
font-size: 40px;
margin-top: 60px;
}
#board {
width: 410px;
height: 410px;
margin: 120px auto 30px auto;
}
#done {
font-size: 140px;
padding: 20px;
color: #fff;
background-color: rgba(0, 23, 56, .5);
border: 1px solid rgb(0, 90, 220);
width: 700px;
position: absolute;
top: 250px;
left: calc(50% - 380px);
}
#moves {
font-size: 40px;
line-height: 80px;
height: 80px;
width: 300px;
margin: auto;
border: 1px solid #000;
border-radius: 5px;
}
.btn,
.numbers,
.hide {
float: left;
width: 64px;
height: 64px;
line-height: 65px;
font-size: 40px;
border: 1px solid black;
color: black;
background-color: white;
cursor: none;
margin: 1px;
transition: all .3s;
}
.btn:hover {
background-color: rgba(71, 231, 71, 0.5);
cursor: pointer;
}
.hide {
border: 1px solid white;
cursor: none;
}
</pre>
<lang javascript>
class Puzzle {
constructor() {
this.moves;
this.started;
this.board = document.getElementById("board");
document.getElementById("shuffle").addEventListener("click", () => {
this.shuffle();
});
this.reset();
}
reset() {
while (this.board.hasChildNodes()) {
this.board.removeChild(this.board.firstChild);
}
this.moves = 0;
this.started = false;
document.getElementById("moves").innerText = this.moves;
document.getElementById("done").style.visibility = "hidden";
let t = 1;
for (let y = 0; y < 6; y++) {
for (let x = 0; x < 6; x++) {
const d = document.createElement("div");
d.id = `${x}_${y}`;
if (y === 0 || x === 0 || y === 5 || x === 5) {
if (((y === 0 || y === 5) && (x === 0 || x === 5))) {
d.className = "hide";
} else {
d.className = "btn";
if (y === 0) {
d.innerText = "🡇";
d.func = () => {
this.rollDownRight(x, true);
};
} else if (y === 5) {
d.innerText = "🡅";
d.func = () => {
this.rollUpLeft(x, true);
};
}
if (x === 0) {
d.innerText = "🡆";
d.func = () => {
this.rollDownRight(y, false);
};
} else if (x === 5) {
d.innerText = "🡄";
d.func = () => {
this.rollUpLeft(y, false);
};
}
d.addEventListener("click", (ev) => {
ev.srcElement.func();
})
}
} else {
d.className = "numbers";
d.innerText = `${t}`;
t++;
}
this.board.appendChild(d);
}
}
document.getElementById("shuffle").innerText = "SHUFFLE";
}
shuffle() {
if (this.started) {
this.reset();
} else {
this.started = true;
const e = Math.floor(Math.random() * 30) + 30;
for (let z = 0; z < e; z++) {
switch (Math.floor(Math.random() * 4)) {
case 0:
this.rollDownRight(Math.floor(Math.random() * 4) + 1, false);
break;
case 1:
this.rollUpLeft(Math.floor(Math.random() * 4) + 1, true);
break;
case 2:
this.rollUpLeft(Math.floor(Math.random() * 4) + 1, false);
break;
case 3:
this.rollDownRight(Math.floor(Math.random() * 4) + 1, true);
break;
}
}
this.moves = 0;
document.getElementById("moves").innerText = this.moves;
document.getElementById("shuffle").innerText = "RESTART";
}
}
getElements(l, col) {
const z = Array.from(document.querySelectorAll(".numbers"));
for (let e = 15; e > -1; e--) {
if (z[e].id[(col ? 0 : 2)] != l) {
z.splice(e, 1)
}
}
return z;
}
rollDownRight(x, col) {
if (!this.started) return;
const z = this.getElements(x, col),
a = z[3].innerText;
for (let r = 3; r > 0; r--) {
z[r].innerText = z[r - 1].innerText;
}
z[0].innerText = a;
this.updateMoves();
this.checkSolved();
}
rollUpLeft(x, col) {
if (!this.started) return;
const z = this.getElements(x, col),
a = z[0].innerText;
for (let r = 0; r < 3; r++) {
z[r].innerText = z[r + 1].innerText;
}
z[3].innerText = a;
this.updateMoves();
this.checkSolved();
}
updateMoves() {
this.moves++;
document.getElementById("moves").innerText = this.moves;
}
checkSolved() {
function check() {
const z = document.querySelectorAll(".numbers");
let u = 1;
for (let r of z) {
if (r.innerText != u) return false;
u++;
}
return true;
}
if (this.started && check()) {
document.getElementById("done").style.visibility = "visible";
}
}
}
new Puzzle();
</lang>
=={{header|REXX}}==
| |||