Slide Puzzle in JavaScript

Slide Puzzle in JavaScript

The Coding Train via YouTube Direct link

Explain! Copying tiles from the source image to the puzzle.

4 of 18

4 of 18

Explain! Copying tiles from the source image to the puzzle.

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Slide Puzzle in JavaScript

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Welcome!
  2. 2 Explain! Using copy() to split the source image into tiles?
  3. 3 Code! The Tile class!
  4. 4 Explain! Copying tiles from the source image to the puzzle.
  5. 5 Code! Setting up tile indices and a board array!
  6. 6 Explain! How should the board work?
  7. 7 Code! Something went wrong! Let's fix it!
  8. 8 It works! Now how to draw borders between the tiles?
  9. 9 Code! Shuffling the board.
  10. 10 Code! The slide puzzle needs an empty tile!
  11. 11 Code! A function to move the tiles!
  12. 12 Code! Checking if tiles are neighbors?
  13. 13 Code! Random shuffling in draw()!
  14. 14 Code! Moving pieces with mousePressed()
  15. 15 Code! What should the sketch do when the puzzle is solved?
  16. 16 Code! Having fun with the tile grid!
  17. 17 Let's see if I can solve this...
  18. 18 Solved it! What will you create?

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.