前回の記事(4月15日)で取り上げたものを発展させ、
ドラッグアンドドロップで、ジグソーパズルを作りたかったのですが、
座標の位置関係などの問題から、今後の課題です。
今回は、位置を入れ替えるプログラムと、ピース一つ一つの座標を、
配列化した定数配列を用いています。
あまり創意工夫感はありませんが、お試しくださいませ。
作ったもの
HTML
<div id="jigsaw">
<div id="peas-1"></div>
<div id="peas-2"></div>
<div id="peas-3"></div>
<div id="peas-4"></div>
<div id="peas-5"></div>
<div id="peas-6"></div>
<div id="peas-7"></div>
<div id="peas-8"></div>
<div id="peas-9"></div>
<div id="peas-10"></div>
<div id="peas-11"></div>
<div id="peas-12"></div>
<div id="peas-13"></div>
<div id="peas-14"></div>
<div id="peas-15"></div>
<div id="peas-16"></div>
<div id="peas-17"></div>
<div id="peas-18"></div>
<div id="peas-19"></div>
<div id="peas-20"></div>
</div>
CSS
#jigsaw{
width: 80vmin;
height: calc(80vmin / 1.5);
}
#jigsaw > div{
position: absolute;
background-size: cover;
width: 16vmin;
height: calc(80vmin / 6);
transition:transform .4s;
}
#jigsaw > div:hover{
border: solid yellow;
}
#jigsaw > div.select{
border: solid #d3d3d3;
}
#jigsaw > #peas-1 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/1.png");
}
#jigsaw > #peas-2 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/2.png");
}
#jigsaw > #peas-3 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/3.png");
}
#jigsaw > #peas-4 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/4.png");
}
#jigsaw > #peas-5 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/5.png");
}
#jigsaw > #peas-6 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/6.png");
}
#jigsaw > #peas-7 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/7.png");
}
#jigsaw > #peas-8 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/8.png");
}
#jigsaw > #peas-9 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/9.png");
}
#jigsaw > #peas-10 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/10.png");
}
#jigsaw > #peas-11 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/11.png");
}
#jigsaw > #peas-12 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/12.png");
}
#jigsaw > #peas-13 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/13.png");
}
#jigsaw > #peas-14 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/14.png");
}
#jigsaw > #peas-15 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/15.png");
}
#jigsaw > #peas-16 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/16.png");
}
#jigsaw > #peas-17 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/17.png");
}
#jigsaw > #peas-18 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/18.png");
}
#jigsaw > #peas-19 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/19.png");
}
#jigsaw > #peas-20 {
background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/20.png");
}
JavaScript
const jigsaw = document.querySelector("#jigsaw");
const peas = jigsaw.querySelectorAll("div");
const button = document.querySelector("#change-button");
let count = 0;
let change = [];
let game_start = false;
let game_set = false;
let steps = 0;
const regular = [[0,0,0],[1,0,1],[2,0,2],[3,0,3],[4,0,4],
[0,1,5],[1,1,6],[2,1,7],[3,1,8],[4,1,9],
[0,2,10],[1,2,11],[2,2,12],[3,2,13],[4,2,14],
[0,3,15],[1,3,16],[2,3,17],[3,3,18],[4,3,19]];
const strange = regular.map(arr => [...arr]);
/* そのままではコピー出来ないので、メソッドを使う(ディープコピー) */
const numbers = Array.from({ length: 20 }, (_, index) => index);
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
shuffleArray(numbers);
for(let i = 0; i < 20; i++){
peas[i].addEventListener("click",function(){
if(game_start && !game_set){
Select(i);
}
});
strange[i] = regular[numbers[i]].map(x => x); // ディープコピーを行う
Reset(i);
}
function Reset(i){
peas[i].style.transform = "translate(" + regular[i][0]*100 + "%," + regular[i][1]*100 + "%)";
}
function Change(i){
peas[i].style.transform = "translate(" + strange[i][0]*100 + "%," + strange[i][1]*100 + "%)";
}
function ChangeAll(){
for(let i = 0; i < 20; i++){
Change(i);
}
game_start = true;
button.disabled = true;
}
button.addEventListener("click",ChangeAll);
function Select(event){
count++;
count = count % 2;
change.push(event);
if(count == 0){
steps++;
const a = change[0];
const b = change[1];
const tmp_0 = strange[a][0];
const tmp_1 = strange[a][1];
const tmp_n = strange[a][2];
strange[a][0] = strange[b][0];
strange[a][1] = strange[b][1];
strange[a][2] = strange[b][2];
strange[b][0] = tmp_0;
strange[b][1] = tmp_1;
strange[b][2] = tmp_n;
peas[a].classList.remove("select");
Change(a);
Change(b);
change = [];
let judgement = true;
for(let i = 0; i < 20; i++){
if(strange[i][0] == regular[i][0] &&
strange[i][1] == regular[i][1]){}
else{judgement = false;}
}
if(judgement && !game_set){
game_set = true;
alert("クリア! " + steps + "手かかりました。");
}
}else{
const a = change[0];
peas[a].classList.add("select");
}
}