Skip to content

Commit 7d28864

Browse files
he-is-talhahe-is-talha
committed
Added 30 games
1 parent a895e98 commit 7d28864

File tree

102 files changed

+9974
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+9974
-0
lines changed

‎01-Candy-Crush-Game/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Talha - Candy Crush</title>
6+
7+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
8+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
9+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
10+
11+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
12+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
13+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
14+
15+
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg">
16+
17+
<link rel="stylesheet" href="style.css">
18+
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
19+
<script src="script.js" charset="utf-8"></script>
20+
</head>
21+
<body>
22+
<div class="scoreBoard">
23+
<h3>score</h3>
24+
<h1 id="score"></h1>
25+
</div>
26+
<div class="grid"></div>
27+
</body>
28+
</html>

‎01-Candy-Crush-Game/script.js‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
candyCrushGame();
3+
});
4+
5+
function candyCrushGame() {
6+
const grid = document.querySelector(".grid");
7+
const scoreDisplay = document.getElementById("score");
8+
const width = 8;
9+
const squares = [];
10+
let score = 0;
11+
12+
const candyColors = [
13+
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/red-candy.png)",
14+
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/blue-candy.png)",
15+
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/green-candy.png)",
16+
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/yellow-candy.png)",
17+
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/orange-candy.png)",
18+
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/purple-candy.png)",
19+
];
20+
21+
// Creating Game Board
22+
function createBoard() {
23+
for (let i = 0; i < width * width; i++) {
24+
const square = document.createElement("div");
25+
square.setAttribute("draggable", true);
26+
square.setAttribute("id", i);
27+
let randomColor = Math.floor(Math.random() * candyColors.length);
28+
square.style.backgroundImage = candyColors[randomColor];
29+
grid.appendChild(square);
30+
squares.push(square);
31+
}
32+
}
33+
createBoard();
34+
35+
// Dragging the Candy
36+
let colorBeingDragged;
37+
let colorBeingReplaced;
38+
let squareIdBeingDragged;
39+
let squareIdBeingReplaced;
40+
41+
squares.forEach((square) =>
42+
square.addEventListener("dragstart", dragStart)
43+
);
44+
squares.forEach((square) => square.addEventListener("dragend", dragEnd));
45+
squares.forEach((square) => square.addEventListener("dragover", dragOver));
46+
squares.forEach((square) =>
47+
square.addEventListener("dragenter", dragEnter)
48+
);
49+
squares.forEach((square) =>
50+
square.addEventListener("drageleave", dragLeave)
51+
);
52+
squares.forEach((square) => square.addEventListener("drop", dragDrop));
53+
54+
function dragStart() {
55+
colorBeingDragged = this.style.backgroundImage;
56+
squareIdBeingDragged = parseInt(this.id);
57+
// this.style.backgroundImage = ''
58+
}
59+
60+
function dragOver(e) {
61+
e.preventDefault();
62+
}
63+
64+
function dragEnter(e) {
65+
e.preventDefault();
66+
}
67+
68+
function dragLeave() {
69+
this.style.backgroundImage = "";
70+
}
71+
72+
function dragDrop() {
73+
colorBeingReplaced = this.style.backgroundImage;
74+
squareIdBeingReplaced = parseInt(this.id);
75+
this.style.backgroundImage = colorBeingDragged;
76+
squares[
77+
squareIdBeingDragged
78+
].style.backgroundImage = colorBeingReplaced;
79+
}
80+
81+
function dragEnd() {
82+
//Defining, What is a valid move?
83+
let validMoves = [
84+
squareIdBeingDragged - 1,
85+
squareIdBeingDragged - width,
86+
squareIdBeingDragged + 1,
87+
squareIdBeingDragged + width
88+
];
89+
let validMove = validMoves.includes(squareIdBeingReplaced);
90+
91+
if (squareIdBeingReplaced && validMove) {
92+
squareIdBeingReplaced = null;
93+
} else if (squareIdBeingReplaced && !validMove) {
94+
squares[
95+
squareIdBeingReplaced
96+
].style.backgroundImage = colorBeingReplaced;
97+
squares[
98+
squareIdBeingDragged
99+
].style.backgroundImage = colorBeingDragged;
100+
} else
101+
squares[
102+
squareIdBeingDragged
103+
].style.backgroundImage = colorBeingDragged;
104+
}
105+
106+
//Dropping candies once some have been cleared
107+
function moveIntoSquareBelow() {
108+
for (i = 0; i < 55; i++) {
109+
if (squares[i + width].style.backgroundImage === "") {
110+
squares[i + width].style.backgroundImage =
111+
squares[i].style.backgroundImage;
112+
squares[i].style.backgroundImage = "";
113+
const firstRow = [0, 1, 2, 3, 4, 5, 6, 7];
114+
const isFirstRow = firstRow.includes(i);
115+
if (isFirstRow && squares[i].style.backgroundImage === "") {
116+
let randomColor = Math.floor(
117+
Math.random() * candyColors.length
118+
);
119+
squares[i].style.backgroundImage = candyColors[randomColor];
120+
}
121+
}
122+
}
123+
}
124+
125+
///-> Checking for Matches <-///
126+
127+
//For Row of Four
128+
function checkRowForFour() {
129+
for (i = 0; i < 60; i++) {
130+
let rowOfFour = [i, i + 1, i + 2, i + 3];
131+
let decidedColor = squares[i].style.backgroundImage;
132+
const isBlank = squares[i].style.backgroundImage === "";
133+
134+
const notValid = [
135+
5,
136+
6,
137+
7,
138+
13,
139+
14,
140+
15,
141+
21,
142+
22,
143+
23,
144+
29,
145+
30,
146+
31,
147+
37,
148+
38,
149+
39,
150+
45,
151+
46,
152+
47,
153+
53,
154+
54,
155+
55
156+
];
157+
if (notValid.includes(i)) continue;
158+
159+
if (
160+
rowOfFour.every(
161+
(index) =>
162+
squares[index].style.backgroundImage === decidedColor &&
163+
!isBlank
164+
)
165+
) {
166+
score += 4;
167+
scoreDisplay.innerHTML = score;
168+
rowOfFour.forEach((index) => {
169+
squares[index].style.backgroundImage = "";
170+
});
171+
}
172+
}
173+
}
174+
checkRowForFour();
175+
176+
//For Column of Four
177+
function checkColumnForFour() {
178+
for (i = 0; i < 39; i++) {
179+
let columnOfFour = [i, i + width, i + width * 2, i + width * 3];
180+
let decidedColor = squares[i].style.backgroundImage;
181+
const isBlank = squares[i].style.backgroundImage === "";
182+
183+
if (
184+
columnOfFour.every(
185+
(index) =>
186+
squares[index].style.backgroundImage === decidedColor &&
187+
!isBlank
188+
)
189+
) {
190+
score += 4;
191+
scoreDisplay.innerHTML = score;
192+
columnOfFour.forEach((index) => {
193+
squares[index].style.backgroundImage = "";
194+
});
195+
}
196+
}
197+
}
198+
checkColumnForFour();
199+
200+
//For Row of Three
201+
function checkRowForThree() {
202+
for (i = 0; i < 61; i++) {
203+
let rowOfThree = [i, i + 1, i + 2];
204+
let decidedColor = squares[i].style.backgroundImage;
205+
const isBlank = squares[i].style.backgroundImage === "";
206+
207+
const notValid = [
208+
6,
209+
7,
210+
14,
211+
15,
212+
22,
213+
23,
214+
30,
215+
31,
216+
38,
217+
39,
218+
46,
219+
47,
220+
54,
221+
55
222+
];
223+
if (notValid.includes(i)) continue;
224+
225+
if (
226+
rowOfThree.every(
227+
(index) =>
228+
squares[index].style.backgroundImage === decidedColor &&
229+
!isBlank
230+
)
231+
) {
232+
score += 3;
233+
scoreDisplay.innerHTML = score;
234+
rowOfThree.forEach((index) => {
235+
squares[index].style.backgroundImage = "";
236+
});
237+
}
238+
}
239+
}
240+
checkRowForThree();
241+
242+
//For Column of Three
243+
function checkColumnForThree() {
244+
for (i = 0; i < 47; i++) {
245+
let columnOfThree = [i, i + width, i + width * 2];
246+
let decidedColor = squares[i].style.backgroundImage;
247+
const isBlank = squares[i].style.backgroundImage === "";
248+
249+
if (
250+
columnOfThree.every(
251+
(index) =>
252+
squares[index].style.backgroundImage === decidedColor &&
253+
!isBlank
254+
)
255+
) {
256+
score += 3;
257+
scoreDisplay.innerHTML = score;
258+
columnOfThree.forEach((index) => {
259+
squares[index].style.backgroundImage = "";
260+
});
261+
}
262+
}
263+
}
264+
checkColumnForThree();
265+
266+
267+
window.setInterval(function () {
268+
checkRowForFour();
269+
checkColumnForFour();
270+
checkRowForThree();
271+
checkColumnForThree();
272+
moveIntoSquareBelow();
273+
}, 100);
274+
}

‎01-Candy-Crush-Game/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.grid {
2+
display: flex;
3+
flex-wrap: wrap;
4+
height: 560px;
5+
min-width: 560px;
6+
margin-left: 80px;
7+
margin-top: 50px;
8+
background-color: rgba(109, 127, 151, 0.5);
9+
padding: 5px;
10+
color: #85796b;
11+
border-radius: 10px;
12+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
13+
}
14+
15+
.grid div {
16+
height: 70px;
17+
width: 70px;
18+
}
19+
20+
h3 {
21+
font-family: "Montserrat", sans-serif;
22+
text-transform: uppercase;
23+
}
24+
25+
h1 {
26+
font-family: "Montserrat", sans-serif;
27+
text-transform: uppercase;
28+
margin-top: -10px;
29+
}
30+
31+
.invisible {
32+
background-color: white;
33+
}
34+
35+
body {
36+
background-image: url('https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/bg.png');
37+
max-width: 100vh;
38+
display: flex;
39+
}
40+
41+
.scoreBoard {
42+
background-color: cyan;
43+
border-radius: 20px;
44+
margin-top: 200px;
45+
margin-left: 200px;
46+
width: auto;
47+
height: 120px;
48+
padding: 20px;
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: space-between;
52+
align-items: center;
53+
text-align: center;
54+
color: #85796b;
55+
}

0 commit comments

Comments
 (0)