class MainMenu extends Phaser.Scene { constructor() { super('MainMenu'); } create() { this.cameras.main.setBackgroundColor('#BBADA0'); const { width, height } = this.sys.game.config; // Title this.add.text(width / 2, height * 0.3, '2048', { fontSize: '64px', fontFamily: 'Arial', color: '#776E65', align: 'center' }).setOrigin(0.5); // Play button const playButton = this.add.text(width / 2, height * 0.5, 'Play Game', { fontSize: '32px', fontFamily: 'Arial', color: '#F9F6F2', align: 'center', backgroundColor: '#8F7A66', padding: { left: 15, right: 15, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); playButton.on('pointerdown', () => { this.scene.start('Game2048'); }); // Instructions this.add.text(width / 2, height * 0.7, 'Use arrow keys to move tiles\nCombine same numbers to get 2048!', { fontSize: '24px', fontFamily: 'Arial', color: '#776E65', align: 'center' }).setOrigin(0.5); } } class Game2048 extends Phaser.Scene { constructor() { super('Game2048'); this.grid = []; this.score = 0; this.bestScore = localStorage.getItem('bestScore') || 0; this.tileSize = 0; // Will be calculated dynamically this.spacing = 0; // Will be calculated dynamically this.tiles = []; } preload() { this.load.image('tile', 'https://labs.phaser.io/assets/particles/yellow.png'); } create() { this.cameras.main.setBackgroundColor('#BBADA0'); // Initialize grid for (let i = 0; i < 4; i++) { this.grid[i] = [0, 0, 0, 0]; this.tiles[i] = [null, null, null, null]; } this.resizeGame(); // Add score text this.scoreText = this.add.text(this.sys.game.config.width * 0.25, this.sys.game.config.height * 0.05, 'Score: 0', { fontSize: '32px', fill: '#FFF', fontFamily: 'Arial' }); this.scoreText.setOrigin(0.5); this.bestScoreText = this.add.text(this.sys.game.config.width * 0.75, this.sys.game.config.height * 0.05, 'Best: ' + this.bestScore, { fontSize: '32px', fill: '#FFF', fontFamily: 'Arial' }); this.bestScoreText.setOrigin(0.5); // Setup input this.input.keyboard.on('keydown', this.handleInput, this); // Create initial tiles this.addRandomTile(); this.addRandomTile(); // Add restart button const restartButton = this.add.text(this.sys.game.config.width * 0.9, this.sys.game.config.height * 0.05, 'Restart', { fontSize: '24px', fontFamily: 'Arial', color: '#F9F6F2', backgroundColor: '#8F7A66', padding: { left: 10, right: 10, top: 5, bottom: 5 } }).setOrigin(0.5).setInteractive(); restartButton.on('pointerdown', () => { this.scene.restart(); }); // Listen for resize events this.scale.on('resize', this.resizeGame, this); } resizeGame() { const width = this.sys.game.config.width; const height = this.sys.game.config.height; // Calculate tile size and spacing based on the game size const gridSize = Math.min(width, height * 0.9); // Leave some space for score this.tileSize = gridSize / 4.5; // 4 tiles + 3 spaces between = 4.5 units this.spacing = this.tileSize / 10; if (this.scoreText) { this.scoreText.setPosition(width / 2, height * 0.05); this.scoreText.setFontSize(Math.min(32, width * 0.06) + 'px'); } this.updateGrid(); } updateGrid() { // Remove existing grid and tiles this.children.list.forEach(child => { if (child.type === 'Rectangle' || child.type === 'Container') { child.destroy(); } }); // Recreate grid and tiles this.createGrid(); for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { if (this.grid[row][col] !== 0) { this.createTile(row, col, this.grid[row][col]); } } } } createGrid() { const gridWidth = 4 * this.tileSize + 3 * this.spacing; const gridHeight = 4 * this.tileSize + 3 * this.spacing; const startX = (this.sys.game.config.width - gridWidth) / 2; const startY = (this.sys.game.config.height - gridHeight) / 2; for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { let x = startX + col * (this.tileSize + this.spacing) + this.tileSize / 2; let y = startY + row * (this.tileSize + this.spacing) + this.tileSize / 2; let tile = this.add.rectangle(x, y, this.tileSize, this.tileSize, 0xCDC1B4); tile.setStrokeStyle(2, 0x776E65); } } } addRandomTile() { let emptyCells = []; for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { if (this.grid[row][col] === 0) { emptyCells.push({ row, col }); } } } if (emptyCells.length > 0) { let { row, col } = Phaser.Math.RND.pick(emptyCells); let value = Math.random() < 0.9 ? 2 : 4; this.grid[row][col] = value; this.createTile(row, col, value); } } createTile(row, col, value) { const gridWidth = 4 * this.tileSize + 3 * this.spacing; const gridHeight = 4 * this.tileSize + 3 * this.spacing; const startX = (this.sys.game.config.width - gridWidth) / 2; const startY = (this.sys.game.config.height - gridHeight) / 2; let x = startX + col * (this.tileSize + this.spacing) + this.tileSize / 2; let y = startY + row * (this.tileSize + this.spacing) + this.tileSize / 2; let tile = this.add.container(x, y); let bg = this.add.rectangle(0, 0, this.tileSize, this.tileSize, this.getTileColor(value)); bg.setStrokeStyle(2, 0x776E65); let text = this.add.text(0, 0, value.toString(), { fontSize: this.tileSize / 3 + 'px', fontFamily: 'Arial', fill: value <= 4 ? '#776E65' : '#F9F6F2', align: 'center' }).setOrigin(0.5); tile.add([bg, text]); this.tiles[row][col] = tile; // Add a pop-up animation tile.setScale(0); this.tweens.add({ targets: tile, scale: 1, duration: 150, ease: 'Back.out', onComplete: () => { this.tweens.add({ targets: tile, scale: 1.1, duration: 100, yoyo: true, ease: 'Sine.easeInOut' }); } }); } getTileColor(value) { const colors = { 2: 0xEEE4DA, 4: 0xEDE0C8, 8: 0xF2B179, 16: 0xF59563, 32: 0xF67C5F, 64: 0xF65E3B, 128: 0xEDCF72, 256: 0xEDCC61, 512: 0xEDC850, 1024: 0xEDC53F, 2048: 0xEDC22E }; return colors[value] || 0x3C3A32; } handleInput(event) { let moved = false; switch (event.keyCode) { case Phaser.Input.Keyboard.KeyCodes.LEFT: moved = this.moveTiles('left'); break; case Phaser.Input.Keyboard.KeyCodes.RIGHT: moved = this.moveTiles('right'); break; case Phaser.Input.Keyboard.KeyCodes.UP: moved = this.moveTiles('up'); break; case Phaser.Input.Keyboard.KeyCodes.DOWN: moved = this.moveTiles('down'); break; } if (moved) { this.addRandomTile(); } this.checkGameOver(); } moveTiles(direction) { let moved = false; let mergedTiles = []; const move = (row, col, rowStep, colStep) => { if (this.grid[row][col] !== 0) { let newRow = row + rowStep; let newCol = col + colStep; while (newRow >= 0 && newRow < 4 && newCol >= 0 && newCol < 4) { if (this.grid[newRow][newCol] === 0) { this.grid[newRow][newCol] = this.grid[row][col]; this.grid[row][col] = 0; this.moveTileAnimation(row, col, newRow, newCol); row = newRow; col = newCol; moved = true; } else if (this.grid[newRow][newCol] === this.grid[row][col] && !mergedTiles.includes(`${newRow},${newCol}`)) { this.grid[newRow][newCol] *= 2; this.score += this.grid[newRow][newCol]; this.grid[row][col] = 0; this.mergeTileAnimation(row, col, newRow, newCol, this.grid[newRow][newCol]); mergedTiles.push(`${newRow},${newCol}`); moved = true; break; } else { break; } newRow += rowStep; newCol += colStep; } } }; if (direction === 'left') { for (let row = 0; row < 4; row++) { for (let col = 1; col < 4; col++) { move(row, col, 0, -1); } } } else if (direction === 'right') { for (let row = 0; row < 4; row++) { for (let col = 2; col >= 0; col--) { move(row, col, 0, 1); } } } else if (direction === 'up') { for (let col = 0; col < 4; col++) { for (let row = 1; row < 4; row++) { move(row, col, -1, 0); } } } else if (direction === 'down') { for (let col = 0; col < 4; col++) { for (let row = 2; row >= 0; row--) { move(row, col, 1, 0); } } } if (moved) { this.scoreText.setText('Score: ' + this.score); } return moved; } moveTileAnimation(fromRow, fromCol, toRow, toCol) { let tile = this.tiles[fromRow][fromCol]; this.tiles[toRow][toCol] = tile; this.tiles[fromRow][fromCol] = null; const gridWidth = 4 * this.tileSize + 3 * this.spacing; const gridHeight = 4 * this.tileSize + 3 * this.spacing; const startX = (this.sys.game.config.width - gridWidth) / 2; const startY = (this.sys.game.config.height - gridHeight) / 2; let x = startX + toCol * (this.tileSize + this.spacing) + this.tileSize / 2; let y = startY + toRow * (this.tileSize + this.spacing) + this.tileSize / 2; this.tweens.add({ targets: tile, x: x, y: y, duration: 150, ease: 'Quad.easeOut' }); } mergeTileAnimation(fromRow, fromCol, toRow, toCol, newValue) { let fromTile = this.tiles[fromRow][fromCol]; let toTile = this.tiles[toRow][toCol]; this.tiles[fromRow][fromCol] = null; const gridWidth = 4 * this.tileSize + 3 * this.spacing; const gridHeight = 4 * this.tileSize + 3 * this.spacing; const startX = (this.sys.game.config.width - gridWidth) / 2; const startY = (this.sys.game.config.height - gridHeight) / 2; let x = startX + toCol * (this.tileSize + this.spacing) + this.tileSize / 2; let y = startY + toRow * (this.tileSize + this.spacing) + this.tileSize / 2; this.tweens.add({ targets: fromTile, x: x, y: y, duration: 100, ease: 'Linear', onComplete: () => { fromTile.destroy(); toTile.destroy(); this.createTile(toRow, toCol, newValue); } }); } checkGameOver() { let hasEmptyCell = false; let hasEqualAdjacentTiles = false; let highest = 0; for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { if (this.grid[row][col] === 0) { hasEmptyCell = true; } else { highest = Math.max(highest, this.grid[row][col]); if (row < 3 && this.grid[row][col] === this.grid[row + 1][col]) { hasEqualAdjacentTiles = true; } if (col < 3 && this.grid[row][col] === this.grid[row][col + 1]) { hasEqualAdjacentTiles = true; } } } } if (highest === 2048) { this.gameOver("You Win!"); } else if (!hasEmptyCell && !hasEqualAdjacentTiles) { this.gameOver("Game Over!"); } } gameOver(message) { this.input.keyboard.off('keydown', this.handleInput, this); let overlay = this.add.rectangle(0, 0, this.sys.game.config.width, this.sys.game.config.height, 0x000000, 0.7); overlay.setOrigin(0, 0); this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height / 2, message, { fontSize: Math.min(48, this.sys.game.config.width * 0.1) + 'px', fontFamily: 'Arial', color: '#FFFFFF', align: 'center' }).setOrigin(0.5); if (this.score > this.bestScore) { this.bestScore = this.score; localStorage.setItem('bestScore', this.bestScore); this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height * 0.4, 'New Best Score!', { fontSize: Math.min(32, this.sys.game.config.width * 0.07) + 'px', fontFamily: 'Arial', color: '#FFD700', align: 'center' }).setOrigin(0.5); } // Add a button to return to the main menu const menuButton = this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height * 0.6, 'Main Menu', { fontSize: '32px', fontFamily: 'Arial', color: '#F9F6F2', align: 'center', backgroundColor: '#8F7A66', padding: { left: 15, right: 15, top: 10, bottom: 10 } }).setOrigin(0.5).setInteractive(); menuButton.on('pointerdown', () => { this.scene.start('MainMenu'); }); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', width: window.innerWidth, height: window.innerHeight, scene: [MainMenu, Game2048], scale: { mode: Phaser.Scale.RESIZE, autoCenter: Phaser.Scale.CENTER_BOTH } }; window.phaserGame = new Phaser.Game(config);