// DESCRIPTION: // - has a timer // - enemies will spawn at random border and moves to player // - player gets score when enemy is killed // - player loses hp when enemy touches player // - game ends when player hp reaches 0 or timer reaches 0 // - game reset when game ends // - player can move with WASD // - player can attack with bullets on click where they point class Enemy { constructor(scene, x, y) { this.scene = scene; this.size = 32; this.speed = 100; this.hp = 1; this.sprite = this.scene.physics.add.sprite(x, y, 'enemy').setDisplaySize(this.size, this.size); this.isDead = false; } setDirection(x, y) { // ie. player sprite's x and y const distanceX = x - this.sprite.x; const distanceY = y - this.sprite.y; const angle = Math.atan2(distanceY, distanceX); const directionX = Math.cos(angle); const directionY = Math.sin(angle); this.sprite.setVelocity(directionX * this.speed, directionY * this.speed); this.pathDuration = 2000; } } class Player { constructor(scene, x, y) { this.scene = scene; this.size = 32; this.speed = 200; this.sprite = this.scene.physics.add.sprite(x, y, 'player').setDisplaySize(this.size, this.size); this.keys = this.scene.input.keyboard.addKeys('W,A,S,D'); this.hp = 1; this.pathPositions = []; this.pathSprites = []; this.pathDuration = 2000; this.previousVelocity = { x: 0, y: 0 }; this.hasMoved = false; // add a simple time vevent to check the first and last time of the path this.scene.time.addEvent({ delay: 1000, callback: () => { if (this.pathPositions.length > 0) { const first = this.pathPositions[0]; const last = this.pathPositions[this.pathPositions.length - 1]; } }, loop: true }); } isPlayerOutOfBounds() { const bounds = this.scene.sys.game.config; const player = this.sprite; return ( player.x < 0 || player.x > bounds.width || player.y < 0 || player.y > bounds.height ); } move() { // Reset velocity if a key is pressed if (this.keys.W.isDown || this.keys.S.isDown || this.keys.A.isDown || this.keys.D.isDown) { this.sprite.setVelocity(0, 0); if(!this.hasMoved){ this.hasMoved = true; } } else if(!this.hasMoved){ // Player must press a key if we are going to track path return; } // Apply velocity based on key press if (this.keys.W.isDown) { this.sprite.setVelocityY(-this.speed); this.previousVelocity.y = -this.speed; // Update previous velocity } else if (this.keys.S.isDown) { this.sprite.setVelocityY(this.speed); this.previousVelocity.y = this.speed; // Update previous velocity } if (this.keys.A.isDown) { this.sprite.setVelocityX(-this.speed); this.previousVelocity.x = -this.speed; // Update previous velocity } else if (this.keys.D.isDown) { this.sprite.setVelocityX(this.speed); this.previousVelocity.x = this.speed; // Update previous velocity } if ((this.keys.W.isDown || this.keys.S.isDown) && !this.keys.A.isDown && !this.keys.D.isDown) { this.previousVelocity.x = 0; } if ((this.keys.A.isDown || this.keys.D.isDown) && !this.keys.W.isDown && !this.keys.S.isDown) { this.previousVelocity.y = 0; } // More conditions. We must allow the player to have at least one previous velocity,without it, the player will stop moving. // But, we must must also understand that the player may be moving in one direction (not a diagonal) to maintain previous velocity // If no keys are pressed, maintain previous velocity if (!this.keys.W.isDown && !this.keys.S.isDown && !this.keys.A.isDown && !this.keys.D.isDown) { this.sprite.setVelocity(this.previousVelocity.x, this.previousVelocity.y); } this.trackPlayerPath(); } // Backshot will attack in the opposite direction of the player movement. // Calculate the angle between the player sprite and a point behind them, and set the bullet's direction to that angle. attack() { // ie. the coordinates of pointer //Player must be moving to attack if (this.sprite.body.velocity.x === 0 && this.sprite.body.velocity.y === 0) { return; } const bullet = new Bullet(this.scene, this.sprite.x, this.sprite.y); const playerVelocityX = this.sprite.body.velocity.x; const playerVelocityY = this.sprite.body.velocity.y; const behindX = -playerVelocityX * this.speed + this.sprite.x; const behindY = -playerVelocityY * this.speed + this.sprite.y; const distanceX = behindX - this.sprite.x; const distanceY = behindY - this.sprite.y; const angle = Math.atan2(distanceY, distanceX); const directionX = Math.cos(angle); const directionY = Math.sin(angle); bullet.setDirection(directionX, directionY); // add a collision with all enemies const enemies = this.scene.enemies; enemies.forEach(enemy => { this.scene.physics.add.collider(bullet.sprite, enemy.sprite, this.scene.handleBulletEnemyOverlap, null, this.scene); }) this.scene.bullets.push(bullet); } trackPlayerPath() { const currentTime = Date.now(); const playerPosition = { x: this.sprite.x, y: this.sprite.y, time: currentTime }; this.pathPositions.push(playerPosition); this.createPathSprite(playerPosition); this.cleanupPlayerPathPositions(); this.cleanupPlayerPathSprites(); } cleanupPlayerPathPositions() { const currentTime = Date.now(); const withinPathTime = currentTime - this.pathDuration; this.pathPositions = this.pathPositions.filter(position => position.time >= withinPathTime); } cleanupPlayerPathSprites() { const currentTime = Date.now(); const withinPathTime = currentTime - this.pathDuration; const pathSprites = this.pathSprites; pathSprites.forEach(sprite => { if (sprite.time < withinPathTime) { sprite.sprite.destroy(); this.pathSprites = this.pathSprites.filter(s => s !== sprite); } }); }; createPathSprite(playerPosition) { const pathSprite = this.scene.physics.add.sprite(playerPosition.x, playerPosition.y, 'path').setDisplaySize(this.size, this.size); pathSprite.setDepth(this.sprite.depth - 1); this.pathSprites.push({ sprite: pathSprite, time: playerPosition.time }); } } class Bullet { constructor(scene, x, y) { this.scene = scene; this.x = x; this.y = y; this.speed = 300; this.size = 16; this.sprite = this.scene.physics.add.sprite(this.x, this.y, 'bullet').setDisplaySize(this.size, this.size); this.isDone = false; } setDirection(x, y) { this.sprite.setVelocity(x * this.speed, y * this.speed); } } class Example extends Phaser.Scene { constructor() { super(); } preload() { this.load.image('bullet', `https://play.rosebud.ai/assets/red_tile_32.png?HZ0F`); this.load.image('enemy', `https://play.rosebud.ai/assets/gold_tile_32.png?3ihp`); this.load.image('player', `https://play.rosebud.ai/assets/placeholder_wave_32x32.png?49NH`); this.load.image('path', 'https://play.rosebud.ai/assets/big_purple_square.jpg?Fbdf') // audio; killSound: https://play.rosebud.ai/assets/zap.mp3?rbbU // audio; gameOverSound: https://play.rosebud.ai/assets/game_over.wav?OQCm this.load.audio('killSound', `https://play.rosebud.ai/assets/zap.mp3?rbbU`); this.load.audio('youDiedSound', `https://play.rosebud.ai/assets/game_over.wav?OQCm`); this.load.audio('gameOverSound', `https://play.rosebud.ai/assets/score.wav?FFy9`) } create() { console.log('Game Started'); this.highScore = 0; this.gameOverScreen = this.createGameOverScreen(); // is hidden by default this.startGame(); } startGame() { this.centerX = this.sys.game.config.width / 2; this.centerY = this.sys.game.config.height / 2; this.gameOver = false; this.spawnIntervals = { 30: 1800, 20: 1600, 15: 1400, 10: 1200, 5: 800, } this.countdownFrom = 30; this.pendingRestart = false; this.score = 0; this.enemies = []; this.bullets = []; this.player = new Player(this, this.centerX, this.centerY); this.pendingRestart = false; this.addMoveCheckEvent(); this.addTimer(); this.addSpawnEvent(); this.addText(); this.gameOverSound = this.sound.add('gameOverSound'); this.gameOverSound.setVolume(0.9); this.killSound = this.sound.add('killSound'); this.killSound.setVolume(0.2); this.youDiedSound = this.sound.add('youDiedSound'); this.youDiedSound.setVolume(0.6); // Add input for player attack this.input.on('pointerdown', (pointer) => { this.player.attack(); }); } resetGame() { // Remove events this.spawnTimer.remove(); this.timer.remove(); this.moveCheckEvent.remove(); // Turn off input this.input.off('pointerdown'); // Destroy sprites this.player.sprite.destroy(); this.player.pathSprites.forEach(sprite => sprite.sprite.destroy()); this.enemies.forEach(enemy => enemy.sprite.destroy()); this.bullets.forEach(bullet => bullet.sprite.destroy()); this.scoreText.destroy(); this.timerText.destroy(); // Destroy physics colliders and overlaps this.physics.world.removeCollider(this.player.sprite.body); this.physics.world.removeCollider(this.bullets); this.physics.world.removeCollider(this.enemies); this.physics.world.removeCollider(this.player.pathSprites); this.sound.stopAll(); // use the countdown and player hp to determine if the player won or lost if (this.score === this.highScore && this.score > 0){ this.gameOverSound.play(); } else if (this.countdownFrom > 0 || this.player.hp <= 0) { this.youDiedSound.play(); } else { this.gameOverSound.play(); } } addMoveCheckEvent() { this.moveCheckEvent = this.time.addEvent({ delay: 50, callback: () => { if (!this.gameOver){ this.player.move(); this.checkPlayerPathOverlap(); if (this.player.isPlayerOutOfBounds()) { this.gameOver = true; } } }, callbackScope: this, loop: true }); } update() { if (!this.gameOver) { this.moveEnemies(); this.cleanupBullets(); this.cleanupEnemies(); this.checkGameOver(); this.updateText(); } else if (this.gameOver && !this.pendingRestart){ console.log('Game Over'); this.pendingRestart = true; this.highScore = this.score ? Math.max(this.score, this.highScore) : this.highScore; // Update high score this.updateGameOverScreenText(this.score, this.highScore) this.showGameOverScreen(true); // Show the game over screen. Can restart after couple seconds this.resetGame(); } } // START UI addText() { const offsetY = 32; const offsetX = 16; const style = { fontSize: '48px', fill: '#ffffff' }; this.timerText = this.add.text(offsetX, offsetY, 'Timer will update', style); this.scoreText = this.add.text(offsetX, offsetY * 3, 'Score will update', style); } updateText() { this.scoreText.setText(`${this.score}`); this.timerText.setText(`${this.countdownFrom}`); } // END UI addTimer() { this.timer = this.time.addEvent({ delay: 1000, callback: this.updateTimer, callbackScope: this, loop: true }); } updateTimer() { if (this.countdownFrom > 0) { this.countdownFrom--; // if there is a key in intervals with this countdown, update the spawn event if (this.spawnIntervals[this.countdownFrom]) { console.log('Spawn Interval Updated:', this.spawnIntervals[this.countdownFrom]); this.addSpawnEvent(); } } } increaseScore() { this.score++; console.log('Score:', this.score); } checkGameOver(){ if (this.player.hp <= 0 || this.countdownFrom <= 0) { this.gameOver = true; } } moveEnemies(){ this.enemies.forEach(enemy => { enemy.setDirection(this.player.sprite.x, this.player.sprite.y); }); } // Touching enemy hurts player handlePlayerEnemyCollision(playerSprite, enemySprite) { const player = this.player; const enemy = this.enemies.find(enemy => enemy.sprite === enemySprite); if (!player.isDead && !enemy.isDead) { player.hp -= 1; if (player.hp <= 0) { player.isDead = true; } } } checkPlayerPathOverlap() { const currentTime = Date.now(); const withinPathGracePeriod = currentTime - 400; this.player.pathSprites.forEach(pathSprite => { if (pathSprite.time < withinPathGracePeriod) { const isPlayerWithinPath = this.isPlayerWithinPath(this.player.sprite, pathSprite.sprite); if (isPlayerWithinPath) { this.gameOver = true; } } }); } isPlayerWithinPath(playerSprite, pathSprite) { const playerX = playerSprite.x; const playerY = playerSprite.y; const pathX = pathSprite.x; const pathY = pathSprite.y; const pathWidth = pathSprite.displayWidth; const pathHeight = pathSprite.displayHeight; // calculate the bounds by path x - path width / 2 const pathBounds = { x: pathX - pathWidth / 2, y: pathY - pathHeight / 2, width: pathWidth, height: pathHeight }; // console.log('Player Position:', playerX, playerY); // console.log('Path Bounds:', pathBounds); return playerX >= pathBounds.x && playerX <= pathBounds.x + pathBounds.width && playerY >= pathBounds.y && playerY <= pathBounds.y + pathBounds.height; } // Bullet touching enemy hurts enemy handleBulletEnemyOverlap(bulletSprite, enemySprite) { const bullet = this.bullets.find(bullet => bullet.sprite === bulletSprite); const enemy = this.enemies.find(enemy => enemy.sprite === enemySprite); enemy.hp -= 1; if (enemy.hp <= 0) { enemy.isDead = true; this.increaseScore(); // increase score when enemy is killed this.killSound.play(); } bullet.isDone = true; } cleanupBullets() { this.bullets.forEach(bullet => { if (bullet.sprite.x < 0 || bullet.sprite.x > this.sys.game.config.width || bullet.sprite.y < 0 || bullet.sprite.y > this.sys.game.config.height) { bullet.isDone = true; } // Bullet removed on contact w enemy or when it goes out of bounds if (bullet.isDone) { bullet.sprite.destroy(); this.physics.world.removeCollider(bullet.collider); this.bullets = this.bullets.filter(b => b !== bullet); } }); } cleanupEnemies() { this.enemies.forEach(enemy => { if (enemy.isDead) { enemy.sprite.destroy(); this.enemies = this.enemies.filter(e => e !== enemy); } }); } spawnEnemy() { const borders = ['top', 'bottom', 'left', 'right']; const randomBorder = borders[Math.floor(Math.random() * borders.length)]; let x, y; switch (randomBorder) { case 'top': x = Math.random() * this.sys.game.config.width; y = 0; break; case 'bottom': x = Math.random() * this.sys.game.config.width; y = this.sys.game.config.height; break; case 'left': x = 0; y = Math.random() * this.sys.game.config.height; break; case 'right': x = this.sys.game.config.width; y = Math.random() * this.sys.game.config.height; break; } const enemy = new Enemy(this, x, y); this.physics.add.collider(this.player.sprite, enemy.sprite, this.handlePlayerEnemyCollision, null, this); this.enemies.push(enemy); } addSpawnEvent() { // if spawn timer, re if (this.spawnTimer) { this.spawnTimer.remove(); } this.spawnTimer = this.time.addEvent({ delay: this.spawnIntervals[this.countdownFrom] || this.spawnIntervals[30], callback: this.spawnEnemy, callbackScope: this, loop: true }); } createGameOverScreen() { const container = document.getElementById('renderDiv'); const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'absolute'; gameOverScreen.style.top = '0'; gameOverScreen.style.left = '0'; gameOverScreen.style.width = '100%'; gameOverScreen.style.height = '100%'; gameOverScreen.style.backgroundColor = 'black'; gameOverScreen.style.color = 'white'; gameOverScreen.style.display = 'none'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.fontSize = '48px'; gameOverScreen.style.zIndex = '1000'; const column = document.createElement('div'); column.style.display = 'flex'; column.style.flexDirection = 'column'; column.style.alignItems = 'center'; const previousScoreText = document.createElement('div'); previousScoreText.textContent = 'Previous Score: '; previousScoreText.style.marginBottom = '16px'; previousScoreText.id = 'previous-score'; const highScoreText = document.createElement('div'); highScoreText.textContent = 'High Score: '; highScoreText.style.marginBottom = '16px'; highScoreText.id = 'high-score'; const playAgainText = document.createElement('div'); playAgainText.textContent = 'Press Any Key To Start'; playAgainText.style.marginBottom = '16px'; playAgainText.id = 'play-again'; column.appendChild(previousScoreText); column.appendChild(highScoreText); column.appendChild(playAgainText); gameOverScreen.appendChild(column); container.appendChild(gameOverScreen); return gameOverScreen; } updateGameOverScreenText(score, highScore) { console.log('Score:', score, 'High Score:', highScore); const previousScoreText = document.getElementById('previous-score'); const highScoreText = document.getElementById('high-score'); previousScoreText.textContent = `Previous Score: ${score}`; highScoreText.textContent = `High Score: ${highScore}`; console.log('Previous Score Text:', previousScoreText.textContent, 'High Score Text:', highScoreText.textContent) } createRestartEventListener() { return window.addEventListener('keydown', () => { if (!this.pendingRestart) return; console.log('Game Restarted'); this.showGameOverScreen(false); this.startGame(); }); } showGameOverScreen(bool) { if (bool) { this.gameOverScreen.style.display = 'flex'; const playAgainText = document.querySelector('#play-again'); const previousScoreText = document.querySelector('#previous-score'); const highScoreText = document.querySelector('#high-score'); // hide the play again, show the previous score and high score playAgainText.style.display = 'none'; previousScoreText.style.display = 'block'; highScoreText.style.display = 'block'; this.delayIsActive = true; this.time.delayedCall(2500, () => { this.delayIsActive = false; playAgainText.style.display = 'block'; previousScoreText.style.display = 'none'; highScoreText.style.display = 'none'; this.restartEventListener = window.addEventListener('keydown', () => { if (!this.pendingRestart) return; if(this.delayIsActive) return; console.log('Game Restarted'); this.showGameOverScreen(false); this.startGame(); }); }, null, this); } else { this.gameOverScreen.style.display = 'none'; window.removeEventListener('keydown', this.restartEventListener); } } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }, scene: Example }; window.phaserGame = new Phaser.Game(config);