DEV Community

Cover image for CandyCrush game using Html, Css & javascript
yaswanthteja
yaswanthteja

Posted on • Edited on

CandyCrush game using Html, Css & javascript

#html #css #javascript #candycrush

SweetCrush

Sweet Crush is a webbased game which is inspired from candy crush saga, SweetCrush is build on html,css,and java script, where the core gameplay is based on swapping two adjacent candies among several on the gameboard as to make a row or column of at least three matching-colored candies.

We all know the simple candies that we can pop by forming a combination of at least three candies in a horizontal or vertical line. They are colorful candies that are the basic elements of the game which are used to make special candies if brought in a specific combination together. It includes:

Red candy (sausage-shaped).
Blue candy (spherical-shaped).
Green candy (pillow/square shaped).
Yellow candy (tear-drop shaped).
Orange candy (pill-shaped).
Purple candy (hexagon-shaped).

SweetCrush includes some images which are downloaded from google.
If you want to know how SweetCrush works.Just download these files and try it your self.

you can play the game from below

Screenshots

Image description

SweetCrush

This project mainly comtains few files, you can download these files from my github.

projectlink

index.html 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Candy Crush</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" charset="utf-8"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="score-board">
      <h3>score</h3>
      <h1 id="score"></h1>
    </div>
    <div class="grid"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

style.css 

.grid {
    height: 560px;
    min-width: 560px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 80px;
    margin-top: 50px;
    background-color: rgba(109, 127, 151, 0.5);
    padding:5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
    color: #85796b;
}

.grid div {
    height: 70px;
    width: 70px;
}

h3 {
 font-family: "Montserrat", sans-serif;
 text-transform: uppercase;
}

h1 {
 font-family: "Montserrat", sans-serif;
 text-transform: uppercase;
 margin-top: -10px;
}

.invisible {
    background-color: white;
}

body {
  background-image: url("candy-crush-background-2.png");
  max-width: 100vh;
  display: flex;
}

.score-board {
  background-color: pink;
  border-radius: 10px;
  margin-top: 200px;
  margin-left: 200px;
  margin-bottom: 350px;
  min-width: 200px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(#FFB6C1, #FFC0CB);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff;
  color: #85796b;
}
Enter fullscreen mode Exit fullscreen mode

app.js 



document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid')
const scoreDisplay = document.getElementById('score')
const width = 8
const squares = []
let score = 0

const candyColors = [
    'url(images/red-candy.png)',
    'url(images/yellow-candy.png)',
    'url(images/orange-candy.png)',
    'url(images/purple-candy.png)',
    'url(images/green-candy.png)',
    'url(images/blue-candy.png)'
  ]
Enter fullscreen mode Exit fullscreen mode

To create the board for the game 

//create your board
function createBoard() {
  for (let i = 0; i < width*width; i++) {
    const square = document.createElement('div')
    square.setAttribute('draggable', true)
    square.setAttribute('id', i)
    let randomColor = Math.floor(Math.random() * candyColors.length)
    square.style.backgroundImage = candyColors[randomColor]
    grid.appendChild(square)
    squares.push(square)
  }
}
createBoard()
Enter fullscreen mode Exit fullscreen mode

Dragging & Drop 


// Dragging the Candy
let colorBeingDragged
let colorBeingReplaced
let squareIdBeingDragged
let squareIdBeingReplaced

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.addEventListener('dragenter', dragEnter))
squares.forEach(square => square.addEventListener('drageleave', dragLeave))
squares.forEach(square => square.addEventListener('drop', dragDrop))

function dragStart(){
    colorBeingDragged = this.style.backgroundImage
    squareIdBeingDragged = parseInt(this.id)
    // this.style.backgroundImage = ''
}

function dragOver(e) {
    e.preventDefault()
}

function dragEnter(e) {
    e.preventDefault()
}

function dragLeave() {
    this.style.backgroundImage = ''
}

function dragDrop() {
    colorBeingReplaced = this.style.backgroundImage
    squareIdBeingReplaced = parseInt(this.id)
    this.style.backgroundImage = colorBeingDragged
    squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced
}

function dragEnd() {
    //What is a valid move?
    let validMoves = [squareIdBeingDragged -1 , squareIdBeingDragged -width, squareIdBeingDragged +1, squareIdBeingDragged +width]
    let validMove = validMoves.includes(squareIdBeingReplaced)

    if (squareIdBeingReplaced && validMove) {
        squareIdBeingReplaced = null
    }  else if (squareIdBeingReplaced && !validMove) {
       squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced
       squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged
    } else  squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged
}

//drop candies once some have been cleared
function moveIntoSquareBelow() {
    for (i = 0; i < 55; i ++) {
        if(squares[i + width].style.backgroundImage === '') {
            squares[i + width].style.backgroundImage = squares[i].style.backgroundImage
            squares[i].style.backgroundImage = ''
            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]
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

now for matching the candies 


///Checking for Matches
//for row of Four
  function checkRowForFour() {
    for (i = 0; i < 60; i ++) {
      let rowOfFour = [i, i+1, i+2, i+3]
      let decidedColor = squares[i].style.backgroundImage
      const isBlank = squares[i].style.backgroundImage === ''

      const notValid = [5, 6, 7, 13, 14, 15, 21, 22, 23, 29, 30, 31, 37, 38, 39, 45, 46, 47, 53, 54, 55]
      if (notValid.includes(i)) continue

      if(rowOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
        score += 4
        scoreDisplay.innerHTML = score
        rowOfFour.forEach(index => {
        squares[index].style.backgroundImage = ''
        })
      }
    }
  }
  checkRowForFour()

//for column of Four
  function checkColumnForFour() {
    for (i = 0; i < 39; i ++) {
      let columnOfFour = [i, i+width, i+width*2, i+width*3]
      let decidedColor = squares[i].style.backgroundImage
      const isBlank = squares[i].style.backgroundImage === ''

      if(columnOfFour.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
        score += 4
        scoreDisplay.innerHTML = score
        columnOfFour.forEach(index => {
        squares[index].style.backgroundImage = ''
        })
      }
    }
  }
checkColumnForFour()

  //for row of Three
  function checkRowForThree() {
    for (i = 0; i < 61; i ++) {
      let rowOfThree = [i, i+1, i+2]
      let decidedColor = squares[i].style.backgroundImage
      const isBlank = squares[i].style.backgroundImage === ''

      const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55]
      if (notValid.includes(i)) continue

      if(rowOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
        score += 3
        scoreDisplay.innerHTML = score
        rowOfThree.forEach(index => {
        squares[index].style.backgroundImage = ''
        })
      }
    }
  }
  checkRowForThree()

//for column of Three
  function checkColumnForThree() {
    for (i = 0; i < 47; i ++) {
      let columnOfThree = [i, i+width, i+width*2]
      let decidedColor = squares[i].style.backgroundImage
      const isBlank = squares[i].style.backgroundImage === ''

      if(columnOfThree.every(index => squares[index].style.backgroundImage === decidedColor && !isBlank)) {
        score += 3
        scoreDisplay.innerHTML = score
        columnOfThree.forEach(index => {
        squares[index].style.backgroundImage = ''
        })
      }
    }
  }
checkColumnForThree()

// Checks carried out indefintely - Add Button to clear interval for best practise, or clear on game over/game won. If you have this indefinite check you can get rid of calling the check functions above.
window.setInterval(function(){
    checkRowForFour()
    checkColumnForFour()
    checkRowForThree()
    checkColumnForThree()
    moveIntoSquareBelow()
  }, 100)
})
Enter fullscreen mode Exit fullscreen mode

Demo

Sweetcrush

Click here to Play

Click to play!

Other Web development projects


Click here

click Here

Click Here

Top comments (3)

Collapse
 
mattheusbuz profile image
Info Comment hidden by post author - thread only accessible via permalink
mattheusbuz • • Edited

I used to like games where you had to collect three items in a row. But I think that's only good for people who don't want to develop their brains. Of course, games like CandyCrush can be useful for developing the attention span of kids or teenagers. But why would adults want to play such games? I think older people can fold solitaire games or play free jigsaw puzzles. These things are great for developing combinatorics, attention, and your ability to think quickly in a limited amount of time. Try playing games like these. I think you'll find something you like. My mom loves it and opens games like this on her lunch break at the office or home after work.

Collapse
 
tales_cembranelidantas_c profile image
Tales Cembraneli Dantas •

Nice, but has one bug. You can move any piece even doesn't kill then. Before you move you must check if kill

Collapse
 
yaswanthteja profile image
yaswanthteja •

Hi Tales Cembraneli Dantas,
Thanks for the feedback. I’m glad you like the feature. However, there's a bug you've pointed out: currently, any piece can be moved without taking another, whereas it should check for possible captures first. We'll work on fixing this to ensure smoother gameplay.

Appreciate your input!

Some comments have been hidden by the post's author - find out more

Read next

orahul1 profile image

Accessibility (a11y) Rules - 3

Rahul Raveendran -

orahul1 profile image

Accessibility (a11y) Rules - 2

Rahul Raveendran -

matijasos profile image

Should You Use an Open-source SaaS Boilerplate Starter or a $300+ Paid One?

Matija Sosic -

kasir-barati profile image

Module declaration in TS

Mohammad Jawad (Kasir) Barati -