Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7d28864

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /