Slide Puzzle Game in JavaScript HTML CSS

How to code a slide puzzle game using javascript html and css! In this tutorial, we will make a Doraemon themed slide puzzle! ドラえもんスライドパズル!
Code: github.com/ImKennyYip/Slide-P...
Demo: imkennyyip.github.io/slide-pu...
Website: www.kennyyipcoding.com/
Java Game Programming Projects Playlist:
• Java Game Programming ...
JavaScript Game Programming Projects Playlist:
• JavaScript Game Progra...
Subscribe for more coding tutorials 😄!
Rest in Peace, Abiko Motoo (安孫子 素雄) March 10, 1934 - April 7, 2022, co-creator of Doraemon :'(

[@davidgm7042]

I've done (almost) all of your game projects and I can't thank you enough. Your videos have helped a lot to learn and practice HTML, CSS and JS. I just wanted to say thanks and to tell you your videos are amazing! Keep up the good work!

[@chetanrathi8070]

clean, calm, clear, simple = Kenny Yip Coding = AWESOME!

[@cha5848]

Thanku so much for explaining everything so clearly...please keeping making these videos

[@namanchimnani]

Try playing with dnd-kit for drag and drop functionality if doing this in react! It makes the job easier. Great video btw 👏

[@KennyYipCoding]

great suggestion!

[@blossomvelder]

I can't thank you enough for this tutorial, I've learnt a lot and also created a slide puzzle game of my own using your help on the tutorial. What I need to know now is how to I make this game playable even on a mobile phone since it seems to only work on desktop? How can it be made compatible for mobile use?

[@hihahahuhujs]

Amazing

[@penjanikaira3538]

Kindly do a video on how you can make that one work on phones (puzzling on the phone)

[@vigneshwarvenugopal922]

Thank you so much dude.,

[@annbur3791]

I have another question, where did u define which tile is curr or other?

[@teksapport9351]

how do i make a function that displays a win when i put the pieces in the correct order? thanks a lot!

[@TimeLords910]

i'll take it back it does work i though if i clicked around it would move itself but now realised it was drag and drop

[@sandyjoseph4467]

i have wrote the same code but there is a problem in having the pictures results what should i do please??????????

[@skweeby4966]

Hi, really good tutorial, I liked it and I subscribed. I just want to know how could I do so that when the puzzle is solved a popup or text appears saying the puzzle is complete. Thanks a lot !

[@KennyYipCoding]

You can add something like alert(“puzzle completed”) to show a pop up on the web page with the message “puzzle completed”

[@egivaysantosh1761]

hello Sir,can anyone help me in sorting all the individual images into one puzzled image?? howww??

[@rulenumber337]

Can we add congratiolations message after assembled? how do we do it?

[@darmawanhadi8174]

if i want to appear a alert because i have done arrange that picture, how i write to the script sir? i confuse about that

[@VirginMagdalene]

Hello! Thank you for this awesome tutorial! I do have one issue, the image isn't populating. I saw in a previous comment to make sure the image folder is linked but in going over the code (even checking the code on GitHub) I don't see where to link the images outside of adding it to the HTML multiple times. Where do I link the images so they appear on the board thru javascript? Any help would be greatly appreciated! Thank you again!

[@KennyYipCoding]

It should be in the JS code where we set the img src

[@jeeadvanced1230]

Thanks ❤❤❤❤❤❤

[@orefusado]

amazing

[@codewithme4862]

from where i can arrange this photos

[@vidhansharma9167]

sir how can we set puzzle complete statement

[@mookpatcharida]

What principles or concepts of AI are you using?

[@annbur3791]

i do not know why this does not function, i'm doing a 4x5 puzzle, and it shows almost everything, but... i can not swap any of the pieces

[@jurassicworld5205]

It won't let me move the images why?

[@oximy]

Can you make a video on how to make all the games into one website?

[@aditom02]

thanks a lot

[@SB-iy8fv]

hey, thank you for uploading this!!! i wanted to ask if the game wokd still work if i switch the images for videos, and the result is one video.

[@KennyYipCoding]

It would be better to do it with gif. With video players, it may take longer to load.

[@matteobuonanno1943]

When I put in all the addEventListener it doesn't display the tiles and I tried also copying the whole thing instead of doing it on my puzzle but it didn't work anyways!

[@KennyYipCoding]

did you change any variable names or make a typo or something? did you link your javascript code in the html file? you can also right click-inspect to see if there are any error logs in the console output. For reference, you can also check the completed code link in the description.

[@azadrizwin1741]

does it work on mobile ?

[@gintoki100]

If your doing multiple images and when you refresh it gets the random image to do it how would you approach it?

[@KennyYipCoding]

i would create a function to start with the solved puzzle ordering, so a 3x3 array like [[1,2,3],[4,5,6],[7,8,9]], then i would have a random adjacent tile swap with the blank tile, 3. repeat this as many times as you want, and then that will be the randomized ordering.

[@CodingMation]

​@@KennyYipCoding Bro can you make this game for mobile by touch events. Please If you not make then give me some hint.

[@alminab2650]

Hi Kenny! I finished the code, but I also wanted to add a finish scene with 'you won'... i tried multiple things for hours but i couldnt figure it out. Could you help me out pls?

[@rulenumber337]

im trying it also, have u solve it bro? share it please

[@markinios2]

set this as a global variable (this is used because the original imgOrder gets destroyed during the onload and we need to know the correct order): var startingImgOrder = ["4", "2", "8", "5", "1", "6", "7", "9", "3"]; const imgCorrectOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]; put this under "tile.id = r.toString() + "-" + c.toString()" (this is used to store the actual number of the image for future use): tile.name = imgOrder[0]; put this in the "if (isAdjacent)" if statement (for every move it switches the numbers in the array and checks if the array is the same as the correct order): let currImgNameIndex = startingImgOrder.indexOf(currTile.name); let otherImgNameIndex = startingImgOrder.indexOf(otherTile.name); startingImgOrder[currImgNameIndex] = otherTile.name; startingImgOrder[otherImgNameIndex] = currTile.name; if (startingImgOrder.every((val, index) => val === imgCorrectOrder[index])) { alert("You Won!") }

[@musagozail2581]

@@markinios2 didnt work for me, can you share link of a working demo?

[@gelamariconseno8951]

@@markinios2 didn't work for me too. can you share your demo?

[@syedayeshaparveen5263]

How could I move the images ..it's already set up and am unable to play..say me pls

[@KennyYipCoding]

It’s in the video tutorial

[@KennyYipCoding]

Also the completed code is in the video description if you want to test it out locally and compare your code

[@silvermist99]

I did the whole code correct but the pictures aren't moving Can you help me and tell me why

[@KennyYipCoding]

Maybe you didn’t add the function for onclick, the source code is in the GitHub link for you to check if you’d like

[@silvermist99]

@@KennyYipCoding where do I write it Cause there isn't a on click function

[@silvermist99]

@@KennyYipCoding and thank you for replying 💫💫

[@KennyYipCoding]

Previous Puzzle Game Tutorial: kzbin.info/www/bejne/iWeqf6eDfLOWi6c

[@TimeLords910]

i tested your code but it seems to not function

[@KennyYipCoding]

there’s no “click” to drag and drop through mobile I think, if that’s what you’re using but on a computer it should work fine

[@TimeLords910]

@@KennyYipCoding it was on computer i also ran your code in vscode with live-server

[@mosesvijayraj3456]

i did everything and i am getting a blank image but the border and all are visiblecan you please help me out sir

[@KennyYipCoding]

Make sure you got the path to the images folder correctly.

[@mosesvijayraj3456]

​@@KennyYipCoding i saw it sir and rectified but swapping is not happening sir

[@KennyYipCoding]

Try comparing your code to the finished one on GitHub. Might be missing something. Not too sure tbh

[@hostile_user]

@@mosesvijayraj3456 same happening with me too; did you got your problem solved?

[@KennyYipCoding]

Check out the playlist of web project tutorials here! kzbin.info/aero/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q Got a tutorial suggestion? Let me know down below!

[@karthikm.1804]

how about Pacman

[@coded_tom4599]

Make Roulette. Basically you get to choose odd or even and red or black. If you win you get 1 point per beat and if you lose you get one point per lose subtracted.

[@bluefoxw]

a coloring book :D

[@jinkaicai3330]

喜欢

[@imrulkayes5941]

otherTile.src; shows undefiend on dragEnd()

[@Unknown-cj8fv]

does it work on mobile?