Slide Puzzle Game banner

Slide Puzzle Game

11 devlogs
4h 49m 18s

This is a puzzle game where you have to click on the shuffle button and arrange the numbers in the correct order.

Demo Repository

Loading README...

Sadiya

Shipped this project!

Hours: 4.82
Cookies: 🍪 34
Multiplier: 7.1 cookies/hr

I built a slide puzzle game using HTML, CSS and JavaScript. I learned how to structure a webpage, style it with CSS, and use JS to handle clicks, move tiles, shuffle the puzzle (with the button), and check when the player wins (by displaying a win message).

Sadiya

Added a title on the game page

Attachment
0
Sadiya

I added comments to better understand the code and I changed the colors that I never heard or seen before

Attachment
1

Comments

Sadiya
Sadiya about 2 months ago

Fixed a typo on the first comment line
apge → page

Sadiya

This is the final result

0
Sadiya

I am on the JS right now but in the meantime this is how it looks without the words on the side

Attachment
0
Sadiya

I am redoing this project with different things
Here is a pic of it so far

Attachment
0
Sadiya

I am still trying to make this work but I added my image in HTML

Attachment
0
Sadiya

Added features such as dragging, moving and turns

Attachment
0
Sadiya

So I made code where I link my image and it should appear in the board
My next step is to figure out why my image is not appearing on the board

Attachment
0
Sadiya

I was able to get my image into pieces
It took a loooooooong time but I was able to do it
And I am happy with the results

Attachment
0
Sadiya

I am going to rewrite my code but in the meantime look at this cute avocado that I found and plan on using for this project

Attachment
0
Sadiya

This is how it looks so far after adding the css
(Board, pictures holder and turn counter)

Attachment
0