GF.game({ title: "Crystal Bloom", instructions: "Swap crystals to match 3+ and reach the goal!", scoreLabel: "Score", bg: '#0a0a1a', accent: '#7fffd4', winText: "Bloom Complete! The crystals sing!", loseText: "The bloom fades... Try again!", lives: 3, hud: true, controls: 'none', setup: function(GF) { this.COLS = 7; this.ROWS = 8; this.CELL = 54; this.BOARD_X = (GF.W - this.COLS * this.CELL) / 2; this.BOARD_Y = 115; this.TYPES = ['fire','water','earth','wind','light','shadow','bloom']; this.COLORS = ['#ff5533','#33aaff','#44cc44','#aaffee','#ffee44','#aa44ff','#ff88cc']; this.INNER = ['#ff9977','#88ddff','#88ee88','#ddfff8','#ffff99','#cc88ff','#ffbbdd']; this.GLOWS = ['rgba(255,80,40,0.35)','rgba(40,160,255,0.35)','rgba(60,200,60,0.35)', 'rgba(160,255,230,0.35)','rgba(255,230,40,0.35)','rgba(160,60,255,0.35)', 'rgba(255,120,180,0.35)']; this.SYMBOLS = ['✦','◈','❋','⟡','★','⬡','✿']; this.level = 1; this.moves = 25; this.targetScore = 1200; this.selected = null; this.board = []; this.particles = []; this.animating = false; this.hintTimer = 0; this.hintPair = null; this.shakeTimer = 0; this.powerUps = []; this.obstacles = []; this.comboCount = 0; this.comboTimer = 0; this.comboText = ''; this.floatTexts = []; this.bgOrbs = []; this.orbTimer = 0; this.bloomEffect = 0; this.touchStartX = 0; this.touchStartY = 0; this.touchStartCell = null; this.touchActive = false; this.prevDown = false; for (let i = 0; i < 18; i++) { this.bgOrbs.push({ x: GF.rand(0, GF.W), y: GF.rand(0, GF.H), r: GF.rand(30, 80), speed: GF.rand(10, 25), color: this.COLORS[GF.randInt(0, 6)], phase: GF.rand(0, Math.PI*2) }); } let placed = 0; while (placed < 3) { let r = GF.randInt(2, this.ROWS-1), c = GF.randInt(0, this.COLS-1); if (!this.obstacles.find(o => o.r===r && o.c===c)) { this.obstacles.push({r, c, hp: 2}); placed++; } } this.initBoard(); this.findHint(); }, initBoard: function() { this.board = []; for (let r = 0; r < this.ROWS; r++) { this.board[r] = []; for (let c = 0; c < this.COLS; c++) { if (this.obstacles.find(o => o.r===r && o.c===c)) { this.board[r][c] = null; continue; } let color; do { color = GF.randInt(0, this.TYPES.length - 1); } while (this.wouldMatch(r, c, color)); this.board[r][c] = { color, scale: 1, alpha: 1, power: null }; } } }, wouldMatch: function(r, c, color) { if (c >= 2 && this.board[r][c-1] && this.board[r][c-2] && this.board[r][c-1].color === color && this.board[r][c-2].color === color) return true; if (r >= 2 && this.board[r-1] && this.board[r-2] && this.board[r-1][c] && this.board[r-2][c] && this.board[r-1][c].color === color && this.board[r-2][c].color === color) return true; return false; }, cellAt: function(px, py) { // Use round-based detection centered on each cell let col = Math.floor((px - this.BOARD_X) / this.CELL); let row = Math.floor((py - this.BOARD_Y) / this.CELL); if (row >= 0 && row < this.ROWS && col >= 0 && col < this.COLS) { return {r: row, c: col}; } return null; }, // Find the nearest cell center to a point, within a radius threshold nearestCell: function(px, py) { let bestDist = Infinity; let bestCell = null; for (let r = 0; r < this.ROWS; r++) { for (let c = 0; c < this.COLS; c++) { let cx = this.BOARD_X + c * this.CELL + this.CELL / 2; let cy = this.BOARD_Y + r * this.CELL + this.CELL / 2; let d = (px - cx) * (px - cx) + (py - cy) * (py - cy); if (d < bestDist) { bestDist = d; bestCell = {r, c}; } } } // Only return if within half a cell distance let threshold = (this.CELL * 0.75) * (this.CELL * 0.75); if (bestDist <= threshold) return bestCell; return null; }, findMatches: function() { let matched = new Set(); for (let r = 0; r < this.ROWS; r++) { for (let c = 0; c < this.COLS - 2; c++) { if (!this.board[r][c] || !this.board[r][c+1] || !this.board[r][c+2]) continue; let col = this.board[r][c].color; if (col === this.board[r][c+1].color && col === this.board[r][c+2].color) { matched.add(r*100+c); matched.add(r*100+c+1); matched.add(r*100+c+2); } } } for (let c = 0; c < this.COLS; c++) { for (let r = 0; r < this.ROWS - 2; r++) { if (!this.board[r][c] || !this.board[r+1][c] || !this.board[r+2][c]) continue; let col = this.board[r][c].color; if (col === this.board[r+1][c].color && col === this.board[r+2][c].color) { matched.add(r*100+c); matched.add((r+1)*100+c); matched.add((r+2)*100+c); } } } return matched; }, removeMatches: function(matched) { let count = matched.size; this.comboCount++; let comboMult = Math.min(this.comboCount, 5); let points = count * 60 * comboMult; if (this.comboCount >= 3) { this.bloomEffect = 0.6; this.comboText = ['TRIPLE!','QUAD!','PENTA!','ULTRA!','MEGA BLOOM!'][Math.min(this.comboCount-3,4)]; this.comboTimer = 1.2; } let matchArr = [...matched]; if (count >= 5) { let key = matchArr[Math.floor(matchArr.length/2)]; let pr = Math.floor(key/100), pc = key%100; if (this.board[pr] && this.board[pr][pc]) { this.board[pr][pc].power = count >= 7 ? 'bomb' : 'row'; } } matched.forEach(key => { let r = Math.floor(key/100), c = key%100; if (!this.board[r] || !this.board[r][c]) return; let cx = this.BOARD_X + c * this.CELL + this.CELL/2; let cy = this.BOARD_Y + r * this.CELL + this.CELL/2; let col = this.COLORS[this.board[r][c].color]; let dirs = [{dr:-1,dc:0},{dr:1,dc:0},{dr:0,dc:-1},{dr:0,dc:1}]; for (let d of dirs) { let obs = this.obstacles.find(o => o.r===r+d.dr && o.c===c+d.dc); if (obs) { obs.hp--; if (obs.hp <= 0) { let oi = this.obstacles.indexOf(obs); this.obstacles.splice(oi, 1); GF.addScore(150); this.spawnParticles(cx, cy, '#aaaaaa', 10); } } } if (this.board[r][c].power === 'row') { for (let cc = 0; cc < this.COLS; cc++) matched.add(r*100+cc); } else if (this.board[r][c].power === 'bomb') { for (let dr=-1;dr<=1;dr++) for (let dc=-1;dc<=1;dc++) { let nr=r+dr,nc=c+dc; if (nr>=0&&nr=0&&nc= 0; r--) { if (this.obstacles.find(o => o.r===r && o.c===c)) continue; if (!this.board[r][c]) empty.push(r); else if (empty.length > 0) { let newR = empty.shift(); this.board[newR][c] = this.board[r][c]; this.board[r][c] = null; empty.push(r); } } for (let r of empty) { if (!this.obstacles.find(o => o.r===r && o.c===c)) { this.board[r][c] = { color: GF.randInt(0, this.TYPES.length-1), scale: 1, alpha: 1, power: null }; } } } }, processMatches: function() { let matched = this.findMatches(); if (matched.size > 0) { this.removeMatches(matched); return true; } this.comboCount = 0; return false; }, findHint: function() { for (let r = 0; r < this.ROWS; r++) { for (let c = 0; c < this.COLS; c++) { if (!this.board[r][c]) continue; let neighbors = [{r,c:c+1},{r,c:c-1},{r:r+1,c},{r:r-1,c}]; for (let nb of neighbors) { if (nb.r < 0||nb.r>=this.ROWS||nb.c<0||nb.c>=this.COLS) continue; if (!this.board[nb.r][nb.c]) continue; this.swapCells(r, c, nb.r, nb.c); let m = this.findMatches(); this.swapCells(r, c, nb.r, nb.c); if (m.size > 0) { this.hintPair = [{r,c},{r:nb.r,c:nb.c}]; return; } } } } this.hintPair = null; }, swapCells: function(r1, c1, r2, c2) { let tmp = this.board[r1][c1]; this.board[r1][c1] = this.board[r2][c2]; this.board[r2][c2] = tmp; }, trySwap: function(r1, c1, r2, c2) { if (r2<0||r2>=this.ROWS||c2<0||c2>=this.COLS) return false; if (this.obstacles.find(o=>o.r===r2&&o.c===c2)) return false; if (!this.board[r1][c1] || !this.board[r2][c2]) return false; this.swapCells(r1, c1, r2, c2); let matched = this.findMatches(); if (matched.size > 0) { this.moves--; this.animating = true; this.selected = null; GF.sound('select'); return true; } else { this.swapCells(r1, c1, r2, c2); this.shakeTimer = 0.18; this.selected = null; GF.sound('hit'); return false; } }, handleInput: function(GF) { if (this.animating) { this.touchActive = false; this.prevDown = GF.pointer.down; return; } let isDown = GF.pointer.down; let justDown = GF.pointer.justDown; let justUp = this.prevDown && !isDown; if (justDown) { this.touchStartX = GF.pointer.x; this.touchStartY = GF.pointer.y; // Use nearest cell center for accurate selection this.touchStartCell = this.nearestCell(GF.pointer.x, GF.pointer.y); this.touchCurrentX = GF.pointer.x; this.touchCurrentY = GF.pointer.y; this.touchActive = true; } if (isDown && this.touchActive) { this.touchCurrentX = GF.pointer.x; this.touchCurrentY = GF.pointer.y; } if (justUp && this.touchActive) { let dx = this.touchCurrentX - this.touchStartX; let dy = this.touchCurrentY - this.touchStartY; let dist = Math.sqrt(dx*dx + dy*dy); if (dist > 20 && this.touchStartCell) { // Swipe gesture let sc = this.touchStartCell; if (!this.obstacles.find(o=>o.r===sc.r&&o.c===sc.c) && this.board[sc.r] && this.board[sc.r][sc.c]) { let dr = 0, dc = 0; if (Math.abs(dx) > Math.abs(dy)) { dc = dx > 0 ? 1 : -1; } else { dr = dy > 0 ? 1 : -1; } this.trySwap(sc.r, sc.c, sc.r+dr, sc.c+dc); } this.selected = null; } else { // Tap gesture — use nearest cell to where finger went down let cell = this.touchStartCell; if (cell && !this.obstacles.find(o=>o.r===cell.r&&o.c===cell.c) && this.board[cell.r] && this.board[cell.r][cell.c]) { if (!this.selected) { this.selected = cell; GF.sound('select'); } else { let dr = Math.abs(cell.r - this.selected.r); let dc = Math.abs(cell.c - this.selected.c); if (dr + dc === 1) { this.trySwap(this.selected.r, this.selected.c, cell.r, cell.c); } else if (dr === 0 && dc === 0) { // Tapped same cell, deselect this.selected = null; } else { // Tapped non-adjacent cell, select new one this.selected = cell; GF.sound('select'); } } } else { this.selected = null; } } this.touchActive = false; } this.prevDown = isDown; }, update: function(dt, GF) { this.orbTimer += dt; for (let o of this.bgOrbs) { o.y -= o.speed * dt * 0.3; o.phase += dt * 0.5; if (o.y + o.r < 0) { o.y = GF.H + o.r; o.x = GF.rand(0, GF.W); } } if (this.bloomEffect > 0) this.bloomEffect -= dt * 1.5; if (this.animating) { this.animating = false; if (this.processMatches()) { this.animating = true; } else { this.findHint(); if (this.moves <= 0) { if (GF.score >= this.targetScore) GF.win(); else GF.lose(); } } } this.handleInput(GF); for (let i = this.particles.length - 1; i >= 0; i--) { let p = this.particles[i]; p.x += p.vx * dt; p.y += p.vy * dt; p.vy += 180 * dt; p.life -= dt; if (p.life <= 0) this.particles.splice(i, 1); } for (let i = this.floatTexts.length-1; i>=0; i--) { let f = this.floatTexts[i]; f.y += f.vy * dt; f.life -= dt; if (f.life <= 0) this.floatTexts.splice(i, 1); } if (this.comboTimer > 0) this.comboTimer -= dt; if (this.shakeTimer > 0) this.shakeTimer -= dt; this.hintTimer += dt; }, draw: function(GF) { GF.clear('#07071a'); for (let o of this.bgOrbs) { let a = (0.03 + 0.02 * Math.sin(o.phase)).toFixed(3); GF.circle(o.x, o.y, o.r, `rgba(${this.hexToRgb(o.color)},${a})`); } if (this.bloomEffect > 0) { let ba = (this.bloomEffect * 0.25).toFixed(3); GF.rect(0, 0, GF.W, GF.H, `rgba(200,255,220,${ba})`); } let shake = this.shakeTimer > 0 ? GF.rand(-3, 3) : 0; GF.rect(this.BOARD_X - 10 + shake, this.BOARD_Y - 10, this.COLS*this.CELL+20, this.ROWS*this.CELL+20, 'rgba(5,5,20,0.92)'); GF.strokeRect(this.BOARD_X - 10 + shake, this.BOARD_Y - 10, this.COLS*this.CELL+20, this.ROWS*this.CELL+20, '#7fffd4', 2); for (let r = 0; r <= this.ROWS; r++) { GF.line(this.BOARD_X+shake, this.BOARD_Y+r*this.CELL, this.BOARD_X+this.COLS*this.CELL+shake, this.BOARD_Y+r*this.CELL, 'rgba(127,255,212,0.06)', 1); } for (let c = 0; c <= this.COLS; c++) { GF.line(this.BOARD_X+c*this.CELL+shake, this.BOARD_Y, this.BOARD_X+c*this.CELL+shake, this.BOARD_Y+this.ROWS*this.CELL, 'rgba(127,255,212,0.06)', 1); } for (let obs of this.obstacles) { let x = this.BOARD_X + obs.c*this.CELL + shake; let y = this.BOARD_Y + obs.r*this.CELL; let s = this.CELL; GF.rect(x+4, y+4, s-8, s-8, obs.hp>=2 ? '#555577' : '#443355'); GF.strokeRect(x+4, y+4, s-8, s-8, '#9988bb', 2); GF.text(obs.hp>=2?'⬡':'◌', x+s/2, y+s/2+7, {size:20, color:'#bbaadd', align:'center', bold:true}); } let pulse = Math.sin(this.hintTimer * 3.5) * 0.5 + 0.5; for (let r = 0; r < this.ROWS; r++) { for (let c = 0; c < this.COLS; c++) { let cell = this.board[r][c]; if (!cell) continue; let x = this.BOARD_X + c*this.CELL + this.CELL/2 + shake; let y = this.BOARD_Y + r*this.CELL + this.CELL/2; let isSelected = this.selected && this.selected.r===r && this.selected.c===c; let isHint = this.hintPair && this.hintPair.some(h=>h.r===r&&h.c===c); let radius = isSelected ? 23 : 20; let col = this.COLORS[cell.color]; let inner = this.INNER[cell.color]; let glow = this.GLOWS[cell.color]; GF.circle(x, y, radius+8, glow); GF.circle(x+2, y+3, radius, 'rgba(0,0,0,0.45)'); GF.circle(x, y, radius, col); GF.circle(x, y, radius*0.62, inner); GF.text(this.SYMBOLS[cell.color], x, y+6, {size:13, color:'rgba(255,255,255,0.85)', align:'center', bold:true}); GF.circle(x-6, y-6, 5, 'rgba(255,255,255,0.5)'); GF.circle(x-5, y-5, 2, 'rgba(255,255,255,0.8)'); if (cell.power === 'row') { GF.line(x-radius, y, x+radius, y, '#ffffff', 2); GF.text('⟶', x, y+5, {size:10, color:'#fff', align:'center'}); } else if (cell.power === 'bomb') { GF.strokeRect(x-radius, y-radius, radius*2, radius*2, '#ffee44', 2); GF.text('✦', x, y+5, {size:11, color:'#ffee44', align:'center'}); } if (isSelected) { GF.strokeRect(x-25, y-25, 50, 50, '#ffffff', 3); GF.circle(x, y, radius+5, 'rgba(255,255,255,0.12)'); } if (isHint) { let hc = `rgba(127,255,212,${(0.4+0.6*pulse).toFixed(2)})`; GF.strokeRect(x-23, y-23, 46, 46, hc, 2); } } } for (let p of this.particles) { GF.circle(p.x, p.y, p.size*(p.life/p.maxLife), p.color); } for (let f of this.floatTexts) { GF.text(f.text, f.x, f.y, {size:f.size, color:f.color, align:'center', bold:true}); } if (this.comboTimer > 0 && this.comboText) { let sc = 1 + (1 - this.comboTimer/1.2) * 0.5; GF.text(this.comboText, GF.W/2, this.BOARD_Y + this.ROWS*this.CELL/2, {size:Math.floor(32*sc), color:'#ffee44', align:'center', bold:true}); } GF.rect(0, 0, GF.W, 55, 'rgba(7,7,26,0.97)'); GF.line(0, 55, GF.W, 55, '#7fffd4', 1); GF.text('Crystal Bloom', 12, 20, {size:14, color:'#7fffd4', align:'left', bold:true}); GF.text('Moves: ' + this.moves, GF.W/2, 34, {size:19, color:'#ffee44', align:'center', bold:true}); GF.text('Goal: ' + this.targetScore, GF.W-10, 34, {size:14, color:'#cc88ff', align:'right'}); let barY = this.BOARD_Y + this.ROWS*this.CELL + 12; let barW = this.COLS*this.CELL; let prog = Math.min(GF.score/this.targetScore, 1); GF.rect(this.BOARD_X, barY, barW, 13, 'rgba(5,5,20,0.9)'); GF.rect(this.BOARD_X, barY, barW*prog, 13, '#7fffd4'); GF.rect(this.BOARD_X, barY, barW*prog*0.5, 13, '#ccffee'); GF.strokeRect(this.BOARD_X, barY, barW, 13, '#7fffd4', 1); GF.text('Bloom Progress', this.BOARD_X+barW/2, barY+26, {size:11, color:'rgba(127,255,212,0.6)', align:'center'}); if (this.obstacles.length > 0) { GF.text('Crystals blocked: '+this.obstacles.length, GF.W/2, GF.H-38, {size:13, color:'#cc88ff', align:'center'}); } GF.text('Tap or swipe to swap', GF.W/2, GF.H-18, {size:12, color:'rgba(127,255,212,0.45)', align:'center'}); }, hexToRgb: function(hex) { let r = parseInt(hex.slice(1,3),16); let g = parseInt(hex.slice(3,5),16); let b = parseInt(hex.slice(5,7),16); return r+','+g+','+b; } });