Update index.html

index.html

@@ -40,18 +40,26 @@
             <div id="score">Score: 0</div>
             <div id="moves">Moves: 30</div>
         </div>
+        <audio id="bgMusic" loop>
+            <source src="music1.mp3" type="audio/mpeg">
+        </audio>
     </div>
 
 <script>
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
+const bgMusic = document.getElementById('bgMusic');
 const GRID_SIZE = 8;
 const CELL_SIZE = 70;
 const ANIMATION_SPEED = 0.15;
-
+// Start background music
+window.addEventListener('load', () => {
+    bgMusic.play().catch(error => {
+        console.log("Audio autoplay failed:", error);
+    });
+});
 canvas.width = GRID_SIZE * CELL_SIZE;
 canvas.height = GRID_SIZE * CELL_SIZE;
-
 const GEMS = {
     RUBY: {color: '#ff0000', highlight: '#ff6666'},
     SAPPHIRE: {color: '#0000ff', highlight: '#6666ff'},
@@ -60,14 +68,12 @@ const GEMS = {
     TOPAZ: {color: '#ffff00', highlight: '#ffff66'},
     AMETHYST: {color: '#ff00ff', highlight: '#ff66ff'}
 };
-
 let score = 0;
 let moves = 30;
 let board = [];
 let selectedGem = null;
 let animations = [];
 let isAnimating = false;
-
 class Gem {
     constructor(type, row, col) {
         this.type = type;
@@ -80,7 +86,6 @@ class Gem {
         this.scale = 1;
         this.alpha = 1;
     }
-
     draw() {
         ctx.save();
         ctx.globalAlpha = this.alpha;
@@ -101,7 +106,6 @@ class Gem {
         
         ctx.restore();
     }
-
     update() {
         if(this.x !== this.targetX) {
             this.x += (this.targetX - this.x) * ANIMATION_SPEED;
@@ -111,7 +115,6 @@ class Gem {
         }
     }
 }
-
 function initBoard() {
     for(let row = 0; row < GRID_SIZE; row++) {
         board[row] = [];
@@ -122,7 +125,6 @@ function initBoard() {
         }
     }
 }
-
 function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     
@@ -134,7 +136,6 @@ function draw() {
             }
         }
     }
-
     // Draw selected gem highlight
     if(selectedGem) {
         ctx.strokeStyle = '#fff';
@@ -146,10 +147,8 @@ function draw() {
             CELL_SIZE
         );
     }
-
     requestAnimationFrame(draw);
 }
-
 function update() {
     for(let row = 0; row < GRID_SIZE; row++) {
         for(let col = 0; col < GRID_SIZE; col++) {
@@ -159,10 +158,8 @@ function update() {
         }
     }
 }
-
 function handleClick(e) {
     if(isAnimating) return;
-
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
@@ -185,7 +182,6 @@ function handleClick(e) {
         }
     }
 }
-
 function swapGems(gem1, gem2) {
     const tempX = gem1.targetX;
     const tempY = gem1.targetY;
@@ -210,10 +206,8 @@ function swapGems(gem1, gem2) {
     
     setTimeout(checkMatches, 300);
 }
-
 function checkMatches() {
     let matches = [];
-
     // Check horizontal matches
     for(let row = 0; row < GRID_SIZE; row++) {
         let matchCount = 1;
@@ -238,7 +232,6 @@ function checkMatches() {
             }
         }
     }
-
     // Check vertical matches
     for(let col = 0; col < GRID_SIZE; col++) {
         let matchCount = 1;
@@ -263,12 +256,10 @@ function checkMatches() {
             }
         }
     }
-
     if(matches.length > 0) {
         removeMatches(matches);
     }
 }
-
 function removeMatches(matches) {
     isAnimating = true;
     
@@ -280,7 +271,6 @@ function removeMatches(matches) {
             board[row][col] = null;
         }
     });
-
     // Drop remaining gems
     for(let col = 0; col < GRID_SIZE; col++) {
         let emptySpaces = 0;
@@ -306,20 +296,16 @@ function removeMatches(matches) {
             board[row][col] = newGem;
         }
     }
-
     setTimeout(() => {
         isAnimating = false;
         checkMatches();
     }, 500);
 }
-
 canvas.addEventListener('click', handleClick);
-
 function gameLoop() {
     update();
     requestAnimationFrame(gameLoop);
 }
-
 initBoard();
 gameLoop();
 draw();