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
SweetCrush
This project mainly comtains few files, you can download these files from my github.
projectlink
- index.html
- style.css
- app.js
- images :-Few asserts
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>
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;
}
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)'
]
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()
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]
}
}
}
}
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)
})
Demo
Click here to Play
Top comments (1)
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.
Some comments have been hidden by the post's author - find out more