Slide Puzzle
Coding Challenge #165
Let’s make a slide puzzle in p5.js together! We’ll be using images, nested loops, and arrays, and by the end of our journey, we’ll have a fully playable game!
Topics
- 0:00 - Welcome!
- 2:24 - Explain! Using copy() to split the source image into tiles?
- 3:24 - Code! The Tile class!
- 4:40 - Explain! Copying tiles from the source image to the puzzle.
- 5:33 - Code! Setting up tile indices and a board array!
- 6:54 - Explain! How should the board work?
- 8:31 - Code! Something went wrong! Let's fix it!
- 9:55 - It works! Now how to draw borders between the tiles?
- 10:57 - Code! Shuffling the board.
- 14:00 - Code! The slide puzzle needs an empty tile!
- 14:52 - Code! A function to move the tiles!
- 16:59 - Code! Checking if tiles are neighbors?
- 19:37 - Code! Random shuffling in draw()!
- 20:12 - Code! Moving pieces with mousePressed()
- 21:32 - Code! What should the sketch do when the puzzle is solved?
- 23:06 - Code! Having fun with the tile grid!
- 23:55 - Let's see if I can solve this...
- 24:27 - Solved it! What will you create?
Community Contributions
- Sliding Puzzle with Mushy Men by Kathy McGuiness (Source Code)
- Slide Puzzle with move animations by David Sullivan (Source Code)
- Slide Puzzle with Ability to Add Your Own Images and Number of Rows and Coloumns by Joshua H (Source Code)
You can also add your own version! (See how)
Links discussed in this coding challenge
Videos discussed in this coding challenge
- Coding Challenge 164 Bending Time SlitScan by The Coding Train