前幾天，我的腦海中突然浮現出童年時的一個小拼圖玩具的回憶，這是一個滑塊拼圖，其中15 個方形瓷磚以4 x 4 的單元格排列方式放置在一個框架中，留下一個可用空間。每塊瓷磚和框架邊緣上的一組脊和凹槽允許瓷磚彼此滑過，同時將瓷磚固定在框架中。在任何給定時間，與自由空間相鄰的任何圖塊都可以移動到該空間中，否則這些圖塊將被阻止移動。將一塊圖塊移動到可用空間中，然後在該圖塊來自的地方留下一個新的可用空間，然後另一個圖塊可以移動到該新空間。這個想法是透過以這種方式重複滑動圖塊來將圖塊排列成某種預定的順序。
/* "X" refers to the X-axis cell positions, "Y" to the Y-axis cell positions.
* 0, 1, 2, 3 refers to the position on that axis,
* 0 = left and top, 3 = right and bottom respectively.
*/
.tile:has(.X0:checked~.Y0:checked) {
transform: translate(0%, 0%);
}
.tile:has(.X0:checked~.Y1:checked) {
transform: translate(0%, 100%);
}
.tile:has(.X0:checked~.Y2:checked) {
transform: translate(0%, 200%);
}
.tile:has(.X0:checked~.Y3:checked) {
transform: translate(0%, 300%);
}
.tile:has(.X1:checked~.Y0:checked) {
transform: translate(100%, 0%);
}
/* and so on for the remainder of the sixteen combinations */
/* Top, left corner */
.frame:not(:has(.tile .X0:checked ~ .Y0:checked)) {
:is(
.tile:has(.X0:checked ~ .Y1:checked) label.Y0,
.tile:has(.X1:checked ~ .Y0:checked) label.X0
) {
pointer-events: auto;
}
}
/* right most cell of row two */
.frame:not(:has(.tile .X1:checked ~ .Y3:checked)) {
:is(
.tile:has(.X1:checked ~ .Y2:checked) label.Y3,
.tile:has(.X0:checked ~ .Y3:checked) label.X1,
.tile:has(.X2:checked ~ .Y3:checked) label.X1
) {
pointer-events: auto;
}
}
/* second cell from left on row three */
.frame:not(:has(.tile .X2:checked ~ .Y1:checked)) {
:is(
.tile:has(.X2:checked ~ .Y0:checked) label.Y1,
.tile:has(.X2:checked ~ .Y2:checked) label.Y1,
.tile:has(.X1:checked ~ .Y1:checked) label.X2,
.tile:has(.X3:checked ~ .Y1:checked) label.X2
) {
pointer-events: auto;
}
}
登入後複製
The last step of the game is to identify when the puzzle is solved. This is simply a case of checking that the 15 tiles all have their expected X and Y axis radio buttons set to their "solved" position.
/* Each tile is assigned a letter "a" to "o".
* The puzzle is solved when the tiles are in alphabetical order
* reading left to right and top to bottom
*/
.frame:has(.a .X0:checked ~ .Y0:checked):has(.b .X1:checked ~ .Y0:checked):has(
.c .X2:checked ~ .Y0:checked
):has(.d .X3:checked ~ .Y0:checked):has(.e .X0:checked ~ .Y1:checked):has(
.f .X1:checked ~ .Y1:checked
):has(.g .X2:checked ~ .Y1:checked):has(.h .X3:checked ~ .Y1:checked):has(
.i .X0:checked ~ .Y2:checked
):has(.j .X1:checked ~ .Y2:checked):has(.k .X2:checked ~ .Y2:checked):has(
.l .X3:checked ~ .Y2:checked
):has(.m .X0:checked ~ .Y3:checked):has(.n .X1:checked ~ .Y3:checked):has(
.o .X2:checked ~ .Y3:checked
)
~ .options
.success {
display: block;
}
登入後複製
The rest is cosmetic. The sliding is done with a simple transition of the transform described above
and each tile shows a portion of the game's image using background-size and background-position
.tile {
background-size: 400%;
}
#board1 .tile {
background-image: url("https://alohci.net/image/dev.to/slidergame/mullermarc-k7bQqdUf954-unsplash.webp");
}
.a {
background-position: 0% 0%;
}
.b {
background-position: 33.333% 0%;
}
.c {
background-position: 66.667% 0%;
}
.d {
background-position: 100% 0%;
}
.e {
background-position: 0% 33.333%;
}
/* and so on for the remaining tiles */
登入後複製
and there's a single set of radio buttons to choose which of the ten games to play.
To play the game, simply click or tap on the tile you want to slide to the empty cell.
I've also provided a "barebones" mode to show the tile letters and radio buttons which might help with the understanding of how the HTML and CSS works.
So here's the completed puzzle game. Please let me know any feedback you have.
