Puzzle Game in Javascript HTML CSS

Create a puzzle using javascript html and css! In this tutorial, you will learn how to create a drag and drop Avengers themed puzzle game in javascript! You will learn how to shuffle the puzzle pieces, write click handlers to drag and drop puzzle pieces onto the board, and keep track of the number of turns the player has taken to solve the puzzle.

Java Game Programming Projects Playlist:

JavaScript Game Programming Projects Playlist:

Subscribe for more coding tutorials 😄!

[KennyYipCoding]

Check out the playlist of web project tutorials here!

Got a tutorial suggestion? Let me know down below!

[ildblm]

This is a really good tutorial. I appreciate the easy clear code, which made it possible to actually learn something. I also enjoyed the game. Thank you so much.

[svetoboririyskiy]

This is the best explanation of puzzle development that I've seen on the web (and I've seen a lot). THANK YOU VERY MUCH!!!

( only on a small 15" monitor, the cells slide down and you need to increase the page size by %, but then you can't see the details of the puzzle)

[TheRightWay-ts]

Thank you sooo much for explaining the logic, it was really helpful. I integrated this puzzle in one of my projects, adding also a timer and a table where I stored the scores locally and it turned out pretty great! 🎉

[adarshdiwakar]

how can wo implement code so that game stops after the win ??

[chetanrathi]

totally digging your style. thanks for making these tuts! really helpful.

[khanmahebullahnisarahmed]

hello kenny your videos are Awesome plz dont stop to make this videos i am watching so many tutorials but your tutorials are literally heads off 😊😍👌

[JeatBunkie]

Nice vid :) thought I had an original idea for my portfolio and came to check if it has been done, of course it has lol, ah well thanks for the help making it

[maheshmahia]

This is great way of teaching JS, Is it possible to show how you have divided that image into 25 pieces, in another video. Thank You

[mathildeheu]

Thanks so much for this! May I ask how would you code a confirmation mechanism: like when it's complete, and the grid starts to glow with a nice color or something?

[ychats]

The display of the puzzles is not correct on safari: 4 out of 6 instead of 5 out of 6 for the edge, and the div, on 3 lines. Do you have an instruction for it to display correctly on safari as well? THANKS

[NicaSimon]

REally like your example - but in a world of mobile sadly it does not work on my tablet :( Have you considered doing an update with a mobile friendly puzzle?

[sharmafoodvlogs]

Can you tell us how to make website like word.tips like searching word with length, start with, end with, containing, including excluding features

[sriya]

Randomly i got this video and i can't understand .what the hell was that
then i googel what is html, css, java then i know about that after this i watch many videos of HTML, CSS, JAVA then i make a simple website
its fun

[jackal_sniperr]

I don't know but the project doesn't respond to mobile clicks

[ychats]

Hello, thanks for your puzzle. I did just like you, but ly images don't show up, and I can't find what's missing. Can you help me?

[joochanguk]

how to add file on chrome like the started video?

[ngjingkai]

Hi, is it possible to add a validation? Like for example, if someone solves the puzzle correctly, a message would pop up and say Good Job!
This would help me greatly for my project. Thank you so much!

[regischenu]

please would you be able to code for mobile phone with touch functionality?
all your codes are working very well on contrary to many other videos and it makes a big difference to learners like me but as these days mobile phone is the king would you be able to show how to do it for it. Thank you very much

[Rysted]

I have made a significant improvement to the project, I hope you can see it and accept the pull request :)