<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<title>15 Puzzle</title>
<script type="application/javascript">
function touchHandler(event){
if(event.touches.length > 1){
event.preventDefault()
}
}
window.addEventListener("touchstart", touchHandler, false);
var board, zx, zy, clicks, possibles, oldzx = -1, oldzy = -1;
let imgDir = '';
let getImg = x => imgDir + x + '.jpg';
let rand = items => items[~~(items.length * Math.random())];
function getPossibles() {
var ii, jj, cx = [-1, 0, 1, 0], cy = [0, -1, 0, 1];
possibles = [];
for( var i = 0; i < 4; i++ ) {
ii = zx + cx[i]; jj = zy + cy[i];
if( ii < 0 || ii > 3 || jj < 0 || jj > 3 ) continue;
possibles.push( { x: ii, y: jj } );
}
}
function updateBtns() {
var b, v, id;
for( var j = 0; j < 4; j++ ) {
for( var i = 0; i < 4; i++ ) {
id = "btn" + ( i + j * 4 );
b = document.getElementById( id );
v = board[i][j];
b.src = getImg(v);
if( v < 16 ) {
b.hidden = false;
b.className = "button"
}
else {
b.hidden = true;
b.className = "empty";
}
}
}
}
function shuffle() {
var v = 0, t;
do {
getPossibles();
while( true ) {
t = possibles[Math.floor( Math.random() * possibles.length )];
if( t.x != oldzx || t.y != oldzy ) break;
}
oldzx = zx; oldzy = zy;
board[zx][zy] = board[t.x][t.y];
zx = t.x; zy = t.y;
board[zx][zy] = 16;
} while( ++v < 200 );
}
function restart() {
shuffle();
clicks = 0;
imgDir = 'img/' + rand([...Array(4882).keys()]) + '/';
//imgDir = 999 + '/';
updateBtns();
}
function checkFinished() {
var a = 0;
for( var j = 0; j < 4; j++ ) {
for( var i = 0; i < 4; i++ ) {
if( board[i][j] < a ) return false;
a = board[i][j];
}
}
return true;
}
function btnHandle( e ) {
getPossibles();
var c = e.target.i, r = e.target.j, p = -1;
for( var i = 0; i < possibles.length; i++ ) {
if( possibles[i].x == c && possibles[i].y == r ) {
p = i;
break;
}
}
if( p > -1 ) {
clicks++;
var t = possibles[p];
board[zx][zy] = board[t.x][t.y];
zx = t.x; zy = t.y;
board[zx][zy] = 16;
updateBtns();
if( checkFinished() ) {
[...Array(16).keys()].map(x => document.getElementById("btn"+x).hidden = false);
Array.from(document.getElementsByClassName("child")).forEach(x => x.className = 'child_');
alert('15 Puzzle(Honkai Impact 3 ver.) test');
}
}
}
function createBoard() {
board = new Array( 4 );
for( var i = 0; i < 4; i++ ) {
board[i] = new Array( 4 );
}
for( var j = 0; j < 4; j++ ) {
for( var i = 0; i < 4; i++ ) {
board[i][j] = ( i + j * 4 ) + 1;
}
}
zx = zy = 3;
board[zx][zy] = 16;
}
function createBtns() {
var b, d = document.createElement( "div" );
d.className += "board";
document.body.appendChild( d );
for( var j = 0; j < 4; j++ ) {
for( var i = 0; i < 4; i++ ) {
let con = document.createElement("div");
con.className += "child";
b = document.createElement( "img" );
b.id = "btn" + ( i + j * 4 );
b.i = i; b.j = j;
b.addEventListener( "click", btnHandle, false );
con.appendChild(b);
d.appendChild(con);
}
}
}
function start() {
createBtns();
createBoard();
restart();
}
</script>
<style>
html, body {
background: #222;
color: #111
}
.txt {
color: #fff;
text-align: center;
font-size: 5vh
}
.board {
display: flex;
flex-flow: wrap;
}
.button, .empty {
vertical-align:middle;
cursor:pointer;
width: 100%;
height: 100%;
}
.child, .child_ {
float: left;
border: 1px black solid;
width: 25%;
box-sizing: border-box;
}
.child_ {
border: 0;
}
</style>
</head>
<body onload="start()">
</body>
</html>
Image Partition
fi = 0;
Function[f,
i = 1;
path = "Z:\\test\\" <> ToString[fi];
CreateDirectory[path];
Function[x,
Export[path <> "\\" <> ToString[i] <> ".jpg", x];
i++;
] /@ Flatten[ImagePartition[f, Scaled[1/4]]];
fi++;
] /@ Import /@ FileNames["*", "Z:\\bh3"]
#include <filesystem>
#include <iostream>
#include <execution>
#include <opencv2/opencv.hpp>
int main(int argc, char* argv[])
{
auto start = 3701;
const auto inPath = R"(Z:\in)";
const auto outPath = R"(Z:\out)";
std::vector<std::tuple<int, std::string>> files{};
for (auto& file : std::filesystem::directory_iterator(inPath))
{
files.emplace_back(start++, file.path().string());
}
std::for_each(std::execution::par_unseq, files.begin(), files.end(), [&](const auto& file)
{
const auto fi = std::get<0>(file);
const auto& ff = std::get<1>(file);
auto src = cv::imread(ff, cv::IMREAD_UNCHANGED);
const int width = src.cols;
const int height = src.rows;
const auto hGridSize = height / 4;
const auto wGridSize = width / 4;
const std::filesystem::path dir = std::filesystem::path(outPath) / std::to_string(fi);
create_directory(dir);
auto i = 0;
for (auto y = 0; y < height - hGridSize; y += hGridSize)
{
for (auto x = 0; x < width - wGridSize; x += wGridSize)
{
const auto filePath = dir / (std::to_string(i++) + ".jpg");
cv::Rect gridRect(x, y, wGridSize, hGridSize);
cv::imwrite(filePath.string(), src(gridRect));
}
}
std::cout << dir << std::endl;
});
}