Learn to code a slide puzzle game in p5.js in this 27-minute tutorial video. Explore techniques for using images, nested loops, and arrays to create a fully playable game. Follow along as the instructor guides you through creating a Tile class, setting up the game board, implementing tile movement, and adding puzzle-solving functionality. Discover how to use the copy() function to split a source image into tiles, implement shuffling algorithms, and handle user interactions. By the end of the tutorial, you'll have the skills to create your own customized slide puzzle games and experiment with different grid sizes and image sources.
Overview
Syllabus
Welcome!.
Explain! Using copy() to split the source image into tiles?.
Code! The Tile class!.
Explain! Copying tiles from the source image to the puzzle..
Code! Setting up tile indices and a board array!.
Explain! How should the board work?.
Code! Something went wrong! Let's fix it!.
It works! Now how to draw borders between the tiles?.
Code! Shuffling the board..
Code! The slide puzzle needs an empty tile!.
Code! A function to move the tiles!.
Code! Checking if tiles are neighbors?.
Code! Random shuffling in draw()!.
Code! Moving pieces with mousePressed().
Code! What should the sketch do when the puzzle is solved?.
Code! Having fun with the tile grid!.
Let's see if I can solve this....
Solved it! What will you create?.
Taught by
The Coding Train
