├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gem Swap 5 | 6 | 7 | 8 |
Instructions: Click gems to swap. You must swap gems to create a line of three or more gems of the same color. The goal is to get the most points. This game is very fun and addictive.
9 |
10 |
Score: 0
11 |
12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 400px; 3 | margin: 0 auto; 4 | text-align: center; 5 | font-family: Arial, sans-serif; 6 | } 7 | 8 | .score { 9 | margin-top: 20px; 10 | font-size: 24px; 11 | font-weight: bold; 12 | } 13 | 14 | .gems { 15 | display: flex; 16 | flex-wrap: wrap; 17 | justify-content: center; 18 | margin-top: 20px; 19 | } 20 | 21 | .gem { 22 | width: 50px; 23 | height: 50px; 24 | margin: 5px; 25 | border-radius: 50%; 26 | cursor: pointer; 27 | } 28 | 29 | .gem.red { 30 | background-color: #ff4c4c; 31 | } 32 | 33 | .gem.green { 34 | background-color: #4cff4c; 35 | } 36 | 37 | .gem.blue { 38 | background-color: #4c4cff; 39 | } 40 | 41 | .new-game { 42 | margin-top: 20px; 43 | padding: 10px 20px; 44 | font-size: 20px; 45 | font-weight: bold; 46 | background-color: #428bca; 47 | color: #fff; 48 | border-radius: 5px; 49 | cursor: pointer; 50 | } 51 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const gems = document.querySelector(".gems"); 2 | const score = document.querySelector("#score"); 3 | let gemList = []; 4 | 5 | // Create new gem object 6 | class Gem { 7 | constructor(color) { 8 | this.color = color; 9 | this.element = document.createElement("div"); 10 | this.element.className = `gem ${color}`; 11 | this.element.addEventListener("click", () => this.swap()); 12 | gems.appendChild(this.element); 13 | } 14 | 15 | // Swap gem with the one to the right 16 | swap() { 17 | let index = gemList.indexOf(this); 18 | if (index < gemList.length - 1) { 19 | let temp = this.color; 20 | this.color = gemList[index + 1].color; 21 | gemList[index + 1].color = temp; 22 | this.element.className = `gem ${this.color}`; 23 | gemList[index + 1].element.className = `gem ${gemList[index + 1].color}`; 24 | checkMatches(); 25 | } 26 | } 27 | } 28 | 29 | // Generate random gem color 30 | function randomColor() { 31 | let colors = ["red", "green", "blue"]; 32 | return colors[Math.floor(Math.random() * colors.length)]; 33 | } 34 | 35 | // Generate new game with random gem colors 36 | function newGame() { 37 | gemList.forEach((gem) => gem.element.remove()); 38 | gemList = []; 39 | for (let i = 0; i < 16; i++) { 40 | let gem = new Gem(randomColor()); 41 | gemList.push(gem); 42 | } 43 | checkMatches(); 44 | updateScore(0); 45 | } 46 | 47 | // Check for matches and remove them 48 | function checkMatches() { 49 | let removed = false; 50 | for (let i = 0; i < gemList.length - 2; i++) { 51 | if ( 52 | gemList[i] && 53 | gemList[i].color == gemList[i + 1].color && 54 | gemList[i + 1].color == gemList[i + 2].color 55 | ) { 56 | gemList[i].element.remove(); 57 | gemList[i + 1].element.remove(); 58 | gemList[i + 2].element.remove(); 59 | gemList.splice(i, 3); 60 | i -= 3; 61 | removed = true; 62 | } 63 | } 64 | if (removed) { 65 | updateScore(score.textContent + 10); 66 | checkMatches(); 67 | } 68 | } 69 | 70 | // Update score 71 | function updateScore(newScore) { 72 | score.textContent = newScore; 73 | } 74 | 75 | // Start new game 76 | newGame(); 77 | --------------------------------------------------------------------------------