DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Candy Crush Mini Prototype Demo title style canvas border 0px solid black info margin top 10px instructions margin top 20px font size 14px selected border 2px solid yellow style head body canvas id gameCanvas width 400 height 400 canvas div id info p Score span id score 0 span p p Current Candy span id currentCandy None span p p Time span id timer 0 span seconds p div div id instructions h3 How to Play h3 p Swap adjacent candies by clicking on them to match three or more candies of the same color horizontally or vertically Each match earns points You have a limited amount of time to score as many points as possible Good luck p p strong Controls strong Click on a candy to select it then click on an adjacent candy to swap positions p div script const canvas document getElementById gameCanvas const ctx canvas getContext 2d const numRows 8 const numCols 8 const candyColors const urls https notebook xbdev net var images candy c1 png https notebook xbdev net var images candy c2 png https notebook xbdev net var images candy c3 png https notebook xbdev net var images candy c4 png https notebook xbdev net var images candy c5 png https notebook xbdev net var images candy c6 png https notebook xbdev net var images candy c7 png https notebook xbdev net var images candy c8 png for let u in urls let im new Image im src urls u candyColors push im console log img u const candySize 50 canvas width canvas height candySize numRows const gameTime 60 seconds let grid let selectedCandy null let score 0 let timer gameTime function initializeGrid for let row 0 row numRows row grid row for let col 0 col numCols col grid row col color candyColors Math floor Math random candyColors length x col candySize y row candySize function drawCandies ctx clearRect 0 0 canvas width canvas height for let row 0 row numRows row for let col 0 col numCols col const candy grid row col if candy color none continue ctx drawImage candy color candy x candy y candySize candySize ctx fillStyle candy color ctx fillRect candy x candy y candySize candySize function drawText document getElementById score textContent score document getElementById currentCandy textContent selectedCandy grid selectedCandy row selectedCandy col color None document getElementById timer textContent timer function drawHighlight row col ctx strokeStyle yellow ctx lineWidth 2 ctx strokeRect col candySize row candySize candySize candySize function swapCandies row1 col1 row2 col2 const tc grid row1 col1 color const tx grid row1 col1 x const ty grid row1 col1 y grid row1 col1 color grid row2 col2 color grid row2 col2 color tc function checkForMatches let matches Horizontal matches for let row 0 row numRows row for let col 0 col numCols 2 col if grid row col color grid row col 1 color grid row col color grid row col 2 color matches push row col row col col 1 row col col 2 Vertical matches for let col 0 col numCols col for let row 0 row numRows 2 row if grid row col color grid row 1 col color grid row col color grid row 2 col color matches push row col row row 1 col row row 2 col Remove matches if matches length 0 matches forEach row col grid row col color none score matches length function handleInput event const rect canvas getBoundingClientRect const mouseX event clientX rect left const mouseY event clientY rect top const col Math floor mouseX candySize const row Math floor mouseY candySize if selectedCandy selectedCandy row col else const row prevRow col prevCol selectedCandy Check if selected candy is adjacent to current candy if Math abs row prevRow Math abs col prevCol 1 row prevRow col prevCol Swap only if the candies are adjacent if row prevRow Math abs col prevCol 1 col prevCol Math abs row prevRow 1 console log swapCandies row col prevRow prevCol swapCandies row col prevRow prevCol selectedCandy null After swapping re render the canvas update checkForMatches update else selectedCandy row col function update drawCandies drawText if selectedCandy const row col selectedCandy drawHighlight row col function gameLoop update requestAnimationFrame gameLoop function startTimer const interval setInterval if timer 0 timer else clearInterval interval alert Game Over Your score score 1000 function init initializeGrid canvas addEventListener click handleInput startTimer gameLoop init script body html
keStyle yellow ctx lineWidth 2 ctx strokeRect col candySize row candySize candySize candySize function swapCandies row1 col1 row2 col2 const tc grid row1 col1 color const tx grid row1 col1 x const ty grid row1 col1 y grid row1 col1 color grid row2 col2 color grid row2 col2 color tc function checkForMatches let matches Horizontal matches for let row 0 row numRows row for let col 0 col numCols 2 col if grid row col color grid row col 1 color grid row col color grid row col 2 color matches push row col row col col 1 row col col 2 Vertical matches for let col 0 col numCols col for let row 0 row numRows 2 row if grid row col color grid row 1 col color grid row col color grid row 2 col color matches push row col row row 1 col row row 2 col Remove matches if matches length 0 matches forEach row col grid row col color none score matches length function handleInput event const rect canvas getBoundingClientRect const mouseX event clientX rect left const mouseY event clientY rect top const col Math floor mouseX candySize const row Math floor mouseY candySize if selectedCandy selectedCandy row col else const row prevRow col prevCol selectedCandy Check if selected candy is adjacent to current candy if Math abs row prevRow Math abs col prevCol 1 row prevRow col prevCol Swap only if the candies are adjacent if row prevRow Math abs col prevCol 1 col prevCol Math abs row prevRow 1 console log swapCandies row col prevRow prevCol swapCandies row col prevRow prevCol selectedCandy null After swapping re render the canvas update checkForMatches update else selectedCandy row col function update drawCandies drawText if selectedCandy const row col selectedCandy drawHighlight row col function gameLoop update requestAnimationFrame gameLoop function startTimer const interval setInterval if timer 0 timer else clearInterval interval alert Game Over Your score score 1000 function init initializeGrid canvas addEventListener click handleInput startTimer gameLoop init script body html