class Example extends Phaser.Scene { constructor() { super(); this.selectedImage = null; this.grid = []; this.assetKeys = ['apple', 'milk', 'orange', 'carrot', 'tomato']; this.gridSize = 8; this.slotSize = 80; } preload() { this.load.image('apple', 'https://storage.googleapis.com/rosebud_assets_storage/9952bf26-e548-4a43-8e21-cdf2b534ba76.png'); this.load.image('milk', 'https://storage.googleapis.com/rosebud_assets_storage/93295952-91a3-427e-8b55-9b39a7060076.png'); this.load.image('orange', 'https://storage.googleapis.com/rosebud_assets_storage/6c616831-699b-4471-8e23-389e476112cc.png'); this.load.image('carrot', 'https://storage.googleapis.com/rosebud_assets_storage/e12d7e80-abee-4709-bbda-c10aa97ee52b.png'); this.load.image('tomato', 'https://storage.googleapis.com/rosebud_assets_storage/5d4b2016-15d8-41ea-8b88-5c8e62754a88.png'); } create() { let rectangleWidth = 10; let numberOfRectangles = Math.ceil(this.cameras.main.width / rectangleWidth) + 1; let backgroundGraphics = this.make.graphics({ fillStyle: { color: 0xffffff } }); for (let i = 0; i < numberOfRectangles; i++) { let hue = i % 2 === 0 ? 0.55 : 0.6; let saturation = i % 2 === 0 ? 0.7 : 0.1; let lightness = i % 2 === 0 ? 0.7 : 0.9; let color = Phaser.Display.Color.HSLToColor(hue, saturation, lightness).color; backgroundGraphics.fillStyle(color); backgroundGraphics.fillRect(i * rectangleWidth, 0, rectangleWidth, this.cameras.main.height); } backgroundGraphics.generateTexture('background', numberOfRectangles * rectangleWidth, this.cameras.main.height); this.background = this.add.tileSprite(0, 0, this.cameras.main.width, this.cameras.main.height, 'background'); this.background.setOrigin(0, 0); let slotSize = 80; let slotSpacing = 5; let totalWidth = this.gridSize * (slotSize + slotSpacing) - slotSpacing; let totalHeight = this.gridSize * (slotSize + slotSpacing) - slotSpacing; let startX = (this.cameras.main.width - totalWidth) / 2; let startY = (this.cameras.main.height - totalHeight) / 2; for (let i = 0; i < this.gridSize; i++) { this.grid[i] = []; for (let j = 0; j < this.gridSize; j++) { let x = startX + i * (slotSize + slotSpacing); let y = startY + j * (slotSize + slotSpacing); let assetKey = Phaser.Math.RND.pick(this.assetKeys); let image = this.add.image(x, y, assetKey).setOrigin(0.5, 0.5); image.setInteractive(); let scaleFactor = slotSize / Math.max(image.width, image.height); if (assetKey === 'carrot') { scaleFactor *= 1.2; } image.setScale(scaleFactor); // Modified part this.grid[i][j] = {x, y, image, assetKey, i, j}; image.cell = this.grid[i][j]; this.setSwapEventListener(image); } } this.getMatches(); } setSwapEventListener(image) { image.off('pointerdown'); image.on('pointerdown', () => { if (this.selectedImage) { const clickedCell = image.cell; const selectedCell = this.selectedImage; // Check if the clicked image is the same as the selected image if (selectedCell === clickedCell) { // Deselect the image selectedCell.image.clearTint(); selectedCell.image.setScale(this.slotSize / Math.max(selectedCell.image.width, selectedCell.image.height)); this.selectedImage = null; return; } // Check if the selected image and clicked image are adjacent if ( (Math.abs(selectedCell.i - clickedCell.i) === 1 && selectedCell.j === clickedCell.j) || (Math.abs(selectedCell.j - clickedCell.j) === 1 && selectedCell.i === clickedCell.i) ) { // Reset the tint and scale of the selected image selectedCell.image.clearTint(); selectedCell.image.setScale(this.slotSize / Math.max(selectedCell.image.width, selectedCell.image.height)); // Swap cells this.swapCells(selectedCell, clickedCell); } else { // Reset the tint and scale of the selected image selectedCell.image.clearTint(); selectedCell.image.setScale(this.slotSize / Math.max(selectedCell.image.width, selectedCell.image.height)); // Select the clicked image clickedCell.image.setTint(0xF3F3F3); // changed tint color for visibility clickedCell.image.setScale(this.slotSize / Math.min(clickedCell.image.width, clickedCell.image.height) * 1.1); this.selectedImage = clickedCell; } } else { // Select the clicked image image.cell.image.setTint(0xF3F3F3); // changed tint color for visibility image.cell.image.setScale(this.slotSize / Math.min(image.cell.image.width, image.cell.image.height) * 1.1); this.selectedImage = image.cell; } }); } swapCells(cell1, cell2) { // Swap positions in grid let i1 = cell1.i, j1 = cell1.j; let i2 = cell2.i, j2 = cell2.j; // Swap the cells in the grid let temp = this.grid[i1][j1]; this.grid[i1][j1] = this.grid[i2][j2]; this.grid[i2][j2] = temp; // Update the cell property of both images after the swap cell1.image.cell = this.grid[cell1.i][cell1.j]; cell2.image.cell = this.grid[cell2.i][cell2.j]; // Preparing to swap visual positions this.tweens.add({ targets: cell1.image, x: this.grid[i1][j1].x, y: this.grid[i1][j1].y, ease: 'Sine.easeInOut', duration: 300 }); this.tweens.add({ targets: cell2.image, x: this.grid[i2][j2].x, y: this.grid[i2][j2].y, ease: 'Sine.easeInOut', duration: 300, onComplete: () => { // Check for matches after swap this.getMatches(); } }); // Reset the selected image this.selectedImage = null; // Update the cell property of both images after the swap cell1.image.cell = this.grid[cell1.i][cell1.j]; cell2.image.cell = this.grid[cell2.i][cell2.j]; } // New function to perform Depth-First Search getMatchesDFS(i, j, visited, key, cluster) { if (i < 0 || j < 0 || i >= this.gridSize || j >= this.gridSize || visited[i][j]) return; if (this.grid[i][j].assetKey === key) { cluster.push(this.grid[i][j]); visited[i][j] = true; this.getMatchesDFS(i + 1, j, visited, key, cluster); this.getMatchesDFS(i - 1, j, visited, key, cluster); this.getMatchesDFS(i, j + 1, visited, key, cluster); this.getMatchesDFS(i, j - 1, visited, key, cluster); } } getMatches() { let visited = []; for (let i = 0; i < this.gridSize; i++) { visited[i] = new Array(this.gridSize).fill(false); } let matches = []; for (let i = 0; i < this.gridSize; i++) { for (let j = 0; j < this.gridSize; j++) { if (!visited[i][j] && this.grid[i][j].assetKey !== null) { let cluster = []; this.getMatchesDFS(i, j, visited, this.grid[i][j].assetKey, cluster); if (cluster.length >= 3) // Only add clusters of 3 or more matches.push(cluster); } } } if (matches.length > 0) { let match = matches[0]; // Handle matches one at a time for (let cell of match) { if(cell.image) { // Check if image exists before setting visibility cell.image.visible = false; } } this.time.delayedCall(500, () => { // Add a delay before updating the board this.updateBoard(); }, [], this); } else { this.isSwapping = false; } } updateBoard() { let hasFallen = false; for (let i = 0; i < this.gridSize; i++) { for (let j = this.gridSize - 1; j >= 0; j--) { let cell = this.grid[i][j]; if (!cell.image || !cell.image.visible) { cell.image = null; cell.assetKey = null; for (let k = j - 1; k >= 0; k--) { let upperCell = this.grid[i][k]; if (upperCell.image && upperCell.image.visible) { cell.image = upperCell.image; cell.image.i = i; // Update i value cell.image.j = j; // Update j value cell.assetKey = upperCell.assetKey; upperCell.image = null; upperCell.assetKey = null; hasFallen = true; this.tweens.add({ targets: cell.image, y: cell.y, ease: 'Sine.easeInOut', duration: 300 }); // Update the cell property of the fallen image cell.image.cell = cell; break; } } } } } if (hasFallen) { this.time.delayedCall(500, () => { this.updateBoard(); }); } else { for (let i = 0; i < this.gridSize; i++) { if (!this.grid[i][0].image) { this.fillEmptyTopCells(i, 0); } } this.getMatches(); } // Update the cell property of each image and reassign the event listener for (let i = 0; i < this.gridSize; i++) { for (let j = 0; j < this.gridSize; j++) { if (this.grid[i][j].image) { this.grid[i][j].image.cell = this.grid[i][j]; this.setSwapEventListener(this.grid[i][j].image); } } } } fillEmptyTopCells(column, row) { let emptyCell = this.grid[column][row]; let assetKey = Phaser.Math.RND.pick(this.assetKeys); let image = this.add.image(emptyCell.x, -this.slotSize, assetKey).setOrigin(0.5, 0.5); // Assign i and j indices to the new image image.i = column; image.j = row; image.setInteractive(); let scaleFactor = this.slotSize / Math.max(image.width, image.height); if (assetKey === 'carrot') { scaleFactor *= 1.2; } image.setScale(scaleFactor); emptyCell.image = image; emptyCell.assetKey = assetKey; this.tweens.add({ targets: image, y: emptyCell.y, ease: 'Sine.easeInOut', duration: 300, onComplete: () => { // Add a delay before checking for matches this.time.delayedCall(300, () => { this.getMatches(); }); } }); // Update the cell property of the new image image.cell = this.grid[column][row]; this.setSwapEventListener(image); } update() { // No logic was given for this function } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, }, width: 1000, height: 800, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: Example }; window.phaserGame = new Phaser.Game(config);

Other games like this

About Match 3 (reupload)