class Tetris extends Phaser.Scene { constructor() { super(); this.GRID_SIZE = 25; this.GRID_WIDTH = 10; this.GRID_HEIGHT = 20; this.PADDING = 10; this.shapes = [ { shape: [[1, 1, 1, 1]], color: 0x00ffff }, // I - Cyan { shape: [[1, 1], [1, 1]], color: 0xffff00 }, // O - Yellow { shape: [[1, 1, 1], [0, 1, 0]], color: 0x800080 }, // T - Purple { shape: [[1, 1, 1], [1, 0, 0]], color: 0x0000ff }, // J - Blue { shape: [[1, 1, 1], [0, 0, 1]], color: 0xffa500 }, // L - Orange { shape: [[1, 1, 0], [0, 1, 1]], color: 0x00ff00 }, // S - Green { shape: [[0, 1, 1], [1, 1, 0]], color: 0xff0000 } // Z - Red ]; this.currentShape = null; this.nextShape = null; this.currentShapePosition = { x: 0, y: 0 }; this.grid = []; this.gameOver = false; this.score = 0; this.scoreText = null; this.level = 1; this.levelText = null; this.linesCleared = 0; this.tickEvent = null; this.flashingLines = []; this.levelUpText = null; this.gameOverText = null; this.restartButton = null; this.lineClearSound = null; this.backgroundMusic = null; this.stuckSound = null; this.blockMoveSound = null; this.gameOverSound = null; this.touchStartX = 0; this.touchStartY = 0; this.isSwipingDown = false; this.continuousDownMoveEvent = null; } preload() { this.load.image('square', 'https://play.rosebud.ai/assets/white square.png?uTut'); this.load.audio('lineClear', 'https://play.rosebud.ai/assets/line.wav?wFUT'); this.load.audio('backgroundMusic', 'https://play.rosebud.ai/assets/song1.mp3?ATYi'); this.load.audio('stuck', 'https://play.rosebud.ai/assets/stuck.wav?qjFZ'); this.load.audio('blockMove', 'https://play.rosebud.ai/assets/block.wav?4vtn'); this.load.audio('gameOver', 'https://play.rosebud.ai/assets/game-over-arcade-6435.mp3?HOMq'); } create() { this.cameras.main.setBackgroundColor('#000000'); this.initGrid(); this.nextShape = this.getRandomShape(); this.spawnShape(); this.input.keyboard.on('keydown-LEFT', this.moveLeft, this); this.input.keyboard.on('keydown-RIGHT', this.moveRight, this); this.input.keyboard.on('keydown-DOWN', this.moveDown, this); this.input.keyboard.on('keydown-UP', this.rotate, this); this.input.on('pointerdown', this.onTouchStart, this); this.input.on('pointermove', this.onTouchMove, this); this.input.on('pointerup', this.onTouchEnd, this); this.tickEvent = this.time.addEvent({ delay: this.getTickDelay(), callback: this.tick, callbackScope: this, loop: true }); const textStyle = { fontSize: '20px', fontFamily: 'Arial', color: '#ffffff', stroke: '#000000', strokeThickness: 4 }; this.levelText = this.add.text(this.PADDING + 20, this.PADDING, 'Level: 1', textStyle); this.scoreText = this.add.text(this.sys.game.config.width - this.PADDING - 20, this.PADDING, 'Score: 0', textStyle) .setOrigin(1, 0); // Initially hide the level and score text this.levelText.setAlpha(0); this.scoreText.setAlpha(0); this.levelUpText = this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height / 2, 'LEVEL UP!', { fontSize: '48px', fontFamily: 'Arial', color: '#ffff00', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5).setAlpha(0); this.gameOverText = this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height / 2 - 50, 'Game Over!', { fontSize: '48px', fontFamily: 'Arial', color: '#ffffff', stroke: '#000000', strokeThickness: 6 }).setOrigin(0.5).setAlpha(0); this.restartButton = this.add.text(this.sys.game.config.width / 2, this.sys.game.config.height / 2 + 50, 'Restart', { fontSize: '32px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#4a4a4a', padding: { x: 20, y: 10 } }).setOrigin(0.5).setAlpha(0).setInteractive(); this.restartButton.on('pointerdown', this.restartGame, this); this.lineClearSound = this.sound.add('lineClear'); this.backgroundMusic = this.sound.add('backgroundMusic', { loop: true }); this.stuckSound = this.sound.add('stuck'); this.blockMoveSound = this.sound.add('blockMove', { volume: 0.5 }); this.gameOverSound = this.sound.add('gameOver'); this.backgroundMusic.play(); this.drawGame(); } onTouchStart(pointer) { if (pointer.wasTouch) { this.touchStartX = pointer.x; this.touchStartY = pointer.y; this.isSwipingDown = false; } } onTouchMove(pointer) { if (pointer.wasTouch) { const diffY = pointer.y - this.touchStartY; if (diffY > 50 && !this.isSwipingDown) { this.isSwipingDown = true; this.startContinuousDownMove(); } } } onTouchEnd(pointer) { if (pointer.wasTouch) { const touchEndX = pointer.x; const touchEndY = pointer.y; const diffX = touchEndX - this.touchStartX; const diffY = touchEndY - this.touchStartY; const swipeThreshold = 50; this.stopContinuousDownMove(); if (Math.abs(diffX) < swipeThreshold && Math.abs(diffY) < swipeThreshold) { this.rotate(); } else if (Math.abs(diffX) > Math.abs(diffY)) { if (diffX > 0) { this.moveRight(); } else { this.moveLeft(); } } } } startContinuousDownMove() { if (this.continuousDownMoveEvent) { this.continuousDownMoveEvent.remove(false); } this.continuousDownMoveEvent = this.time.addEvent({ delay: 50, callback: this.continuousDownMove, callbackScope: this, loop: true }); } stopContinuousDownMove() { if (this.continuousDownMoveEvent) { this.continuousDownMoveEvent.remove(false); this.continuousDownMoveEvent = null; } this.isSwipingDown = false; } continuousDownMove() { if (this.isSwipingDown && !this.gameOver) { this.moveDown(); } } getTickDelay() { return Math.max(100, 1000 - (this.level - 1) * 100); } initGrid() { for (let y = 0; y < this.GRID_HEIGHT; y++) { this.grid[y] = []; for (let x = 0; x < this.GRID_WIDTH; x++) { this.grid[y][x] = null; } } } getRandomShape() { const randomIndex = Phaser.Math.Between(0, this.shapes.length - 1); return JSON.parse(JSON.stringify(this.shapes[randomIndex])); // Deep copy to prevent modifications } spawnShape() { this.currentShape = this.nextShape; this.nextShape = this.getRandomShape(); this.currentShapePosition = { x: Math.floor(this.GRID_WIDTH / 2) - Math.floor(this.currentShape.shape[0].length / 2), y: 0 }; if (!this.canMoveTo(this.currentShapePosition.x, this.currentShapePosition.y, this.currentShape.shape)) { this.gameOver = true; this.tickEvent.remove(); this.showGameOver(); } } tick() { if (this.gameOver) return; if (this.canMoveTo(this.currentShapePosition.x, this.currentShapePosition.y + 1, this.currentShape.shape)) { this.currentShapePosition.y++; } else { this.lockShapeWithFlicker(); } this.drawGame(); } moveLeft() { if (this.canMoveTo(this.currentShapePosition.x - 1, this.currentShapePosition.y, this.currentShape.shape)) { this.currentShapePosition.x--; this.blockMoveSound.play(); this.drawGame(); } } moveRight() { if (this.canMoveTo(this.currentShapePosition.x + 1, this.currentShapePosition.y, this.currentShape.shape)) { this.currentShapePosition.x++; this.blockMoveSound.play(); this.drawGame(); } } moveDown() { if (this.canMoveTo(this.currentShapePosition.x, this.currentShapePosition.y + 1, this.currentShape.shape)) { this.currentShapePosition.y++; this.blockMoveSound.play(); this.drawGame(); } } rotate() { const rotatedShape = this.currentShape.shape[0].map((val, index) => this.currentShape.shape.map(row => row[index]).reverse() ); if (this.canMoveTo(this.currentShapePosition.x, this.currentShapePosition.y, rotatedShape)) { this.currentShape.shape = rotatedShape; this.blockMoveSound.play(); this.drawGame(); } } canMoveTo(x, y, shape) { for (let row = 0; row < shape.length; row++) { for (let col = 0; col < shape[row].length; col++) { if (shape[row][col]) { const newX = x + col; const newY = y + row; if (newX < 0 || newX >= this.GRID_WIDTH || newY >= this.GRID_HEIGHT || (newY >= 0 && this.grid[newY][newX])) { return false; } } } } return true; } lockShapeWithFlicker() { this.stuckSound.play(); let shapePieces = []; for (let row = 0; row < this.currentShape.shape.length; row++) { for (let col = 0; col < this.currentShape.shape[row].length; col++) { if (this.currentShape.shape[row][col]) { const gridY = this.currentShapePosition.y + row; const gridX = this.currentShapePosition.x + col; if (gridY >= 0) { const x = (this.sys.game.config.width - this.GRID_WIDTH * this.GRID_SIZE) / 2 + gridX * this.GRID_SIZE; const y = this.PADDING + 30 + gridY * this.GRID_SIZE; const piece = this.add.image(x, y, 'square') .setOrigin(0, 0) .setDisplaySize(this.GRID_SIZE - 1, this.GRID_SIZE - 1) .setTint(0xFFFFFF); shapePieces.push({ piece: piece, originalColor: this.currentShape.color }); this.grid[gridY][gridX] = this.currentShape.color; } } } } this.time.delayedCall(500, () => { shapePieces.forEach(({ piece, originalColor }) => { piece.setTint(originalColor); }); this.clearLines(); this.spawnShape(); this.drawGame(); }); } clearLines() { this.flashingLines = []; for (let y = this.GRID_HEIGHT - 1; y >= 0; y--) { if (this.grid[y].every(cell => cell !== null)) { this.flashingLines.push(y); } } if (this.flashingLines.length > 0) { this.lineClearSound.play(); this.flashLines(); } else { this.updateScore(0); } } flashLines() { let flashCount = 0; const flashColors = [0xffffff, 0xffff00, 0xff00ff, 0x00ffff]; const flashInterval = this.time.addEvent({ delay: 100, callback: () => { this.flashingLines.forEach(y => { const flashColor = flashColors[flashCount % flashColors.length]; for (let x = 0; x < this.GRID_WIDTH; x++) { this.grid[y][x] = flashColor; } }); this.drawGame(); flashCount++; if (flashCount >= 4) { flashInterval.remove(); this.removeLines(); } }, callbackScope: this, loop: true }); } removeLines() { let linesCleared = this.flashingLines.length; let newGrid = []; for (let i = 0; i < linesCleared; i++) { newGrid.push(Array(this.GRID_WIDTH).fill(null)); } for (let y = 0; y < this.GRID_HEIGHT; y++) { if (!this.flashingLines.includes(y)) { newGrid.push(this.grid[y]); } } this.grid = newGrid; this.updateScore(linesCleared); this.flashingLines = []; this.drawGame(); } updateScore(linesCleared) { if (linesCleared > 0) { let points; switch (linesCleared) { case 1: points = 100; break; case 2: points = 300; break; case 3: points = 500; break; case 4: points = 800; break; default: points = 1000; } this.score += points * this.level; this.linesCleared += linesCleared; this.scoreText.setText('Score: ' + this.score); if (this.linesCleared >= this.level * 10) { this.level++; this.levelText.setText('Level: ' + this.level); this.tickEvent.remove(); this.tickEvent = this.time.addEvent({ delay: this.getTickDelay(), callback: this.tick, callbackScope: this, loop: true }); this.showLevelUpAnimation(); } } } showLevelUpAnimation() { this.levelUpText.setAlpha(1); this.tweens.add({ targets: this.levelUpText, alpha: 0, y: this.levelUpText.y - 100, duration: 2000, ease: 'Power2', onComplete: () => { this.levelUpText.y = this.sys.game.config.height / 2; } }); } showGameOver() { this.backgroundMusic.stop(); this.gameOverSound.play(); this.gameOverText.setAlpha(1); this.restartButton.setAlpha(1); } restartGame() { this.gameOver = false; this.score = 0; this.level = 1; this.linesCleared = 0; this.flashingLines = []; this.initGrid(); this.nextShape = this.getRandomShape(); this.spawnShape(); this.scoreText.setText('Score: 0'); this.levelText.setText('Level: 1'); this.gameOverText.setAlpha(0); this.restartButton.setAlpha(0); this.levelUpText.setAlpha(0); this.levelUpText.y = this.sys.game.config.height / 2; if (this.tickEvent) this.tickEvent.remove(); this.tickEvent = this.time.addEvent({ delay: this.getTickDelay(), callback: this.tick, callbackScope: this, loop: true }); this.backgroundMusic.play(); this.drawGame(); } drawGame() { this.children.removeAll(); const gridWidth = this.GRID_WIDTH * this.GRID_SIZE; const gridHeight = this.GRID_HEIGHT * this.GRID_SIZE; const gridX = (this.sys.game.config.width - gridWidth) / 2; const gridY = this.PADDING + 40; this.add.rectangle(gridX, gridY, gridWidth, gridHeight, 0x000000, 0.3); const textStyle = { fontSize: '20px', fontFamily: 'Arial', color: '#ffffff', stroke: '#000000', strokeThickness: 4 }; this.levelText = this.add.text(this.PADDING + 20, this.PADDING, 'Level: ' + this.level, textStyle); this.scoreText = this.add.text(this.sys.game.config.width - this.PADDING - 20, this.PADDING, 'Score: ' + this.score, textStyle) .setOrigin(1, 0); this.levelText.setAlpha(1); this.scoreText.setAlpha(1); for (let y = 0; y < this.GRID_HEIGHT; y++) { for (let x = 0; x < this.GRID_WIDTH; x++) { const cellColor = this.grid[y][x] || 0x555555; // Changed to a lighter color for empty cells this.add.image(gridX + x * this.GRID_SIZE, gridY + y * this.GRID_SIZE, 'square') .setOrigin(0, 0) .setDisplaySize(this.GRID_SIZE - 1, this.GRID_SIZE - 1) .setTint(cellColor) .setAlpha(this.grid[y][x] ? 1 : 0.5); // Reduced alpha for empty cells } } for (let row = 0; row < this.currentShape.shape.length; row++) { for (let col = 0; col < this.currentShape.shape[row].length; col++) { if (this.currentShape.shape[row][col]) { const x = gridX + (this.currentShapePosition.x + col) * this.GRID_SIZE; const y = gridY + (this.currentShapePosition.y + row) * this.GRID_SIZE; this.add.image(x, y, 'square') .setOrigin(0, 0) .setDisplaySize(this.GRID_SIZE - 1, this.GRID_SIZE - 1) .setTint(this.currentShape.color); } } } const nextShapeSize = this.GRID_SIZE * 0.8; const nextTextX = this.sys.game.config.width / 2 - 60; const nextTextY = this.sys.game.config.height - 60; this.add.text(nextTextX, nextTextY, 'Next', textStyle); const nextShapeStartX = nextTextX + 70; const nextShapeStartY = nextTextY - 5; for (let row = 0; row < this.nextShape.shape.length; row++) { for (let col = 0; col < this.nextShape.shape[row].length; col++) { if (this.nextShape.shape[row][col]) { const x = nextShapeStartX + col * nextShapeSize; const y = nextShapeStartY + row * nextShapeSize; this.add.image(x, y, 'square') .setOrigin(0, 0) .setDisplaySize(nextShapeSize - 1, nextShapeSize - 1) .setTint(this.nextShape.color); } } } this.add.existing(this.levelUpText); this.add.existing(this.gameOverText); this.add.existing(this.restartButton); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', pixelArt: false, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 360, height: 640 }, scene: Tetris }; window.phaserGame = new Phaser.Game(config);