이걸 만들려고 한다. 마지막칸을 비우고 비워있는 칸 상하 좌우 칸을 눌렀을때
빈곳으로 이동하게 해서 퍼즐을 완성한다.
저 상태로 완성이되면 셔플이벤트로 퍼즐의 위치를 섞어주면 완성이다.
전체 box-wrap을 만들고 그 안에 들어갈 box를 css를 넣어준다.
여기서 background-image를 한장의 사진을 넣어주는데
사진크기를 box-wrap크기와 똑같이 맞춰줘야 빈틈 없이 들어간다.
이것은 js로 box마다 사진의 위치를 backgroundPosition로 잡아준다.
append를 추가할때 col="'+i+'" row="'+j+'" 를 넣어줘서 box의 위치를 잡는다.
위와 같이 box에 각각 좌표에 맞는 백그라운드 포지션으로 배경의 위치를 잡아준다.
마지막 box의 좌표는 값을 불러온 뒤 박스를 삭제 해준다.(3,3)
여기서 박스를 눌러쓸때 이동할 수 있게끔 규칙을 만들어 줘서 if()에 넣어주면 된다.
클릭한 this에서 row와col의 +-1 좌표에서 this를 빈공간을 판단해서 그쪽으로 이동시킨다.
퍼즐1 : http://newlex0124.cafe24.com/test/3day/3day1.html
이렇게 끝나면 이게 퍼즐인가?
아니다!
섞어서 맞춰야 퍼즐이다.
그럼 이제 섞어봐야겠다.
위와 같이 하면 0~10의 정수로 랜덤으로 숫자가 찍혀서 알림창이뜬다.
이걸 이용해서 퍼즐의 위치값을 랜덤으로 설정 해주면 된다.
box 클릭 이벤트 밑에 위와 같이 넣어주면
F5번을 누를때마다 랜덤으로 박스의 위치가 섞인다.
for문으로 몇번을 섞을지 정해주고
섞어주는 범위를 정한다. (eq)
if문 안에도 eq값을 넣어줘야 box들이 랜덤으로 배치된다.
퍼즐2 : http://newlex0124.cafe24.com/test/3day/3day2.html
드디어 원하던 퍼즐이 완성!
박스의 갯수를 조절해서 난이도를 좀 높일 수 있다.
퍼즐3 : http://newlex0124.cafe24.com/test/3day/3day3.html
