<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loli Twister</title>
<style type="text/css">
* {
transition: all 0.2s;
}
html, body {
margin: 0;
}
#board {
position: absolute;
}
#board #imgs {
display: flex;
flex-flow: wrap;
}
#board #imgs img {
max-width: 25%;
width: 100%;
height: 100%;
}
#board #btns {
position: absolute;
width: 75%;
height: 75%;
left: calc(25% / 2);
top: calc(25% / 2);
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
#board #btns .btn {
opacity: 0.5;
background-color: red;
z-index: 100;
}
</style>
<script type="application/javascript">
function range(count) {
return [...Array(count).keys()];
}
function removeAllChild(node) {
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
}
let rand = items => items[~~(items.length * Math.random())];
let shuffle = items_ => {
let res = [];
let items = [...items_];
while (items.length !== 0) {
res.push(items.splice(Math.floor(Math.random() * items.length), 1)[0]);
}
return res;
}
</script>
<script type="application/javascript">
function touchHandler(event){
if(event.touches.length > 1){
event.preventDefault()
}
}
window.addEventListener("touchstart", touchHandler, false);
</script>
<script type="application/javascript">
let succ = false;
let started = false;
let startTime = new Date();
const path = (x, y) => `http://iriszero.cc/15Puzzle/img/${x}/${y}.jpg`;
function init() {
let x = rand(range(4881 + 1));
let bgs = shuffle(range(16));
removeAllChild(document.getElementById('board'));
let imgs = document.createElement('div');
imgs.id = 'imgs';
range(16).forEach(i => {
let img = document.createElement('img');
img.id = `img${i}`;
img.src = path(x, bgs[i] + 1);
imgs.appendChild(img);
});
document.getElementById('board').appendChild(imgs);
let btns = document.createElement('div');
btns.id = 'btns';
range(9).forEach(i => {
let btn = document.createElement('div');
btn.id = 'btn';
const y = Math.floor(i / 3);
const x = i % 3;
btn.onclick = () => {
if (!started) {
startTime = new Date();
started = true;
}
if (!succ) {
const getImg = (x, y) => document.getElementById(`img${y * 4 + x}`);
const getSrc = (x, y) => getImg(x, y).src;
let temp = getSrc(x, y);
getImg(x, y).src = getSrc(x + 1, y);
getImg(x + 1, y).src = getSrc(x + 1, y + 1);
getImg(x + 1, y + 1).src = getSrc(x, y + 1);
getImg(x, y + 1).src = temp;
if ([...document.getElementById('imgs').children].map(x => +x.src.substr(x.src.lastIndexOf('/') + 1).split('.')[0] - 1).toString() === range(16).toString()) {
succ = true;
alert(`Loli Twister\n${(new Date() - startTime) / 1000} s`);
}
}
}
btns.appendChild(btn);
});
document.getElementById('board').appendChild(btns);
}
</script>
</head>
<body onload="init()">
<div id="board">
</div>
</body>
</html>