Let's improve our coding skills even further by implementing Sliding puzzle game in vanilla JS and Canvas API.
This is a two part play list; in this part (part 2) you will many interesting things such as:
Canvas API manipulation; did you know that once you place an image on canvas, it looses all the properties that we usually associate with an image.
associating click event with the tile images (even though canvas can't see any image)
logic to calculate row & col from mouse click coordinates
logic to swap tiles
logic to check if the puzzle has been solved or not
logic to get calculate mouse click coordinate with respect to canavas (when canvas is not placed at top left corner of viewport) using getBoundingClientReact method.
part 1 link : • JS Project - Sliding Puzzle with Vani...
#CanvasAPI, #SlidingPuzzleGame, #JSproject, #SingletonPattern, #DataURL
Watch video JS Project - Sliding Puzzle with Vanilla JS & Canvas API | No Frameworks No Libraries | part 2/2 online without registration, duration hours minute second in high quality. This video was added by user CS with NJ 16 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 701 once and liked it 26 people.