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 d3096ba

Browse files
authored
Update script.js
dd
1 parent b79fca0 commit d3096ba

File tree

1 file changed

+44
-58
lines changed

1 file changed

+44
-58
lines changed

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

Lines changed: 44 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
<script>
12
document.addEventListener("DOMContentLoaded", () => {
23
candyCrushGame();
34
});
45

56
function candyCrushGame() {
6-
// DOM Elements
77
const grid = document.querySelector(".grid");
88
const scoreDisplay = document.getElementById("score");
99
const timerDisplay = document.getElementById("timer");
@@ -12,7 +12,6 @@ function candyCrushGame() {
1212
const timedButton = document.getElementById("timedMode");
1313
const changeModeButton = document.getElementById("changeMode");
1414

15-
// Game State Variables
1615
const width = 8;
1716
const squares = [];
1817
let score = 0;
@@ -30,10 +29,9 @@ function candyCrushGame() {
3029
"url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js-Projects/master/Candy%20Crush/utils/purple-candy.png)",
3130
];
3231

33-
// Create the Game Board
3432
function createBoard() {
35-
grid.innerHTML = "";// Clear existing grid
36-
squares.length = 0;// Clear squares array
33+
grid.innerHTML = "";
34+
squares.length = 0;
3735
for (let i = 0; i < width * width; i++) {
3836
const square = document.createElement("div");
3937
square.setAttribute("draggable", true);
@@ -43,73 +41,66 @@ function candyCrushGame() {
4341
grid.appendChild(square);
4442
squares.push(square);
4543
}
46-
47-
// Drag + Touch Event Listeners
44+
// Desktop drag
45+
squares.forEach(square => square.addEventListener("dragstart", dragStart));
46+
squares.forEach(square => square.addEventListener("dragend", dragEnd));
47+
squares.forEach(square => square.addEventListener("dragover", dragOver));
48+
squares.forEach(square => square.addEventListener("dragenter", dragEnter));
49+
squares.forEach(square => square.addEventListener("dragleave", dragLeave));
50+
squares.forEach(square => square.addEventListener("drop", dragDrop));
51+
52+
// Mobile touch
53+
let touchStartX = 0, touchStartY = 0;
4854
squares.forEach(square => {
49-
// PC Drag Events
50-
square.addEventListener("dragstart", dragStart);
51-
square.addEventListener("dragend", dragEnd);
52-
square.addEventListener("dragover", dragOver);
53-
square.addEventListener("dragenter", dragEnter);
54-
square.addEventListener("dragleave", dragLeave);
55-
square.addEventListener("drop", dragDrop);
56-
57-
// Mobile Touch Events
58-
square.addEventListener("touchstart", function (e) {
59-
e.preventDefault();
60-
colorBeingDragged = this.style.backgroundImage;
61-
squareIdBeingDragged = parseInt(this.id);
55+
square.addEventListener("touchstart", e => {
56+
touchStartX = e.touches[0].clientX;
57+
touchStartY = e.touches[0].clientY;
58+
colorBeingDragged = square.style.backgroundImage;
59+
squareIdBeingDragged = parseInt(square.id);
6260
});
6361

64-
square.addEventListener("touchmove", function (e) {
65-
e.preventDefault();
66-
const touch = e.touches[0];
67-
const target = document.elementFromPoint(touch.clientX, touch.clientY);
68-
if (target && target.id) {
69-
squareIdBeingReplaced = parseInt(target.id);
70-
colorBeingReplaced = target.style.backgroundImage;
62+
square.addEventListener("touchend", e => {
63+
let touchEndX = e.changedTouches[0].clientX;
64+
let touchEndY = e.changedTouches[0].clientY;
65+
66+
let dx = touchEndX - touchStartX;
67+
let dy = touchEndY - touchStartY;
68+
69+
if (Math.abs(dx) > Math.abs(dy)) {
70+
// Horizontal
71+
if (dx > 0) squareIdBeingReplaced = squareIdBeingDragged + 1;
72+
else squareIdBeingReplaced = squareIdBeingDragged - 1;
73+
} else {
74+
// Vertical
75+
if (dy > 0) squareIdBeingReplaced = squareIdBeingDragged + width;
76+
else squareIdBeingReplaced = squareIdBeingDragged - width;
7177
}
72-
});
7378

74-
square.addEventListener("touchend",function() {
75-
if(squareIdBeingReplaced!=null){
79+
if(squareIdBeingReplaced>=0&&squareIdBeingReplaced<width*width) {
80+
colorBeingReplaced=squares[squareIdBeingReplaced].style.backgroundImage;
7681
squares[squareIdBeingReplaced].style.backgroundImage = colorBeingDragged;
7782
squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced;
78-
dragEnd();
7983
}
8084
});
8185
});
8286
}
8387

84-
// Drag and Drop Functions
8588
let colorBeingDragged, colorBeingReplaced, squareIdBeingDragged, squareIdBeingReplaced;
8689

8790
function dragStart() {
8891
colorBeingDragged = this.style.backgroundImage;
8992
squareIdBeingDragged = parseInt(this.id);
9093
}
91-
92-
function dragOver(e) {
93-
e.preventDefault();
94-
}
95-
96-
function dragEnter(e) {
97-
e.preventDefault();
98-
}
99-
100-
function dragLeave() {
101-
// No action needed
102-
}
103-
94+
function dragOver(e) { e.preventDefault(); }
95+
function dragEnter(e) { e.preventDefault(); }
96+
function dragLeave() {}
10497
function dragDrop() {
10598
colorBeingReplaced = this.style.backgroundImage;
10699
squareIdBeingReplaced = parseInt(this.id);
107100
this.style.backgroundImage = colorBeingDragged;
108101
squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced;
109102
}
110-
111103
function dragEnd() {
112-
// Define valid moves
113104
let validMoves = [
114105
squareIdBeingDragged - 1,
115106
squareIdBeingDragged - width,
@@ -128,7 +119,6 @@ function candyCrushGame() {
128119
}
129120
}
130121

131-
// Move Candies Down
132122
function moveIntoSquareBelow() {
133123
for (let i = 0; i < width; i++) {
134124
if (squares[i].style.backgroundImage === "") {
@@ -144,13 +134,12 @@ function candyCrushGame() {
144134
}
145135
}
146136

147-
// Check for Matches
148137
function checkRowForFour() {
149138
for (let i = 0; i < 60; i++) {
150139
if (i % width >= width - 3) continue;
151140
let rowOfFour = [i, i + 1, i + 2, i + 3];
152141
let decidedColor = squares[i].style.backgroundImage;
153-
const isBlank = decidedColor === "";
142+
const isBlank = squares[i].style.backgroundImage === "";
154143
if (rowOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
155144
score += 4;
156145
scoreDisplay.innerHTML = score;
@@ -163,7 +152,7 @@ function candyCrushGame() {
163152
for (let i = 0; i < 40; i++) {
164153
let columnOfFour = [i, i + width, i + 2 * width, i + 3 * width];
165154
let decidedColor = squares[i].style.backgroundImage;
166-
const isBlank = decidedColor === "";
155+
const isBlank = squares[i].style.backgroundImage === "";
167156
if (columnOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
168157
score += 4;
169158
scoreDisplay.innerHTML = score;
@@ -177,7 +166,7 @@ function candyCrushGame() {
177166
if (i % width >= width - 2) continue;
178167
let rowOfThree = [i, i + 1, i + 2];
179168
let decidedColor = squares[i].style.backgroundImage;
180-
const isBlank = decidedColor === "";
169+
const isBlank = squares[i].style.backgroundImage === "";
181170
if (rowOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
182171
score += 3;
183172
scoreDisplay.innerHTML = score;
@@ -190,7 +179,7 @@ function candyCrushGame() {
190179
for (let i = 0; i < 48; i++) {
191180
let columnOfThree = [i, i + width, i + 2 * width];
192181
let decidedColor = squares[i].style.backgroundImage;
193-
const isBlank = decidedColor === "";
182+
const isBlank = squares[i].style.backgroundImage === "";
194183
if (columnOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
195184
score += 3;
196185
scoreDisplay.innerHTML = score;
@@ -199,7 +188,6 @@ function candyCrushGame() {
199188
}
200189
}
201190

202-
// Game Loop
203191
function gameLoop() {
204192
checkRowForFour();
205193
checkColumnForFour();
@@ -208,7 +196,6 @@ function candyCrushGame() {
208196
moveIntoSquareBelow();
209197
}
210198

211-
// Start the Game
212199
function startGame(mode) {
213200
currentMode = mode;
214201
modeSelection.style.display = "none";
@@ -253,9 +240,7 @@ function candyCrushGame() {
253240

254241
function changeMode() {
255242
clearInterval(gameInterval);
256-
if (currentMode === "timed") {
257-
clearInterval(timerInterval);
258-
}
243+
if (currentMode === "timed") clearInterval(timerInterval);
259244
grid.style.display = "none";
260245
scoreDisplay.parentElement.style.display = "none";
261246
modeSelection.style.display = "flex";
@@ -265,3 +250,4 @@ function candyCrushGame() {
265250
timedButton.addEventListener("click", () => startGame("timed"));
266251
changeModeButton.addEventListener("click", changeMode);
267252
}
253+
</script>

0 commit comments

Comments
(0)

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