0% found this document useful (0 votes)
19 views18 pagesMEHULCss
This document describes a beginner-friendly project to create a Candy Crush game clone using HTML, CSS, and JavaScript. It explains the structure of the game, the importance of each code section, and provides detailed code snippets for HTML, CSS, and JavaScript components. The project aims to enhance coding knowledge and experience through practical application.
Uploaded by
rutukandherCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
19 views18 pagesMEHULCss
This document describes a beginner-friendly project to create a Candy Crush game clone using HTML, CSS, and JavaScript. It explains the structure of the game, the importance of each code section, and provides detailed code snippets for HTML, CSS, and JavaScript components. The project aims to enhance coding knowledge and experience through practical application.
Uploaded by
rutukandherCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
/ 18
Candy Crush Game Using HTML CSS
& JavaScript
Introduction
Hello friends, welcome to my new blog post. Today I have created a beginner friendly project for
you. If you are new to the world of coding, this project will be of great help to you. You can learn
a lot about coding from this project.
Friends, you must have played the candy crush game, so today | have created a clone of the
candy crush game for you, which is quite amazing. Just like you play games in candy crush, you
can also play games in this, To create this game, | have used html, css and javascript, which is
quite easy, friends. When you make big projects like this, you get good knowledge of coding and
your experience also increases with it.
We have used a lot of codes to create this game, but we understand some important codes and
how that code works
HTML (index.html)
Join our Telegram for Free Coding Ebooks & Handwritten Notes!
Telegram _logo.svg
With the help of HTML we create the structure of any website or app through which we get to
know what elements are added to our website but when we create the structure with the help of
HTML, it does not look good at all. To make it look good we have to use CSS which we will see
next so let us see what all codes we have written in the HTML code
stitle>Candy Crush This is the title element of our game in which we add our title so that
the user knows which website this is. This is the icon link of our website or game, in which we have to
{add the link of our icon or the link of the file, on inserting which the icon of our project becomes
live.
script sro="scripts” charset="utf-8"> Friends, this link is a very important link for our
game. This element is used to link the javascript file with the htm file, so that our javascript file
gets linked to the htm! fie.
This element is most important in our HTML code because whenever we wr
HTML code, it is written inside the tag.
Friends, this is an important div of our game in which we are writing
our HTML code whose class we have given (scoreboard).
score
This heading is used to add the score text of our game. | have kept this heading blank because my score will be displayed automatically in this box with the help of Javascript.
title>»CodeWithCurious.com - Candy Crush¢/title>
{
candyCrushGame();
DH
function candyCrushGame() {
const grid = document.querySelector(’.grid");
const scoreDisplay = document. getElementByld('score’);
const width = 8;
const squares =
let score = 0;
const candyColors = [
“url(https://raw.githubusercontent.com/arpit456jain/Amazing-Js- Projects/master/Candy%20Crush/utils/red-candy.png)’,
"url(https://raw. githubusercontent.com/arpit4S6jain/Amazing-Js-
Projects/master/Candy%20Crush/utils/blue-candy png)’,
"url(https://raw.githubusercontent.com/arpit4S6jain/Amazing-Js-
Projects/master/Candy%20Crush/utils/green-candy.png)",
"url(https://raw. githubusercontent.com/arpit4S6jain/Amazing-Js-
Projects/master/Candy%20Crush/utils/yellow-candy.png)',
"url(https://raw. githubusercontent.com/arpit4S6jain/Amazing-Js-
Projects/master/Candy%20Crush/utils/orange-candy png)",
"url(https://raw. githubusercontent.com/arpit4S6jain/Amazing-Js-
Projects/master/Candy%20Crush/utils/purple-candy png)",
I
// Creating Game Board
function createBoard() {
for (let i= 0; 1 < width * width; i++) (
const square = document.createElement("div");
square setAttribute(“draggable’, true);
i;
let randomColor = Math.floor(Math.random() * candyColors.length);
square.setAttribute(‘id!
square.style.backgroundimage = candyColors{randomColor};
grid. appendChild(square);
squares push(square);
d
createBoard(); // Dragging the Candy
let colorBeingDragged;
let colorBeingReplaced;
let squareldBeingDragged;
let squareldBeingReplaced;
squares. forEach((square) =>
square.addEventListener(‘dragstart, dragStart)
%
‘squares. forEach((square) => square.addEventListener("dragend’, dragEnd));
squares. forEach (square) => square.addEventListener("dragover’, dragOver));
‘squares. forEach (square) =>
square.addventListener(‘dragenter’, dragEnter)
yi
squares. forEach((square) =>
square.addEventListener(‘drageleave’, dragLeave)
%
‘squares. forEach((square) => square addEventListener("drop’, dragDrop));
function dragstart() (
colorBeingDragged = this style backgroundimage;
squareldBeingDragged = parselnt(this.id);
// this. style backgroundimage =" function dragOver(e) {
epreventDefault();
function dragEnter(e) {
epreventDefault);
function dragLeave() {
this style.backgroundimage
function dragDrop() {
colorBeingReplaced = this.style.backgroundimage;
squareldBeingReplaced = parselnt(this.id);
this. style backgroundimage = colorBeingDragged;
squares[
squareldBeingDragged
1.style. backgroundimage = colorBeingReplaced;
function dragEnd() (
//Defining, What is a valid move?
let validMoves = [
‘squareldBeingDragged - 1, squareldBeingDragged - width,
‘squareldBeingDragged + 1,
‘squareldBeingDragged + width
1
let valid Move = validMoves.includes(squareldBeingReplaced);
if (squareldBeingReplaced && validMove) {
‘squareldBeingReplaced = null;
} else if (squareldBeingReplaced && IvalidMove) {
squares[
squareldBeingReplaced
| style.backgroundimage = colorBeingReplaced;
squares[
squareldBeingDragged
].style.backgroundimage = colorBeingDragged;
telse
squares[
squareldBeingDragged
| style.backgroundimage = colorBeingDragged;
//Dropping candies once some have been cleared
function movelntoSquareBelow() {
for (i= 0; 1< 55; i++) {
if (squaresti + width]. style backgroundimage squares[i + width] style backgroundimage =
‘squares[i.style.backgroundimage;
squaresl].style backgroundimag
const firstRow = (0, 1, 2,3, 4, 5,6, 7];
const isFirstRow = firstRow.includes(i);
if (isFirstRow && squares[i] style backgroundimage ===") {
let randomColor = Math floor(
Math.random() * candyColors.length
%
squares|i].style.backgroundimage = candyColors{randomColor];
/i/-> Checking for Matches <-///
//For Row of Four
function checkRowForFour() {
for (i= 0; 1 < 60; i++) {
let rowOfFour = [i,i+ 1,i+2,i+ 3]:
let decidedColor = squares[i|.style. backgroundimage;
const isBlank = squares[i] style. backgroundimage i
if (notValid includes(i)) continue;
it( rowOfFour-every(
(index) =>
squares[index]. style backgroundimage === decidedColor &&
‘isBlank
)
a
score += 4;
scoreDisplay.innerHTML = score;
rowOfFour.forEach((index) => {
‘squares[index].style.backgroundimage =";
v:
checkRowForFour();
//For Column of Four
function checkColumnForFour() {
for (i= 0; 1< 39; i++) {
let columnofFour = [i,+ width, i + width * 2, i+ width * 3];
let decidedColor = squaresli] style. backgroundimage;
const isBlank = squares[i]style.backgroundimage
if(
columnOfFour.every( (index) =>
squares[indexl.style.backgroundimage === decidedColor &&
isBlank
)
vt
score += 4;
scoreDisplay.innerHTML = score;
columnOfFour forEach((index) => {
squareslindex].style.backgroundimage
YD
checkColumnForFour();
//For Row of Three
function checkRowForThree() {
for ((= 0;1< 61; i+) {
let rowOfThree =[i,i+ 1, i+ 21:
let decidedColor = squares|i).style.backgroundimage;
const isBlank = squares[i|style.backgroundimage 14,
15,
22,
23,
30,
31,
38,
39,
46,
47,
54,
55
I
if (notValid.includes(i)) continue;
if(
rowOfThree.every(
(index) =>
squarestindex].style.backgroundimage === decidedColor &&
tisBlank
)
Me
score += 3;
scoreDisplay.innerHTML = score;
rowOfThree.forEach((index) => { ssquares[index] style backgroundimage ="
Dy
checkRowForThree();
//For Column of Three
function checkColumnForThree() {
for (i= 0; 1< 47; ++) {
let columnOfThree = [i+ width, i+ width * 2}
let decidedColor = squaresti).style.backgroundimage;
const isBlank = squares[i]style.backgroundimage
if(
columnOfThree.every(
(index) =>
squares[index] style backgroundimage === decidedColor &&
‘isBlank
)
a
score += 3;
scoreDisplay innerHTML = score;
columnOfThree.forEach((index) => {
‘squarestindex].style.backgroundimage ="; d
checkColumnForThree();
window setinterval(function () (
checkRowForFour();
checkColumnForFour();
checkRowForThree();
checkColumnForThree();
movelntoSquareBelow();
}, 100);
ouTPuT:
