English >

Slide Puzzle made with AI

Click above, below, left, or right of the white piece to move it.

PC -

Smartphone

DESCRIPTION

This is a typical puzzle game where you slide pieces into empty slots.

HOW TO MAKE/PROMPT

Created using Claude sonnet. The prompt was as follows:

Make a slide puzzle html game.
#structure
- html,js,css in 1 file
- 512ｘ512 canvas

#script
##variable
- wlen:number of horizontal divisions, initially set to 3.
- heln:number of vertical divisions, initially set to 3.
- imgpath:array of image file paths, "../ai/dat/0.png","../ai/dat/1.png","../ai/dat/2.png","../ai/dat/3.png",

##init
- Load one random image from the imgpath.
- Divide the image using the horizontal length wlen and vertical length hlen, then shuffle the segments.
- Display only the segment at (X0, Y0) as blank.
- Show reset button.

##gameloop
- The player can click on a piece adjacent to the blank space to move that piece into the blank position.
- Movement Restriction: Only pieces adjacent to the blank space can be moved. Pieces can only be moved if they are adjacent either vertically or horizontally.
- Game Cler: The game is cleared when all pieces are arranged in the correct order,
- With reset, reselect the image and redo the division and shuffle.

What if there is an error?

<< menu

On-site search