├── images
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
├── 7.jpg
├── 8.jpg
├── 9.jpg
├── 10.jpg
├── 11.jpg
├── 12.jpg
├── 13.jpg
├── 14.jpg
├── 15.jpg
├── 16.jpg
├── 17.jpg
├── 18.jpg
├── 19.jpg
├── 20.jpg
├── 21.jpg
├── 22.jpg
├── 23.jpg
├── 24.jpg
├── 25.jpg
├── 26.jpg
├── blank.jpg
└── blank2.jpg
├── index.html
├── README.md
├── puzzle.css
└── puzzle.js
/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/1.jpg
--------------------------------------------------------------------------------
/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/2.jpg
--------------------------------------------------------------------------------
/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/3.jpg
--------------------------------------------------------------------------------
/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/4.jpg
--------------------------------------------------------------------------------
/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/5.jpg
--------------------------------------------------------------------------------
/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/6.jpg
--------------------------------------------------------------------------------
/images/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/7.jpg
--------------------------------------------------------------------------------
/images/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/8.jpg
--------------------------------------------------------------------------------
/images/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/9.jpg
--------------------------------------------------------------------------------
/images/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/10.jpg
--------------------------------------------------------------------------------
/images/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/11.jpg
--------------------------------------------------------------------------------
/images/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/12.jpg
--------------------------------------------------------------------------------
/images/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/13.jpg
--------------------------------------------------------------------------------
/images/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/14.jpg
--------------------------------------------------------------------------------
/images/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/15.jpg
--------------------------------------------------------------------------------
/images/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/16.jpg
--------------------------------------------------------------------------------
/images/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/17.jpg
--------------------------------------------------------------------------------
/images/18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/18.jpg
--------------------------------------------------------------------------------
/images/19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/19.jpg
--------------------------------------------------------------------------------
/images/20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/20.jpg
--------------------------------------------------------------------------------
/images/21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/21.jpg
--------------------------------------------------------------------------------
/images/22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/22.jpg
--------------------------------------------------------------------------------
/images/23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/23.jpg
--------------------------------------------------------------------------------
/images/24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/24.jpg
--------------------------------------------------------------------------------
/images/25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/25.jpg
--------------------------------------------------------------------------------
/images/26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/26.jpg
--------------------------------------------------------------------------------
/images/blank.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/blank.jpg
--------------------------------------------------------------------------------
/images/blank2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Puzzle-Game/HEAD/images/blank2.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Avengers Puzzle
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Turns: 0
16 |
17 |
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Puzzle-Game](https://youtu.be/S6GNtMGNcUE)
2 | - Coding Tutorial: https://youtu.be/S6GNtMGNcUE
3 | - Demo: https://imkennyyip.github.io/Puzzle-Game/
4 |
5 | In this tutorial, you will learn how to create a drag and drop Avengers themed puzzle game! 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.
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/puzzle.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, Helvetica, sans-serif;
3 | text-align: center;
4 | }
5 |
6 | #board {
7 | width: 400px;
8 | height: 400px;
9 | border: 2px solid purple;
10 |
11 | margin: 0 auto;
12 | display: flex;
13 | flex-wrap: wrap;
14 | }
15 |
16 | #board img {
17 | width: 79px;
18 | height: 79px;
19 | border: 0.5px solid lightblue;
20 | }
21 |
22 |
23 | #pieces {
24 | width: 1040px;
25 | height: 160px;
26 | border: 2px solid purple;
27 |
28 | margin: 0 auto;
29 | display: flex;
30 | flex-wrap: wrap;
31 | }
32 |
33 | #pieces img {
34 | width: 79px;
35 | height: 79px;
36 | border: 0.5px solid lightblue;
37 | }
--------------------------------------------------------------------------------
/puzzle.js:
--------------------------------------------------------------------------------
1 | var rows = 5;
2 | var columns = 5;
3 |
4 | var currTile;
5 | var otherTile;
6 |
7 | var turns = 0;
8 |
9 | window.onload = function() {
10 | //initialize the 5x5 board
11 | for (let r = 0; r < rows; r++) {
12 | for (let c = 0; c < columns; c++) {
13 | //![]()
14 | let tile = document.createElement("img");
15 | tile.src = "./images/blank.jpg";
16 |
17 | //DRAG FUNCTIONALITY
18 | tile.addEventListener("dragstart", dragStart); //click on image to drag
19 | tile.addEventListener("dragover", dragOver); //drag an image
20 | tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
21 | tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
22 | tile.addEventListener("drop", dragDrop); //drop an image onto another one
23 | tile.addEventListener("dragend", dragEnd); //after you completed dragDrop
24 |
25 | document.getElementById("board").append(tile);
26 | }
27 | }
28 |
29 | //pieces
30 | let pieces = [];
31 | for (let i=1; i <= rows*columns; i++) {
32 | pieces.push(i.toString()); //put "1" to "25" into the array (puzzle images names)
33 | }
34 | pieces.reverse();
35 | for (let i =0; i < pieces.length; i++) {
36 | let j = Math.floor(Math.random() * pieces.length);
37 |
38 | //swap
39 | let tmp = pieces[i];
40 | pieces[i] = pieces[j];
41 | pieces[j] = tmp;
42 | }
43 |
44 | for (let i = 0; i < pieces.length; i++) {
45 | let tile = document.createElement("img");
46 | tile.src = "./images/" + pieces[i] + ".jpg";
47 |
48 | //DRAG FUNCTIONALITY
49 | tile.addEventListener("dragstart", dragStart); //click on image to drag
50 | tile.addEventListener("dragover", dragOver); //drag an image
51 | tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
52 | tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
53 | tile.addEventListener("drop", dragDrop); //drop an image onto another one
54 | tile.addEventListener("dragend", dragEnd); //after you completed dragDrop
55 |
56 | document.getElementById("pieces").append(tile);
57 | }
58 | }
59 |
60 | //DRAG TILES
61 | function dragStart() {
62 | currTile = this; //this refers to image that was clicked on for dragging
63 | }
64 |
65 | function dragOver(e) {
66 | e.preventDefault();
67 | }
68 |
69 | function dragEnter(e) {
70 | e.preventDefault();
71 | }
72 |
73 | function dragLeave() {
74 |
75 | }
76 |
77 | function dragDrop() {
78 | otherTile = this; //this refers to image that is being dropped on
79 | }
80 |
81 | function dragEnd() {
82 | if (currTile.src.includes("blank")) {
83 | return;
84 | }
85 | let currImg = currTile.src;
86 | let otherImg = otherTile.src;
87 | currTile.src = otherImg;
88 | otherTile.src = currImg;
89 |
90 | turns += 1;
91 | document.getElementById("turns").innerText = turns;
92 | }
--------------------------------------------------------------------------------