◀︎ ▶︎

<html lang="ja">
<meta charset="utf-8">
<style>
body{font-family:Arial,sans-serif;
text-align:center;}
.エリア{display:grid;
grid-template-columns:repeat(4,60px);
gap:10px;
justify-content:center;
margin:20px auto;
margin-bottom:100px;}
.ピクセル60_ぼっくす{width:60px;
height:60px;
display:flex;
justify-content:center;
align-items:center;
font-size:36px;
font-weight:bold;
border-radius:50%;
cursor:grab;
user-select:none;
text-align:center;
line-height:60px;
border:none;
background-color:transparent;}
.空きスペース{background-color:#ffffff;}
</style>

<div class="エリア"id="目印"></div>

<script>
let 順番_正解=[1,0];
let 順番_今=[...順番_正解].sort(()=> Math.random() - 0.5);
function 空白の位置()
{return 順番_今.indexOf(0);}
function 隣接チェック(位置1, 位置2)
{let 横隣接=Math.abs(位置1 - 位置2)===1 && Math.floor(位置1 / 4)===Math.floor(位置2 / 4);
let 縦隣接=Math.abs(位置1 - 位置2)===4;
return 横隣接 || 縦隣接;}
function ぱずる()
{let げーむ=document.getElementById("目印");
げーむ.innerHTML="";
let 空き位置=空白の位置();
順番_今.forEach((number, index)=>
{let ぴーす=document.createElement("div");
ぴーす.className="ピクセル60_ぼっくす";
ぴーす.textContent=number !== 0 ? "●":"";
ぴーす.id=`ぴーす-${index}`;
ぴーす.dataset.index=index;
if(index % 2===0)
{ぴーす.style.color="silver";}
else
{ぴーす.style.color="#00ff00";}
ぴーす.style.fontSize="120px";
if(number===0)
{ぴーす.classList.add("空きスペース");}
if(隣接チェック(空き位置,index))
{ぴーす.draggable=true;
ぴーす.addEventListener("dragstart",置き換える);
ぴーす.addEventListener("touchstart",指触れる);}
else
{ぴーす.draggable=false;}
ぴーす.addEventListener("dragover",重ねる);
ぴーす.addEventListener("drop",移動させる);
げーむ.appendChild(ぴーす);});}
function 置き換える(event)
{event.dataTransfer.setData("text/plain",event.target.dataset.index);}
function 重ねる(event)
{event.preventDefault();}
function 移動させる(event)
{event.preventDefault();
let ここから=event.dataTransfer.getData("text/plain");
let 収納=event.target.dataset.index;
let ここから番号=parseInt(ここから);
let 収納番号=parseInt(収納);
if(隣接チェック(ここから番号,収納番号)&&順番_今[収納番号]===0)
{[順番_今[ここから番号],順番_今[収納番号]]=[順番_今[収納番号],順番_今[ここから番号]];
ぱずる();}}
function 指触れる(event)
{event.preventDefault();
let たっち=event.target;
let ここから=たっち.dataset.index;
let 収納=空白の位置();
if(隣接チェック(ここから,収納))
{順番_今[収納]=順番_今[ここから];
順番_今[ここから]=0;
ぱずる();}}
ぱずる();
</script>

</html>