class Example extends Phaser.Scene { constructor() { super(); this.score = 0; } preload() { this.load.image('background', 'https://play.rosebud.ai/assets/Background without text for a game called binary fusion which is a 2048 clone.png?1JXP'); this.load.audio('bgmusic', 'https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?9bs4'); this.load.audio('merge', 'https://play.rosebud.ai/assets/line.wav?wJ8i'); } create() { const music = this.sound.add('bgmusic', { loop: true, volume: 0.3 }); music.play(); this.mergeSound = this.sound.add('merge', { volume: 0.3 }); const bg = this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'background'); bg.setDisplaySize(this.cameras.main.width, this.cameras.main.height); bg.setDepth(-1); this.gridSize = 4; this.tileSize = 95; // Reduced from 110 this.tiles = []; // Add game board background and border const graphics = this.add.graphics(); graphics.fillStyle(0x1a1a2e, 0.7); // Semi-transparent background const boardX = (this.cameras.main.width - (this.gridSize * this.tileSize)) / 2; graphics.fillRoundedRect(boardX, 80, this.gridSize * this.tileSize, this.gridSize * this.tileSize, 10); graphics.lineStyle(4, 0x16213e, 0.8); graphics.strokeRoundedRect(boardX, 80, this.gridSize * this.tileSize, this.gridSize * this.tileSize, 10); graphics.setDepth(0); // Add game title const titleStyle = { fontSize: '32px', fontFamily: 'Arial, sans-serif', fontWeight: 'bold', color: '#e94560', // Vibrant red for the title shadow: { offsetX: 2, offsetY: 2, color: '#0f3460', // Dark blue shadow blur: 3, stroke: true, fill: true } }; const title = this.add.text(this.cameras.main.width / 2, 20, 'Binary Fusion', titleStyle) .setOrigin(0.5) .setDepth(2); // Add score display const scoreStyle = { fontSize: '24px', fontFamily: 'Arial, sans-serif', fontWeight: 'bold', color: '#e94560', shadow: { offsetX: 1, offsetY: 1, color: '#0f3460', blur: 2, stroke: true, fill: true } }; this.scoreText = this.add.text(this.cameras.main.width / 2, title.y + 35, 'Score: 0', scoreStyle) .setOrigin(0.5) .setDepth(2); this.createGrid(); this.spawnTile(); this.spawnTile(); this.input.keyboard.on('keydown', this.handleInput, this); } createGrid() { const graphics = this.add.graphics(); graphics.lineStyle(2, 0x95a5a6, 0.6); // Semi-transparent grid lines for (let row = 0; row < this.gridSize; row++) { this.tiles[row] = []; for (let col = 0; col < this.gridSize; col++) { const boardX = (this.cameras.main.width - (this.gridSize * this.tileSize)) / 2; const x = boardX + (col * this.tileSize); const y = row * this.tileSize + 80; // Draw grid cell graphics.strokeRoundedRect(x + 2, y + 2, this.tileSize - 4, this.tileSize - 4, 5); this.tiles[row][col] = null; this.tiles[row][col] = null; } } } createTile(row, col, value) { const colorMap = { 2: 0xff0000, // Red 4: 0xff7f00, // Orange 8: 0xffff00, // Yellow 16: 0x00ff00, // Green 32: 0x0000ff, // Blue 64: 0x8b00ff, // Violet 128: 0xff1493, // Deep Pink 256: 0x00ffff, // Cyan 512: 0xff00ff, // Magenta 1024: 0xffd700, // Gold 2048: 0xffffff // White }; const bgColor = colorMap[value] || 0x34495e; const textColor = (value <= 4 || value === 8 || value === 1024 || value === 2048) ? '#000000' : '#ffffff'; const boardX = (this.cameras.main.width - (this.gridSize * this.tileSize)) / 2; const x = boardX + (col * this.tileSize) + this.tileSize / 2; const y = row * this.tileSize + this.tileSize / 2 + 80; // Create tile container const container = this.add.container(x, y); container.setDepth(1); // Add shadow const shadow = this.add.graphics(); shadow.fillStyle(0x000000, 0.2); shadow.fillRoundedRect(-40, -40, 80, 80, 10); container.add(shadow); // Add tile background const background = this.add.graphics(); background.fillStyle(bgColor, 1); background.fillRoundedRect(-35, -35, 70, 70, 10); container.add(background); // Add text const text = this.add.text(0, 0, value.toString(), { fontSize: value < 100 ? '32px' : value < 1000 ? '28px' : '22px', fontFamily: 'Arial, sans-serif', fontWeight: 'bold', color: textColor }).setOrigin(0.5); container.add(text); container.value = value; return container; } spawnTile() { let emptyTiles = []; for (let row = 0; row < this.gridSize; row++) { for (let col = 0; col < this.gridSize; col++) { if (this.tiles[row][col] === null) { emptyTiles.push({ row, col }); } } } if (emptyTiles.length === 0) return; const { row, col } = Phaser.Utils.Array.GetRandom(emptyTiles); const value = Phaser.Math.Between(1, 2) * 2; const newTile = this.createTile(row, col, value); this.tiles[row][col] = newTile; newTile.setScale(0); this.tweens.add({ targets: newTile, scale: 1, duration: 150, ease: 'Back.out(1.2)' }); } handleInput(event) { let moved = false; switch (event.keyCode) { case Phaser.Input.Keyboard.KeyCodes.LEFT: moved = this.move('left'); break; case Phaser.Input.Keyboard.KeyCodes.RIGHT: moved = this.move('right'); break; case Phaser.Input.Keyboard.KeyCodes.UP: moved = this.move('up'); break; case Phaser.Input.Keyboard.KeyCodes.DOWN: moved = this.move('down'); break; } if (moved) { // New tile spawning is handled in the move function } } move(direction) { let moved = false; const traverse = (callback) => { for (let row = 0; row < this.gridSize; row++) { for (let col = 0; col < this.gridSize; col++) { if (direction === 'right' || direction === 'down') { callback(this.gridSize - 1 - row, this.gridSize - 1 - col); } else { callback(row, col); } } } }; const moveTile = (row, col) => { if (this.tiles[row][col] === null) return; let newRow = row; let newCol = col; while (true) { let nextRow = direction === 'up' ? newRow - 1 : direction === 'down' ? newRow + 1 : newRow; let nextCol = direction === 'left' ? newCol - 1 : direction === 'right' ? newCol + 1 : newCol; if (nextRow < 0 || nextRow >= this.gridSize || nextCol < 0 || nextCol >= this.gridSize) break; if (this.tiles[nextRow][nextCol] === null) { newRow = nextRow; newCol = nextCol; } else if (this.tiles[nextRow][nextCol].value === this.tiles[row][col].value && !this.tiles[nextRow][nextCol].merged && !this.tiles[row][col].merged && !this.tiles[nextRow][nextCol].merging && !this.tiles[row][col].merging) { const newValue = this.tiles[row][col].value * 2; const movingTile = this.tiles[row][col]; const targetTile = this.tiles[nextRow][nextCol]; // Mark both tiles as in transition movingTile.merging = true; targetTile.merged = true; this.tiles[row][col] = null; // Create a promise for the merge animation new Promise((resolve) => { const boardX = (this.cameras.main.width - (this.gridSize * this.tileSize)) / 2; this.tweenTile(movingTile, boardX + (nextCol * this.tileSize) + this.tileSize / 2, nextRow * this.tileSize + this.tileSize / 2 + 80); this.time.delayedCall(100, () => { movingTile.destroy(); targetTile.destroy(); const newTile = this.createTile(nextRow, nextCol, newValue); newTile.merged = true; this.tiles[nextRow][nextCol] = newTile; // Update score when tiles merge this.score += newValue; this.scoreText.setText('Score: ' + this.score); this.bounceTile(this.tiles[nextRow][nextCol]); this.mergeSound.play(); resolve(); }); }); moved = true; return; } else { break; } } if (newRow !== row || newCol !== col) { this.tiles[newRow][newCol] = this.tiles[row][col]; this.tiles[row][col] = null; const boardX = (this.cameras.main.width - (this.gridSize * this.tileSize)) / 2; this.tweenTile(this.tiles[newRow][newCol], boardX + (newCol * this.tileSize) + this.tileSize / 2, newRow * this.tileSize + this.tileSize / 2 + 80); moved = true; } }; // Clear merged flags before moving for (let row = 0; row < this.gridSize; row++) { for (let col = 0; col < this.gridSize; col++) { if (this.tiles[row][col]) { this.tiles[row][col].merged = false; this.tiles[row][col].merging = false; } } } traverse(moveTile); if (moved) { this.time.delayedCall(150, () => { this.spawnTile(); }); } return moved; } tweenTile(tile, x, y) { this.tweens.add({ targets: tile, x: x, y: y, duration: 100, ease: 'Power2' }); } popTile(tile) { this.tweens.add({ targets: tile, scaleX: 1.2, scaleY: 1.2, duration: 100, yoyo: true, ease: 'Quad.easeOut' }); } bounceTile(tile) { this.tweens.add({ targets: tile, scaleX: 1.2, scaleY: 1.2, duration: 100, yoyo: true, ease: 'Bounce.easeOut' }); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 440, height: 520, // Adjusted to fit all elements scene: Example, antialias: true, roundPixels: false, }; window.phaserGame = new Phaser.Game(config);