Slide Puzzle Game in JavaScript HTML CSS
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- 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/ImK...
Demo: imkennyyip.git...
Website: www.kennyyipco...
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 :'(
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!
clean, calm, clear, simple = Kenny Yip Coding = AWESOME!
Kindly do a video on how you can make that one work on phones (puzzling on the phone)
Check out the playlist of web project tutorials here!
th-cam.com/play/PLnKe36F30Y4bLhA-st9sC4ZthyV7nsL2Q.html
Got a tutorial suggestion? Let me know down below!
how about Pacman
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.
a coloring book :D
Try playing with dnd-kit for drag and drop functionality if doing this in react! It makes the job easier. Great video btw 👏
great suggestion!
Previous Puzzle Game Tutorial: th-cam.com/video/S6GNtMGNcUE/w-d-xo.html
Thanku so much for explaining everything so clearly...please keeping making these videos
i have wrote the same code but there is a problem in having the pictures results what should i do please??????????
Sir please make more videos 🙏... For gaming ... Pls 🙏
how do i make a function that displays a win when i put the pieces in the correct order? thanks a lot!
I have another question, where did u define which tile is curr or other?
It won't let me move the images why?
Please how you get a new image into smaller pieces please
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
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.
It would be better to do it with gif. With video players, it may take longer to load.
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?
How could I move the images ..it's already set up and am unable to play..say me pls
It’s in the video tutorial
Also the completed code is in the video description if you want to test it out locally and compare your code
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
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
I did the whole code correct but the pictures aren't moving
Can you help me and tell me why
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
@@KennyYipCoding where do I write it
Cause there isn't a on click function
@@KennyYipCoding and thank you for replying 💫💫
Thank you so much dude.,
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?
im trying it also, have u solve it bro? share it please
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!")
}
@@markinios2 didnt work for me, can you share link of a working demo?
@@markinios2 didn't work for me too. can you share your demo?
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 !
You can add something like alert(“puzzle completed”) to show a pop up on the web page with the message “puzzle completed”
from where i can arrange this photos
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!
It should be in the JS code where we set the img src
Can we add congratiolations message after assembled? how do we do it?
hello Sir,can anyone help me in sorting all the individual images into one puzzled image??
howww??
What principles or concepts of AI are you using?
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!
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.
Thankyou so muchhh
Can you make a video on how to make all the games into one website?
sir how can we set puzzle complete statement
does it work on mobile?
If your doing multiple images and when you refresh it gets the random image to do it how would you approach it?
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.
@@KennyYipCoding
Bro can you make this game for mobile by touch events.
Please
If you not make then give me some hint.
i did everything and i am getting a blank image but the border and all are visiblecan you please help me out sir
Make sure you got the path to the images folder correctly.
@@KennyYipCoding i saw it sir and rectified but swapping is not happening sir
Try comparing your code to the finished one on GitHub. Might be missing something. Not too sure tbh
@@mosesvijayraj3456 same happening with me too; did you got your problem solved?
i tested your code but it seems to not function
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
@@KennyYipCoding it was on computer i also ran your code in vscode with live-server
Thanks ❤❤❤❤❤❤
Amazing
amazing
thanks a lot
喜欢
otherTile.src; shows undefiend on dragEnd()
does it work on mobile ?