Candy Crush Saga With with HTML
CSS and JavaScript
To play Candy Crush Saga game you need to drag & drop a candy the similar candy.
Candy Crush Saga is a free-to-play tile-matching video game released by King on April 12, 2012, originally for Facebook; other versions for iOS, Android, I made a clone of it.
Video Tutorial of Candy Crush Saga Game
Candy Crush Saga Game [Source Codes]
To Create Candy Crush Saga Game with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Candy Crush</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <h1>Score: <span id="score">0</span></h1>
- <div id="board"></div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- body {
- background: url("./background.jpg") no-repeat center center fixed;
- background-size: cover;
- color: white;
- text-align: center;
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
-
- #board {
- width: 450px;
- height: 450px;
- background-color: #CFD0D0;
- border: 8px solid #4C5F07;
- border-radius: 8px;
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
- }
-
- #board img {
- width: 50px;
- height: 50px;
- }
Now paste the following codes into your script.js file
- var candies = ["Blue", "Orange", "Green", "Yellow", "Red", "Purple"];
- var board = [];
- var rows = 9;
- var columns = 9;
- var score = 0;
-
- var currTile;
- var otherTile;
-
- window.onload = function() {
- startGame();
-
- //1/10th of a second
- window.setInterval(function(){
- crushCandy();
- slideCandy();
- generateCandy();
- }, 100);
- }
-
- function randomCandy() {
- return candies[Math.floor(Math.random() * candies.length)];
- }
-
- function startGame() {
- for (let r = 0; r < rows; r++) {
- let row = [];
- for (let c = 0; c < columns; c++) {
-
- let tile = document.createElement("img");
- tile.id = r.toString() + "-" + c.toString();
- tile.src = "./images/" + randomCandy() + ".png";
-
- tile.addEventListener("dragstart", dragStart); //click on a candy, initialize drag process
- tile.addEventListener("dragover", dragOver);
- tile.addEventListener("dragenter", dragEnter);
- tile.addEventListener("dragleave", dragLeave);
- tile.addEventListener("drop", dragDrop);
- tile.addEventListener("dragend", dragEnd);
- document.getElementById("board").append(tile);
- row.push(tile);
- }
- board.push(row);
- }
-
- console.log(board);
- }
-
- function dragStart() {
-
- currTile = this;
- }
-
- function dragOver(e) {
- e.preventDefault();
- }
-
- function dragEnter(e) {
- e.preventDefault();
- }
-
- function dragLeave() {
-
- }
-
- function dragDrop() {
-
- otherTile = this;
- }
-
- function dragEnd() {
-
- if (currTile.src.includes("blank") || otherTile.src.includes("blank")) {
- return;
- }
-
- let currCoords = currTile.id.split("-");
-
- let r = parseInt(currCoords[0]);
- let c = parseInt(currCoords[1]);
-
- let otherCoords = otherTile.id.split("-");
- let r2 = parseInt(otherCoords[0]);
- let c2 = parseInt(otherCoords[1]);
-
- let moveLeft = c2 == c-1 && r == r2;
- let moveRight = c2 == c+1 && r == r2;
-
- let moveUp = r2 == r-1 && c == c2;
- let moveDown = r2 == r+1 && c == c2;
-
- let isAdjacent = moveLeft || moveRight || moveUp || moveDown;
-
- if (isAdjacent) {
- let currImg = currTile.src;
- let otherImg = otherTile.src;
- currTile.src = otherImg;
- otherTile.src = currImg;
-
- let validMove = checkValid();
- if (!validMove) {
- let currImg = currTile.src;
- let otherImg = otherTile.src;
- currTile.src = otherImg;
- otherTile.src = currImg;
- }
- }
- }
-
- function crushCandy() {
-
- crushThree();
- document.getElementById("score").innerText = score;
-
- }
-
- function crushThree() {
-
- for (let r = 0; r < rows; r++) {
- for (let c = 0; c < columns-2; c++) {
- let candy1 = board[r][c];
- let candy2 = board[r][c+1];
- let candy3 = board[r][c+2];
- if (candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
- candy1.src = "./images/blank.png";
- candy2.src = "./images/blank.png";
- candy3.src = "./images/blank.png";
- score += 30;
- }
- }
- }
-
- for (let c = 0; c < columns; c++) {
- for (let r = 0; r < rows-2; r++) {
- let candy1 = board[r][c];
- let candy2 = board[r+1][c];
- let candy3 = board[r+2][c];
- if (candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
- candy1.src = "./images/blank.png";
- candy2.src = "./images/blank.png";
- candy3.src = "./images/blank.png";
- score += 30;
- }
- }
- }
- }
-
- function checkValid() {
-
- for (let r = 0; r < rows; r++) {
- for (let c = 0; c < columns-2; c++) {
- let candy1 = board[r][c];
- let candy2 = board[r][c+1];
- let candy3 = board[r][c+2];
- if (candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
- return true;
- }
- }
- }
-
- for (let c = 0; c < columns; c++) {
- for (let r = 0; r < rows-2; r++) {
- let candy1 = board[r][c];
- let candy2 = board[r+1][c];
- let candy3 = board[r+2][c];
- if (candy1.src == candy2.src && candy2.src == candy3.src && !candy1.src.includes("blank")) {
- return true;
- }
- }
- }
-
- return false;
- }
-
- function slideCandy() {
- for (let c = 0; c < columns; c++) {
- let ind = rows - 1;
- for (let r = columns-1; r >= 0; r--) {
- if (!board[r][c].src.includes("blank")) {
- board[ind][c].src = board[r][c].src;
- ind -= 1;
- }
- }
-
- for (let r = ind; r >= 0; r--) {
- board[r][c].src = "./images/blank.png";
- }
- }
- }
-
- function generateCandy() {
- for (let c = 0; c < columns; c++) {
- if (board[0][c].src.includes("blank")) {
- board[0][c].src = "./images/" + randomCandy() + ".png";
- }
- }
- }
If you face any difficulties while creating Candy Crush Saga Game or your code is not working as expected, you can download the source code files by clicking download button.