// Ensure you have Phaser 3 included in your HTML file // const cellsPerBlock = 10; // Number of cells per block unit const gridSizeX = 10 * cellsPerBlock; // Adjusted grid size const gridSizeY = 22 * cellsPerBlock; const previewGridSize = 4 * cellsPerBlock; let previewGrid = [] const borderWidth = 100; let activePiece; let currentPiece; let sandGrid = []; let graphics; let cursors; let score = 0; let scoreText; let gameOver = false; let lastRotateTime = 0; const hardDropDelay = 400; const rotateDelay = 200; // Delay in milliseconds let gameOverText; let finalScoreText; let restartButton; let noMovement; let isClearing = false; let i; let heldPiece; let piecesQueue = []; const currentLevel = 0; const pieceTypes = ['line', 'leftL', 'T', 'Z', 'square']; //const pieceTypes = ['leftL']; const pieceLevelColors = { line: [0x33ffe4], L: [0x6f9ceb], leftL: [0x0f2fd2], square: [0xfee440], S: [0x007ea7], Z: [0xf72d26], T: [0x9b5ee6], }; class StartScene extends Phaser.Scene { constructor() { super({ key: 'StartScene' }); } preload() { this.load.image( 'QR', 'https://storage.googleapis.com/rosebud_assets_storage/76382749-1f2e-48cc-a3ac-d5c78a64705d.png', ); // A 10x10 yellow pixel image } create() { const qr = this.add.image(845, 1800, 'QR'); qr.setScale(0.5); // Display text or a start button this.add .text(this.cameras.main.centerX, this.cameras.main.centerY, 'Click to Start', { fontSize: '60px', fill: '#ffffff', }) .setOrigin(0.5); // On click, start the MainScene this.input.on('pointerdown', () => { this.scene.start('MainScene'); }); } } class MainScene extends Phaser.Scene { constructor() { super('MainScene'); this.songs = []; this.gameOver = false; this.lastRotateTime = 0; this.bassValues = []; // Array to keep track of past values this.averageWindow = 20; // Number of frames to average over this.musicPlaying = false; this.lastHardDrop = 0; } preload() { this.load.image( 'white', `https://play.rosebud.ai/assets/white.png.png?csL0`, ); this.load.image( 'background', `https://play.rosebud.ai/assets/SETRISBACKGROUND.png.png?MPlq`, ); this.load.image( 'invertedBackground', `https://play.rosebud.ai/assets/inverted.png.png?BGqD`, ) this.load.audio( 'thud', 'https://storage.googleapis.com/rosebud_assets_storage/ecd89f56-2d82-46c4-88eb-020293c2dc03.wav', ); this.load.audio( 'song1', 'https://storage.googleapis.com/rosebud_assets_storage/721965e2-2a53-465b-9c0e-1a66e2e2ee8f.mp3', ); this.load.audio( 'click', 'https://storage.googleapis.com/rosebud_assets_storage/e21da2e4-841c-40b0-8da3-4142411da537.wav', ); this.load.audio( 'clear', 'https://storage.googleapis.com/rosebud_assets_storage/8fa03e2f-2bdf-4730-9e04-dabb98cdeffe.wav', ); } create() { this.spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); this.clickSound = this.sound.add('click', { volume: 1, loop: false, }); this.thudSound = this.sound.add('thud', { volume: 0.5, loop: false, }); this.clearSound = this.sound.add('clear', { volume: 0.5, loop: false, }); this.thudSound.setRate(2); this.background = this.add.image(500 + borderWidth, 1000 + borderWidth, 'background'); this.background.setScale(2); this.background.setDepth(1); this.background.setTint(0x666666); this.addBackgroundEdgeEmitters(); // Manually create and manage an HTMLAudioElement this.audio = new Audio( 'https://storage.googleapis.com/rosebud_assets_storage/721965e2-2a53-465b-9c0e-1a66e2e2ee8f.mp3', ); this.audio.loop = true; this.audio.volume = 1; // Create an AudioContext and AnalyserNode for the audio this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); const track = this.audioContext.createMediaElementSource(this.audio); this.analyser = this.audioContext.createAnalyser(); track.connect(this.analyser); this.analyser.connect(this.audioContext.destination); this.analyser.fftSize = 256; // You can adjust this value this.bufferLength = this.analyser.frequencyBinCount; this.dataArray = new Uint8Array(this.bufferLength); this.audio.play().catch((e) => console.error('Audio playback failed:', e)); gameOverText = this.add .text(gridSizeX * 5 + 250 + 1.5 * borderWidth, gridSizeY * 4, 'GAME OVER', { fontSize: '100px', fill: '#FFFFFF', }) .setOrigin(0.5) .setVisible(false); finalScoreText = this.add .text(gridSizeX * 5 + 250 + 1.5 * borderWidth, gridSizeY * 5, 'Final Score: 0', { fontSize: '80px', fill: '#FFFF00', }) .setOrigin(0.5) .setVisible(false); this.restartGame = restartGame.bind(this); restartButton = this.add .text(gridSizeX * 5 + 250 + 1.5 * borderWidth, gridSizeY * 6, 'Restart', { fontSize: '80px', fill: '#00FF00', }) .setOrigin(0.5) .setInteractive() .on('pointerdown', () => { this.restartGame(); }) .setVisible(false); graphics = this.add.graphics({ fillStyle: { color: 0xffff00 } }).setDepth(2); graphics.lineStyle(1, 0xffffff, 1); graphics.lineBetween(200, 0, 200, 600); this.add.text(1200, 700, 'Score', { fontSize: '100px', fill: '#FFFFFF' }); scoreText = this.add.text(1200, 800, '0', { fontSize: '100px', fill: '#FFFFFF', align: 'right'}); this.add.text(1200, 120, 'Up Next', { fontSize: '100px', fill: '#FFFFFF' }); // Initialize sandGrid for (let y = 0; y < gridSizeY; y++) { sandGrid[y] = []; for (let x = 0; x < gridSizeX; x++) { sandGrid[y][x] = { hasSand: false, immovable: false, block: false }; } } initializePreviewGrid() // Populate piece queue for (let i = 0; i < 5; i++) { const newPieceType = pieceTypes[Math.floor(Math.random() * pieceTypes.length)]; console.log(newPieceType); piecesQueue.push(newPieceType); } currentPiece = spawnNewBlock(sandGrid); // Add keyboard input cursors = this.input.keyboard.createCursorKeys(); } addBackgroundEdgeEmitters() { const particles = this.add.particles('white'); const backgroundBounds = this.background.getBounds(); const scaleStart = 0.1; // Top edge emitter this.topEdgeParticles = particles.createEmitter({ x: { min: backgroundBounds.x, max: backgroundBounds.right }, speedY: { min: 0, max: -200 }, scale: { start: scaleStart, end: 0 }, blendMode: 'ADD', quantity: 5, emitZone: { source: new Phaser.Geom.Rectangle(0, backgroundBounds.y, 0, 0), type: 'edge', quantity: 5, }, lifespan: 500, }); // Bottom edge emitter this.bottomEdgeParticles = particles.createEmitter({ x: { min: backgroundBounds.x, max: backgroundBounds.right }, speedY: { min: 0, max: 200 }, scale: { start: scaleStart, end: 0 }, blendMode: 'ADD', quantity: 5, emitZone: { source: new Phaser.Geom.Rectangle(0, backgroundBounds.y + backgroundBounds.height, 0, 0), type: 'edge', quantity: 5, }, lifespan: 500, }); // Left edge emitter this.leftEdgeParticles = particles.createEmitter({ y: { min: backgroundBounds.y, max: backgroundBounds.bottom }, speedX: { min: 0, max: -200 }, scale: { start: scaleStart, end: 0 }, blendMode: 'COLOR_BURN: 100', quantity: 5, emitZone: { source: new Phaser.Geom.Rectangle(backgroundBounds.x, 0, 0, 0), type: 'edge', quantity: 5, }, bounce: true, }); // Right edge emitter this.rightEdgeParticles = particles.createEmitter({ y: { min: backgroundBounds.y, max: backgroundBounds.bottom }, speedX: { min: 0, max: 200 }, scale: { start: scaleStart, end: 0 }, blendMode: 'ADD', quantity: 5, emitZone: { source: new Phaser.Geom.Rectangle(backgroundBounds.x + backgroundBounds.width, 0, 0, 0), type: 'edge', quantity: 5, }, lifespan: 500, }); this.edgeParticles = [ this.rightEdgeParticles, this.topEdgeParticles, this.leftEdgeParticles, this.bottomEdgeParticles, ]; } clearContinuousBodies() { const visited = sandGrid.map((row) => row.map(() => false)); function floodFill(startX, startY, blockType) { const queue = [[startX, startY]]; const cells = []; let touchesLeft = false; let touchesRight = false; while (queue.length > 0) { const [x, y] = queue.shift(); if ( x < 0 || x >= gridSizeX || y < 0 || y >= gridSizeY || visited[y][x] || !sandGrid[y][x].hasSand || sandGrid[y][x].blockType !== blockType || sandGrid[y][x].block || !sandGrid[y][x].blockType ) { continue; } visited[y][x] = true; cells.push({ x, y }); if (x === 0) touchesLeft = true; if (x === gridSizeX - 1) touchesRight = true; // Add adjacent cells queue.push([x + 1, y]); queue.push([x - 1, y]); queue.push([x, y + 1]); queue.push([x, y - 1]); // Add diagonal cells if ( x > 0 && y > 0 && !visited[y - 1][x - 1] && sandGrid[y - 1][x - 1].hasSand && sandGrid[y - 1][x - 1].blockType === blockType ) { queue.push([x - 1, y - 1]); // Top-left } if ( x < gridSizeX - 1 && y > 0 && !visited[y - 1][x + 1] && sandGrid[y - 1][x + 1].hasSand && sandGrid[y - 1][x + 1].blockType === blockType ) { queue.push([x + 1, y - 1]); // Top-right } if ( x > 0 && y < gridSizeY - 1 && !visited[y + 1][x - 1] && sandGrid[y + 1][x - 1].hasSand && sandGrid[y + 1][x - 1].blockType === blockType ) { queue.push([x - 1, y + 1]); // Bottom-left } if ( x < gridSizeX - 1 && y < gridSizeY - 1 && !visited[y + 1][x + 1] && sandGrid[y + 1][x + 1].hasSand && sandGrid[y + 1][x + 1].blockType === blockType ) { queue.push([x + 1, y + 1]); // Bottom-right } } return { touchesLeft, touchesRight, cells }; } for (let y = 0; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { if (!visited[y][x] && sandGrid[y][x].hasSand) { const blockType = sandGrid[y][x].blockType; const result = floodFill(x, y, blockType); if (result.touchesLeft && result.touchesRight) { score += result.cells.length; this.triggerShakeEffectClear(result.cells, blockType); } } } } } dimBackground(value) { // Clamp value between 0 and 1 value = Phaser.Math.Clamp(value, 0, 1); value = (value * 2 + 0.1) ** 2; // Linearly interpolate between 255 (white) and 0 (black) based on the input value const colorValue = Math.floor(255 * value); // Construct the tint color const tint = (colorValue << 16) | (colorValue << 8) | colorValue; // Apply the tint to the background this.background.setTint(tint); } analyzeFrequencies() { this.analyser.getByteFrequencyData(this.dataArray); let bassValue = 0; // Assume bass frequencies are in the first 10 bins for (let i = 0; i < 20; i++) { bassValue += this.dataArray[i]; } bassValue /= 80; // Add the current bass value to the array this.bassValues.push(bassValue); // Keep only the last 'averageWindow' values if (this.bassValues.length > this.averageWindow) { this.bassValues.shift(); // Remove the oldest value } // Calculate the moving average let averageBass = this.bassValues.reduce((a, b) => a + b, 0) / this.bassValues.length; //averageBass = // Scale your background image this.dimBackground(averageBass / 255); //this.background.setScale(1*scaleFactor,3); //this.dimBackground(averageBass / 255); console.log(averageBass) this.rightEdgeParticles.setLifespan((averageBass) * 10); this.rightEdgeParticles.setQuantity((averageBass)); this.leftEdgeParticles.setLifespan((averageBass) * 10); this.leftEdgeParticles.setQuantity((averageBass) ); this.topEdgeParticles.setLifespan((averageBass) * 10); this.topEdgeParticles.setQuantity((averageBass) ); this.bottomEdgeParticles.setLifespan((averageBass) * 10); this.bottomEdgeParticles.setQuantity((averageBass) ); } triggerShakeEffect() { currentPiece.flash(); this.shakeParticles(500, 50, null, 500); // Set the flag to true to indicate shaking is in progress this.isShaking = true; // Start shaking the camera this.cameras.main.shake(300, 0.004, false, (camera, progress) => { if (progress === 1) { setTimeout(() => { this.isShaking = false; currentPiece.restore(); activePiece = false; this.unshakeParticles(); }, 50); } }); } shakeParticles(particleSpeed, quantity, tint, lifespan, scale) { this.topEdgeParticles.setSpeed(particleSpeed); this.bottomEdgeParticles.setSpeed(particleSpeed); this.leftEdgeParticles.setSpeed(particleSpeed); this.rightEdgeParticles.setSpeed(particleSpeed); this.topEdgeParticles.setQuantity(quantity); this.leftEdgeParticles.setQuantity(quantity); this.rightEdgeParticles.setQuantity(quantity); this.bottomEdgeParticles.setQuantity(quantity); if (tint) { const lightTint = darkenColor(tint, -90); this.topEdgeParticles.setTint(lightTint); this.leftEdgeParticles.setTint(lightTint); this.rightEdgeParticles.setTint(lightTint); this.bottomEdgeParticles.setTint(lightTint); } if (lifespan) { this.topEdgeParticles.setLifespan(lifespan); this.leftEdgeParticles.setLifespan(lifespan); this.rightEdgeParticles.setLifespan(lifespan); this.bottomEdgeParticles.setLifespan(lifespan); } if (scale) { this.topEdgeParticles.setScale(scale); this.leftEdgeParticles.setScale(scale); this.rightEdgeParticles.setScale(scale); this.bottomEdgeParticles.setScale(scale); } } unshakeParticles() { this.topEdgeParticles.setSpeed(100); this.bottomEdgeParticles.setSpeed(100); this.leftEdgeParticles.setSpeed(100); this.rightEdgeParticles.setSpeed(100); this.topEdgeParticles.setQuantity(5); this.leftEdgeParticles.setQuantity(5); this.rightEdgeParticles.setQuantity(5); this.bottomEdgeParticles.setQuantity(5); this.topEdgeParticles.setLifespan(500); this.leftEdgeParticles.setLifespan(500); this.rightEdgeParticles.setLifespan(500); this.bottomEdgeParticles.setLifespan(500); } triggerShakeEffectClear(cells, blockType) { console.log(blockType); this.background = this.add.image(500 + borderWidth, 1000 + borderWidth, 'invertedBackground').setScale(2).setDepth(1); this.shakeParticles(1000, 100, pieceLevelColors[blockType][currentLevel], 3000); this.clearSound.play(); cells.forEach((cell) => { sandGrid[cell.y][cell.x] = { color: 0xffffff, hasSand: true }; }); // Set the flag to true to indicate shaking is in progress this.isShaking = true; isClearing = true; console.log(isClearing) // Start shaking the camera this.cameras.main.shake(700, 0.015, false, (camera, progress) => { if (progress === 1) { this.isShaking = false; isClearing = false; cells.forEach((cell) => { sandGrid[cell.y][cell.x] = { hasSand: false, immovable: false, block: false, color: 0x000000 }; }); this.unshakeParticles(); this.background = this.add.image(500 + borderWidth, 1000 + borderWidth, 'background').setScale(2).setDepth(1); } }); } update(time) { if (this.isShaking) { return; } this.analyzeFrequencies(); if (gameOver) { displayGameOverScreen(); return; // Stop updating the game } for (i = 0; i < 1; i++) { // Create a copy of the current grid to avoid conflicts while updating const newSandGrid = JSON.parse(JSON.stringify(sandGrid)); // Check for leftward and rightward movement let canMoveLeft = true; let canMoveRight = true; let canMoveDown = true; currentPiece.grid = newSandGrid; // Check if the block can move left or right for (let y = 0; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { if (sandGrid[y][x].block) { if (x === 0 || (sandGrid[y][x - 1].hasSand && !sandGrid[y][x - 1].block)) { canMoveLeft = false; } if (x === gridSizeX - 1 || (sandGrid[y][x + 1].hasSand && !sandGrid[y][x + 1].block)) { canMoveRight = false; } if (y === gridSizeY - 1 || (sandGrid[y + 1][x].hasSand && !sandGrid[y + 1][x].block)) { canMoveDown = false; } } } } // Apply left or right movement if possible if (cursors.left.isDown && canMoveLeft) { for (let y = 0; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { if (sandGrid[y][x].block) { newSandGrid[y][x - 1] = { ...newSandGrid[y][x] }; newSandGrid[y][x] = { hasSand: false, immovable: false, block: false }; } } } currentPiece.moveLeft(); } else if (cursors.right.isDown && canMoveRight) { for (let y = 0; y < gridSizeY; y++) { for (let x = gridSizeX - 1; x >= 0; x--) { if (sandGrid[y][x].block) { newSandGrid[y][x + 1] = { ...newSandGrid[y][x] }; newSandGrid[y][x] = { hasSand: false, immovable: false, block: false }; } } } currentPiece.moveRight(); } if (cursors.up.isDown && time > lastRotateTime + rotateDelay && activePiece) { lastRotateTime = time; this.clickSound.play(); for (let y = gridSizeY - 1; y >= 0; y--) { // Start from the second last row for (let x = 0; x < gridSizeX; x++) { if (newSandGrid[y][x].block) { newSandGrid[y][x] = { hasSand: false, immovable: false, block: false, color: 0x000000, }; } } } currentPiece.rotate(); } for (let y = gridSizeY - 2; y >= 0; y--) { for (let x = 0; x < gridSizeX; x++) { if (newSandGrid[y][x].hasSand) { // Check directly below if (!newSandGrid[y + 1][x].hasSand) { moveSand(newSandGrid, x, y, x, y + 1); } // Check diagonal down-right else if ( x < gridSizeX - 1 && !newSandGrid[y + 1][x + 1].hasSand && !newSandGrid[y][x + 1].hasSand && newSandGrid[y - 2][x].hasSand ) { //&& newSandGrid[y-3][x].hasSand moveSand(newSandGrid, x, y, x + 1, y + 1); } // Check diagonal down-left else if ( x > 0 && !newSandGrid[y + 1][x - 1].hasSand && !newSandGrid[y][x - 1].hasSand && newSandGrid[y - 2][x].hasSand ) { //&& newSandGrid[y-1][x].hasSand moveSand(newSandGrid, x, y, x - 1, y + 1); } } } } if (!canMoveDown) { clearBlocks(newSandGrid); this.thudSound.play(); this.triggerShakeEffect(); } else { currentPiece.moveDown(); } if (this.spaceBar.isDown && time > this.lastHardDrop + hardDropDelay) { this.lastHardDrop = time; currentPiece.hardDrop(); this.thudSound.play(); this.triggerShakeEffect(); } noMovement = areGridsEqual(newSandGrid, sandGrid); if (!activePiece) { currentPiece = spawnNewBlock(newSandGrid); } sandGrid = newSandGrid; piece.grid = sandGrid; } // Update the grid for the next frame if (activePiece) { this.clearContinuousBodies(); } renderGrid(); // Update score text scoreText.setText(score); scoreText.setStyle({ fontSize: '80px', fill: '#FFFFFF', align: 'right' }); // Make it white for visibility scoreText.setVisible(true); // Ensure it's visible // Ensure the scoreText is rendered last or on top of other elements scoreText.setDepth(2); } } const config = { parent: 'renderDiv', type: Phaser.AUTO, fps: { // target: 60, forceSetTimeOut: true, }, scene: [StartScene, MainScene], scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: gridSizeX * 10 + 500 + borderWidth * 2, height: gridSizeY * 10 - 200 + borderWidth * 2, }, }; new Phaser.Game(config); function displayGameOverScreen() { graphics.clear(); graphics.fillStyle(0x000000, 0.5).setDepth(3); // Semi-transparent black overlay graphics.fillRect(0, 0, gridSizeX * 10 + 500 + 3* borderWidth, gridSizeY * 10 + 500).setDepth(3); // Show game over text and restart button gameOverText.setVisible(true).setDepth(3); finalScoreText .setText('Final Score: ' + score) .setVisible(true) .setDepth(3); restartButton.setVisible(true).setDepth(3); } function initializePreviewGrid() { for (let y = 0; y < previewGridSize; y++) { previewGrid[y] = []; for (let x = 0; x < previewGridSize; x++) { previewGrid[y][x] = { hasSand: true, immovable: false, block: false }; } } } function restartGame() { score = 0; gameOver = false; // Clear the grid for (let y = 0; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { sandGrid[y][x] = { hasSand: false, immovable: false, block: false }; } } // Spawn a new block currentPiece = spawnNewBlock(sandGrid); // Restart the Phaser scene (optional, depending on your setup) this.audio.pause(); this.audio.currentTime = 0; this.scene.restart(); } function moveSand(grid, fromX, fromY, toX, toY) { grid[toY][toX] = { ...grid[fromY][fromX] }; grid[fromY][fromX] = { hasSand: false, immovable: false, block: false }; } function spawnNewBlock(grid) { this.activePiece = true; const newPieceType = pieceTypes[Math.floor(Math.random() * pieceTypes.length)]; const pieceType = piecesQueue.shift(); piecesQueue.push(newPieceType); const nextPieceType = piecesQueue[0]; if (pieceType === 'line') { piece = new LinePiece(grid, 4 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } else if (pieceType === 'L') { piece = new LPiece(grid, 4 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } else if (pieceType === 'leftL') { piece = new LeftLPiece(grid, 4 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } else if (pieceType === 'square') { piece = new SquarePiece(grid, 5 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } else if (pieceType === 'T') { piece = new TPiece(grid, 4 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } else if (pieceType === 'S') { piece = new SPiece(grid, 4 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } else if (pieceType === 'Z') { piece = new ZPiece(grid, 4 * cellsPerBlock, 0, pieceLevelColors[pieceType][currentLevel], 'up', pieceType); } console.log(pieceType); piece.draw(piece.upConfig); if (checkImmediateCollision(grid)) { gameOver = true; } activePiece = true; if (nextPieceType === 'line') { previewPiece = new LinePiece(previewGrid, 0, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } else if (nextPieceType === 'L') { previewPiece = new LPiece(previewGrid, cellsPerBlock/2, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } else if (nextPieceType === 'leftL') { previewPiece = new LeftLPiece(previewGrid, cellsPerBlock/2, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } else if (nextPieceType === 'square') { previewPiece = new SquarePiece(previewGrid, cellsPerBlock, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } else if (nextPieceType === 'T') { previewPiece = new TPiece(previewGrid, cellsPerBlock/2, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } else if (nextPieceType === 'S') { previewPiece = new SPiece(previewGrid, cellsPerBlock/2, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } else if (nextPieceType === 'Z') { previewPiece = new ZPiece(previewGrid, cellsPerBlock/2, 2*cellsPerBlock, pieceLevelColors[nextPieceType][currentLevel], 'up', pieceType); } initializePreviewGrid() previewPiece.draw(previewPiece.upConfig) return piece; } function checkImmediateCollision(grid) { // Check if any part of the new block collides with existing non-block sand for (let y = 0; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { if (grid[y][x].block) { // Check collision with non-block sand if (y < gridSizeY - 1 && grid[y + 1][x].hasSand && !grid[y + 1][x].block) { return true; // Collision detected with sand below } if (x > 0 && grid[y][x - 1].hasSand && !grid[y][x - 1].block) { return true; // Collision detected with sand to the left } if (x < gridSizeX - 1 && grid[y][x + 1].hasSand && !grid[y][x + 1].block) { return true; // Collision detected with sand to the right } } } } return false; } function areGridsEqual(grid1, grid2) { for (let y = 0; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { if ( (grid1[y][x].hasSand !== grid2[y][x].hasSand || grid1[y][x].immovable !== grid2[y][x].immovable) && !grid1[y][x].block && !grid2[y][x].block ) { return false; } } } return true; } function drawBlock(grid, x, y, topColor, centerColor, sideColor, bottomColor, blockType, isBlock = true) { // Ensure x and y are within the bounds of the grid if (x < 0 || x + 9 >= gridSizeX || y < 0 || y + 9 >= gridSizeY) { return false; } // Define the size of the center square const centerSize = 6; const edgeWidth = (cellsPerBlock - centerSize) / 2; // Calculate the width of the pentagon edges // Draw a 10x10 block starting from (x, y) for (let dy = 0; dy < cellsPerBlock; dy++) { for (let dx = 0; dx < cellsPerBlock; dx++) { const cellX = x + dx; const cellY = y + dy; // Determine the color of the cell based on its position let cellColor = centerColor; // Default to center color // Apply colors based on the position to create pentagon illusion if (dx < edgeWidth || dx >= cellsPerBlock - edgeWidth) { if (dy < edgeWidth || dy >= cellsPerBlock - edgeWidth) { // Corners const minEdge = Math.min(dx, cellsPerBlock - 1 - dx, dy, cellsPerBlock - 1 - dy); cellColor = minEdge === dx || minEdge === cellsPerBlock - 1 - dx ? sideColor : topColor; cellColor = minEdge === dy ? topColor : cellColor; cellColor = minEdge === cellsPerBlock - 1 - dy ? bottomColor : cellColor; } else { // Sides cellColor = sideColor; } } else if (dy < edgeWidth || dy >= cellsPerBlock - edgeWidth) { // Top and bottom edges cellColor = dy < edgeWidth ? topColor : bottomColor; } let modifiedCellColor = cellColor; if (!isBlock) { const val = Math.random(); if (Math.random() < 0.05) { modifiedCellColor = darkenColor(cellColor); } else if (val > 0.95) { modifiedCellColor = darkenColor(cellColor, -30); } } grid[cellY][cellX] = { hasSand: true, immovable: false, block: isBlock, color: !isBlock ? modifiedCellColor : cellColor, blockType: blockType, }; } } return true; } function darkenColor(hexColor, amount = 30) { // Extract the RGB components let r = (hexColor >> 16) - amount; let g = ((hexColor >> 8) & 0x00ff) - amount; let b = (hexColor & 0x0000ff) - amount; // Clamp the values so they are between 0 and 255 r = r < 0 ? 0 : r > 255 ? 255 : r; g = g < 0 ? 0 : g > 255 ? 255 : g; b = b < 0 ? 0 : b > 255 ? 255 : b; // Reassemble the color and return it return (r << 16) + (g << 8) + b; } class Piece { constructor(grid, x, y, color, direction, pieceType) { this.grid = grid; this.x = x; this.y = y; this.direction = direction; this.centerColor = color; this.topColor = darkenColor(this.centerColor, -30); this.sideColor = darkenColor(this.centerColor); this.bottomColor = darkenColor(this.sideColor); this.pieceType = pieceType; } moveLeft() { this.x -= 1; } moveDown() { this.y += 1; } moveRight() { this.x += 1; } draw(blockCoordinates, white = false, isBlock = true) { const newGrid = this.grid; // Find the largest x const largestX = blockCoordinates.reduce( (max, current) => (current[0] > max ? current[0] : max), blockCoordinates[0][0], ); // Find the smallest x const smallestX = blockCoordinates.reduce( (min, current) => (current[0] < min ? current[0] : min), blockCoordinates[0][0], ); if (largestX * cellsPerBlock + this.x + cellsPerBlock > gridSizeX) { this.x -= largestX * cellsPerBlock + this.x + cellsPerBlock - gridSizeX; } if (smallestX * cellsPerBlock + this.x < 0) { this.x += 0 - (smallestX * cellsPerBlock + this.x); } for (const coordinate of blockCoordinates) { drawBlock( newGrid, this.x + coordinate[0] * cellsPerBlock, this.y + coordinate[1] * cellsPerBlock, white ? 0xffffff : !isBlock ? this.centerColor : this.topColor, white ? 0xffffff : !isBlock ? this.centerColor : this.centerColor, white ? 0xffffff : !isBlock ? this.centerColor : this.sideColor, white ? 0xffffff : !isBlock ? this.centerColor : this.bottomColor, this.pieceType, isBlock, ); } this.grid = newGrid; } getConfiguration() { if (this.direction === 'up') { return this.upConfig; } else if (this.direction === 'down') { return this.downConfig; } else if (this.direction === 'left') { return this.leftConfig; } else if (this.direction === 'right') { return this.rightConfig; } } rotate() { if (this.direction === 'up') { this.draw(this.rightConfig); this.direction = 'right'; } else if (this.direction === 'right') { this.draw(this.downConfig); this.direction = 'down'; } else if (this.direction === 'down') { this.draw(this.leftConfig); this.direction = 'left'; } else if (this.direction === 'left') { this.draw(this.upConfig); this.direction = 'up'; } } flash() { for (let y = gridSizeY - 1; y >= 0; y--) { // Start from the second last row for (let x = 0; x < gridSizeX; x++) { if (this.grid[y][x].block) { this.grid[y][x] = { hasSand: false, immovable: false, block: false, color: 0x000000, }; } } } this.draw(this.getConfiguration(), true); } restore() { this.draw(this.getConfiguration(), false, false); } hardDrop() { let maxDrop; const lowestBlocks = {}; // Object to store the lowest block for each x position. // Find the lowest block for each x position in the piece's current configuration, considering cellsPerBlock. for (const [blockX, blockY] of this.getConfiguration(this.direction)) { const scaledBlockX = blockX * cellsPerBlock; const scaledBlockY = blockY * cellsPerBlock; if (!lowestBlocks[scaledBlockX] || scaledBlockY > lowestBlocks[scaledBlockX]) { lowestBlocks[scaledBlockX] = scaledBlockY; } } // For each lowest block, calculate how far it can drop, considering cellsPerBlock. for (const blockX in lowestBlocks) { const blockY = lowestBlocks[blockX]; for (let x = this.x + parseInt(blockX); x < this.x + parseInt(blockX) + cellsPerBlock; x++) { for (let y = this.y + blockY + cellsPerBlock + 1; y < this.grid.length; y++) { if (this.grid[y][x].hasSand) { // Found a sand block below, calculate the drop distance for this block, considering cellsPerBlock. const dropDistance = y - (this.y + blockY + cellsPerBlock); maxDrop = Math.min(maxDrop ? maxDrop : dropDistance, dropDistance); break; } if (y === this.grid.length - 1) { // If reached the bottom without finding a sand block. const dropDistance = y - (this.y + blockY + cellsPerBlock); maxDrop = Math.min(maxDrop ? maxDrop : dropDistance, dropDistance); } } } } // Update the piece's y position. this.y += maxDrop; // Assuming clearBlocks(grid) and draw(configuration) are already correctly implemented for cellsPerBlock scaling. clearBlocks(this.grid); // Clear the piece's previous position in the grid. this.draw(this.getConfiguration(), false); // Draw the piece in its new position. } } function clearBlocks(newSandGrid) { for (let y = gridSizeY - 1; y >= 0; y--) { // Start from the second last row for (let x = 0; x < gridSizeX; x++) { if (newSandGrid[y][x].block) { newSandGrid[y][x] = { hasSand: false, immovable: false, block: false, color: 0x000000, }; } } } } class LinePiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [0, 0], [1, 0], [2, 0], [3, 0], ]; this.downConfig = [ [0, 1], [1, 1], [2, 1], [3, 1], ]; this.leftConfig = [ [1, -2], [1, -1], [1, 0], [1, 1], ]; this.rightConfig = [ [2, -2], [2, -1], [2, 0], [2, 1], ]; } } class LPiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [2, 0], [2, 1], [1, 1], [0, 1], ]; this.downConfig = [ [0, 2], [2, 1], [1, 1], [0, 1], ]; this.leftConfig = [ [0, 0], [1, 0], [1, 1], [1, 2], ]; this.rightConfig = [ [1, 0], [1, 1], [1, 2], [2, 2], ]; } } class LeftLPiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [0, 0], [0, 1], [1, 1], [2, 1], ]; this.rightConfig = [ [1, 0], [2, 0], [1, 1], [1, 2], ]; this.downConfig = [ [0, 1], [1, 1], [2, 1], [2, 2], ]; this.leftConfig = [ [1, 0], [1, 1], [1, 2], [0, 2], ]; } } class TPiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [0, 1], [1, 1], [2, 1], [1, 0], ]; this.rightConfig = [ [1, 0], [1, 1], [1, 2], [2, 1], ]; this.downConfig = [ [0, 1], [1, 1], [2, 1], [1, 2], ]; this.leftConfig = [ [1, 0], [1, 1], [1, 2], [0, 1], ]; } } class ZPiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [0, 0], [1, 0], [1, 1], [2, 1], ]; this.rightConfig = [ [2, 0], [2, 1], [1, 1], [1, 2], ]; this.downConfig = [ [0, 1], [1, 1], [1, 2], [2, 2], ]; this.leftConfig = [ [0, 1], [0, 2], [1, 0], [1, 1], ]; } } class SPiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [2, 0], [1, 0], [1, 1], [0, 1], ]; this.rightConfig = [ [2, 2], [2, 1], [1, 1], [1, 0], ]; this.downConfig = [ [2, 1], [1, 1], [1, 2], [0, 2], ]; this.leftConfig = [ [1, 2], [1, 1], [0, 1], [0, 0], ]; } } class SquarePiece extends Piece { constructor(grid, x, y, color, direction, pieceType) { super(grid, x, y, color, direction, pieceType); this.upConfig = [ [0, 0], [1, 0], [1, 1], [0, 1], ]; this.rightConfig = [ [0, 0], [1, 0], [1, 1], [0, 1], ]; this.downConfig = [ [0, 0], [1, 0], [1, 1], [0, 1], ]; this.leftConfig = [ [0, 0], [1, 0], [1, 1], [0, 1], ]; } } function renderGrid() { graphics.clear(); for (let y = 20; y < gridSizeY; y++) { for (let x = 0; x < gridSizeX; x++) { if (sandGrid[y][x].hasSand) { const color = isClearing && sandGrid[y][x].color != 0xffffff ? 0x000000 : sandGrid[y][x].color; graphics.fillStyle(color, 1.0); graphics.fillRect(x * 10 + borderWidth, y * 10 - 200 + borderWidth, 10, 10); } } } for (let y = 0; y < previewGridSize; y++) { for (let x = 0; x < previewGridSize; x++) { if (previewGrid[y][x].hasSand) { color = previewGrid[y][x].color; if (color) { graphics.fillStyle(color, 1.0); graphics.fillRect(x * 10 + 1200, y * 10 + borderWidth + 50, 10, 10); } } } } }