class Consts { static Grid = { Width: 40, Height: 40, Probability: 0.45, BirthLimit: 4, DeathLimit: 3, Iterations: 60 } static SecondsPerMap = 30; static MaxHorizontalSpeed = 500; static MaxVerticalSpeed = 500; static ClimbSpeed = 1; static Acceleration = 1500; // pixels/second/second static HookDrag = 5200; static HookAcceleration = 750; static HookSpeedMax = 300; static Drag = 600; // pixels/second static Gravity = 2600; // pixels/second/second static JumpSpeed = -500; // pixels/second (negative y is up) static ZoomLevels = [1, 3]; } class HudScene extends Phaser.Scene { constructor () { super({ key: 'Hud', active: true }); } preload () { // preload any assets for the HUD here } create () { // create the text object this.hudText = this.add.text(0, 0, '', { fill: '#000000', backgroundColor: '#FFFF00', fontSize: '32px', fontFamily: 'monospace', }); // position the text object at the bottom right of the game viewport this.hudText.setOrigin(1, 1); this.hudText.setPosition(this.scale.width, this.scale.height); } update () { // update the HUD here } setTimeRemaining(timeRemaining) { const seconds = Math.round(timeRemaining/1000); this.hudText.setText(`${seconds}`); } hideTimer() { this.hudText.visible = false; } } class GameScene extends Phaser.Scene { constructor () { super({ key: 'Example' }); this.Cells = { Empty:0, Solid:1, Safe:2, Coin:3, Crystal:4, Colorbox:5, } } preload () { this.load.image('brick', `https://play.rosebud.ai/assets/solid brick color.png?ydDU`); this.load.image('brightMan', 'https://storage.googleapis.com/rosebud_assets_storage/99b0b4aa-c50b-4dc9-9440-b6aea108c4ea.png'); this.load.image('coin', 'https://storage.googleapis.com/rosebud_assets_storage/8957f146-6f2a-4ca0-9eae-d2866c5b82b4.png'); this.load.image('greenJunk', `https://play.rosebud.ai/assets/small piece of green junk.png?ZtGI`); this.load.image('colorfulJunk', `https://play.rosebud.ai/assets/a small piece of colorful junk.png?yL8N`); } create () { this.gameOver = false; this.player = this.createPlayer(); this.setPlayerMovementMode(this.player); this.player.drawDebug = true; const {x,y} = this.getCellCoordinates(20, 20); this.player.setPosition(x,y); this.statistics = this.newStatistics(); this.hook = this.createHook(); this.cursors = this.input.keyboard.createCursorKeys(); this.restartKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.R); this.forceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); this.zoomKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); this.hookKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S); this.quickenKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q); this.zoomLevelIndex = 0; this.cameraFollow(this.player, Consts.ZoomLevels[this.zoomLevelIndex]); const map = this.newMap(); this.activateMap(map); this.startTimer(); } newStatistics() { return { warps: 0, coins: 0, crystals: 0, colorboxes: 0, } } createHook() { return { deployed:false, rope: undefined, anchor: undefined, source: undefined, vector: new Phaser.Math.Vector2(), previousPlayerPosition: new Phaser.Geom.Point(), } } fireHook() { if (!this.hook.deployed) { this.hook.deployed = true; const {anchor, sprite} = this.getHookAnchor(); this.hook.anchorSprite = sprite; this.hook.vector.setTo(anchor.x - this.player.x, anchor.y - this.player.y); this.hook.vector.normalize(); this.hook.anchorPoint = anchor; this.hook.rope = this.add.line(0,0,this.player.x, this.player.y,anchor.x, anchor.y, 0x6666ff); this.hook.rope.setOrigin(0,0); this.setPlayerHookMode(this.player); } } releaseHook() { if (this.hook.deployed) { this.hook.deployed = false; this.hook.rope.destroy(); this.hook.anchorSprite.clearTint(); this.setPlayerMovementMode(this.player); } } updateHook() { if (this.hook.deployed) { this.hook.rope.setTo(this.player.x, this.player.y, this.hook.anchorPoint.x, this.hook.anchorPoint.y); } } workHook(direction) { this.player.setAccelerationY(direction*Consts.HookAcceleration); } getHookAnchor() { let ray = new Phaser.Geom.Line(this.player.x, this.player.y, this.player.x, 0); let closestIntersection = null; let closestDistance = Infinity; let closestSprite = null; this.map.solids.group.getChildren().forEach((sprite) => { let bounds = sprite.getBounds(); let intersection = Phaser.Geom.Intersects.GetLineToRectangle(ray, bounds); intersection.forEach( (point) => { let distance = Phaser.Math.Distance.Between(this.player.x, this.player.y, point.x, point.y); if (distance < closestDistance) { closestDistance = distance; closestIntersection = point; closestSprite = sprite; } }) }); return {anchor: closestIntersection, sprite: closestSprite}; } newGrid() { let grid = this.newEmptyGrid(Consts.Grid.Width, Consts.Grid.Height); this.seedGrid(grid, Consts.Grid.Probability); for(let i = 0; i < Consts.Grid.Iterations; i++) { grid = this.evolveGrid(grid, Consts.Grid.BirthLimit, Consts.Grid.DeathLimit); } this.createBorders(grid); this.convertCellsToObjects(grid); this.createZone(grid, 20,20, this.Cells.Empty); return grid; } convertCellsToObjects(grid) { for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { grid[i][j] = { type: grid[i][j], room: undefined } } } } labelRooms(grid) { const isValidSquare = (x, y) => { return x >= 0 && x < grid.length && y >= 0 && y < grid[0].length && grid[x][y].type === this.Cells.Empty && grid[x][y].room === undefined; } const rooms = new Map(); const incrementRoomSize = (id) => { if (rooms.has(id)) { rooms.set(id, rooms.get(id)+1); } else { rooms.set(id, 1); } } const fill = (x, y, id) => { if (isValidSquare(x, y, id)) { grid[x][y].room = id incrementRoomSize(id); fill(x + 1, y, id); fill(x - 1, y, id); fill(x, y + 1, id); fill(x, y - 1, id); } } let roomId = 0; for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { fill(i,j, roomId++) } } return rooms; } iterateUntilGood() { var maxPasses = 100; while(maxPasses-- > 0) { const grid = this.newGrid(); const rooms = this.labelRooms(grid); const safeZoneRoom = grid[20][20].room; const safeZoneRoomSize = rooms.get(safeZoneRoom); if (safeZoneRoomSize > 3*3) { return {grid, rooms}; } } throw new Error("Failed to compute a good map"); } newMap() { const {grid, rooms} = this.iterateUntilGood(); this.createZone(grid, 20, 20, this.Cells.Safe); this.scatterLoot(grid); const safeZone = this.addSafeZone(grid); const solids = this.addSolids(grid); const coins = this.addLoot(grid); return {grid, solids, coins, safeZone} } scatterLoot(grid) { let emptyCells = []; // Find all empty cells for (let i = 0; i < grid.length; i++){ for(let j = 0; j < grid[i].length; j++){ if (grid[i][j].type === this.Cells.Empty) emptyCells.push({ i, j }); } } // Randomly choose a cell for Colorbox let colorboxCell = Phaser.Utils.Array.RemoveRandomElement(emptyCells); grid[colorboxCell.i][colorboxCell.j].type = this.Cells.Colorbox; // Randomly choose 10 cells for Crystal for (let n = 0; n < 10; n++) { let crystalCell = Phaser.Utils.Array.RemoveRandomElement(emptyCells); grid[crystalCell.i][crystalCell.j].type = this.Cells.Crystal; } // Randomly choose about 50% of the remaining for Coin emptyCells.forEach(cell => { if (Math.random() < 0.5) grid[cell.i][cell.j].type = this.Cells.Coin; }); } warp() { this.statistics.warps++; this.releaseHook(); this.player.clearTint(); this.switchMaps(this.map, this.newMap()); this.warpBuffer = 30; this.startTimer(); } destroyMap(map) { map.solids.group.clear(true,true); map.coins.group.clear(true,true); map.safeZone.group.clear(true,true); this.physics.world.removeCollider(this.solidsCollider); this.physics.world.removeCollider(this.lootCollider); } activateMap(map) { this.solidsCollider = this.physics.add.collider(this.player, map.solids.group); this.lootCollider = this.physics.add.overlap(this.player, map.coins.group, null, this.onLootOverlap, this); this.map = map; } switchMaps(oldMap, newMap) { this.destroyMap(oldMap); this.activateMap(newMap); } addSolids(grid) { let {cellSize, startX, startY} = this.getGridMeasurements(); let map = this.newEmptyGrid(grid.length, grid[0].length); let group = this.add.group(); for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { if (grid[i][j].type === this.Cells.Solid) { let sprite = this.physics.add.sprite(startX + i * cellSize, startY + j * cellSize, 'brick'); sprite.setDisplaySize(cellSize, cellSize); sprite.setOrigin(0.5, 0.5); sprite.setImmovable(true); sprite.body.allowGravity = false; group.add(sprite); map[i][j] = sprite; } } } return {grid:map, group}; } addLoot(grid) { let {cellSize, startX, startY} = this.getGridMeasurements(); let map = this.newEmptyGrid(grid.length, grid[0].length); let group = this.add.group(); for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { if (grid[i][j].type === this.Cells.Coin) { let sprite = this.physics.add.sprite(startX + i * cellSize, startY + j * cellSize, 'coin'); sprite.setData("type",this.Cells.Coin) sprite.setDisplaySize(cellSize, cellSize); sprite.body.setSize(sprite.width * 0.25, sprite.height * 0.25); sprite.setOrigin(0.5, 0.5); sprite.setImmovable(true); sprite.alpha = 0.7; sprite.body.allowGravity = false; group.add(sprite); map[i][j] = sprite; } if (grid[i][j].type === this.Cells.Crystal) { let sprite = this.physics.add.sprite(startX + i * cellSize, startY + j * cellSize, 'greenJunk'); sprite.setData("type",this.Cells.Crystal) sprite.setDisplaySize(cellSize*1.5, cellSize*1.5); sprite.body.setSize(sprite.width * 0.25, sprite.height * 0.25); sprite.setOrigin(0.5, 0.5); sprite.setImmovable(true); sprite.body.allowGravity = false; group.add(sprite); map[i][j] = sprite; } if (grid[i][j].type === this.Cells.Colorbox) { let sprite = this.physics.add.sprite(startX + i * cellSize, startY + j * cellSize, 'colorfulJunk'); sprite.setData("type",this.Cells.Colorbox) sprite.setDisplaySize(cellSize*1.1, cellSize*1.1); sprite.body.setSize(sprite.width * 0.25, sprite.height * 0.25); sprite.setOrigin(0.5, 0.5); sprite.setImmovable(true); sprite.body.allowGravity = false; group.add(sprite); map[i][j] = sprite; } } } return {grid:map, group}; } addSafeZone(grid) { let {cellSize, startX, startY} = this.getGridMeasurements(); let map = this.newEmptyGrid(grid.length, grid[0].length); let group = this.add.group(); for (let i = 0; i < grid.length; i++) { for (let j = 0; j < grid[i].length; j++) { if (grid[i][j].type === this.Cells.Safe) { let rect = this.add.rectangle(startX + i * cellSize - cellSize/2, startY + j * cellSize - cellSize/2, cellSize, cellSize, 0x00ff00,0.25); rect.setOrigin(0, 0); group.add(rect); map[i][j] = rect; } } } return {grid:map, group}; } getCellCoordinates(x, y) { let {cellSize, startX, startY} = this.getGridMeasurements(); let centerX = startX + (x * cellSize); let centerY = startY + (y * cellSize); return {x: centerX, y: centerY}; } getGridMeasurements() { let size = Math.min(this.sys.game.config.width, this.sys.game.config.height); let cellSize = size / Math.max(Consts.Grid.Width, Consts.Grid.Height); let mapWidth = cellSize * Consts.Grid.Width; let mapHeight = cellSize * Consts.Grid.Height; let startX = (this.sys.game.config.width - mapWidth) / 2 + cellSize/2; let startY = (this.sys.game.config.height - mapHeight) / 2 + cellSize/2; return {cellSize, startX, startY, mapWidth, mapHeight} } createZone(map, x, y, type) { map[x][y].type = type; for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { let nx = x + i; let ny = y + j; if (nx >= 0 && ny >= 0 && nx < map.length && ny < map[0].length) { map[nx][ny].type = type; } } } return map; } createBorders(grid) { for (let x = 0; x < grid.length; x++) { for (let y = 0; y < grid[x].length; y++) { // If the cell is on the perimeter of the grid if (x === 0 || y === 0 || x === grid.length - 1 || y === grid[x].length - 1) { grid[x][y] = this.Cells.Solid; } } } return grid; } cameraFollow(target, zoomLevel) { if (zoomLevel === 1) { this.cameras.main.zoomTo(zoomLevel, 350); // zoom in to the player this.cameras.main.setDeadzone(); const target = this.cameras.main.getScroll(800,600); this.cameras.main.pan(target.x, target.y, 350); this.cameras.main.stopFollow(); } else { this.cameras.main.once('camerazoomcomplete', () => { this.cameras.main.startFollow(target); }) this.cameras.main.pan(target.x, target.y, 350); this.cameras.main.zoomTo(zoomLevel, 350); // zoom in to the player this.cameras.main.setDeadzone(100,100); } } onLootOverlap(player, loot) { const lootType = loot.getData("type"); if (lootType === this.Cells.Coin) { this.statistics.coins++; } else if (lootType === this.Cells.Crystal) { this.statistics.crystals++; } else if (lootType === this.Cells.Colorbox) { this.statistics.colorboxes++; } loot.destroy(); // remove the coin sprite return false; } processMovementInputs() { if (this.cursors.left.isDown) { this.player.setAccelerationX(-Consts.Acceleration); } else if (this.cursors.right.isDown) { this.player.setAccelerationX(Consts.Acceleration); } else { this.player.setAccelerationX(0); } if (this.cursors.up.isDown) { if (this.player.body.touching.down) { this.player.body.velocity.y = Consts.JumpSpeed; } } } processHookInputs() { if (this.cursors.up.isDown) { this.workHook(-1); } else if (this.cursors.down.isDown) { this.workHook(1); } else { this.workHook(0); } } update(time, delta) { const quickenFactor = this.quickenKey.isDown ? 10 : 1; this.updateTimer(delta*quickenFactor); // Check if 'R' key is pressed, and if so, restart the scene if (Phaser.Input.Keyboard.JustDown(this.restartKey)) { this.scene.restart(); } if (this.gameOver) { return; } this.warpBuffer--; if (this.warpBuffer > 0 && this.player.body.embedded) { this.onPlayerEmbedded(); return; } if (this.hook.deployed) { this.processHookInputs(); this.updateHook(); } else { this.processMovementInputs(); } if (Phaser.Input.Keyboard.JustDown(this.forceKey)) { //this.warp(); } if (Phaser.Input.Keyboard.JustDown(this.zoomKey)) { this.zoomLevelIndex++; const zoomLevel = Consts.ZoomLevels[this.zoomLevelIndex % Consts.ZoomLevels.length]; this.cameraFollow(this.player, zoomLevel) } if (Phaser.Input.Keyboard.JustDown(this.hookKey)) { this.fireHook(); } if (this.hookKey.isUp) { this.releaseHook(); } } createPlayer() { let player = this.physics.add.sprite(400,400, 'brightMan'); player.setDepth(1000); let {cellSize} = this.getGridMeasurements(); player.setDisplaySize(cellSize*2, cellSize*2); player.body.setSize(player.width * 0.25, player.height * 0.45); return player; } setPlayerMovementMode(player) { player.body.reset(player.x, player.y); player.body.maxVelocity.setTo(Consts.MaxHorizontalSpeed, Consts.MaxVerticalSpeed); player.body.drag.setTo(Consts.Drag, 0); // x, y player.body.allowGravity = true; } setPlayerHookMode(player) { player.body.reset(player.x, player.y); player.body.maxVelocity.setTo(0, Consts.HookSpeedMax); player.body.drag.setTo(0, Consts.HookDrag); // x, y player.body.allowGravity = false; } setPlayerDeadMode(player) { player.body.reset(player.x, player.y); player.body.allowGravity = false; } onPlayerEmbedded() { console.log("Ending game"); this.setPlayerDeadMode(this.player); this.gameOver = true; this.stopTimer(); this.cameraFollow(this.player, Consts.ZoomLevels[0]) const showStatistics = () => { const date = new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) const x = Math.round(this.scale.width / 3 + 50); const y = Math.round(this.scale.height / 2 - 200); this.add.text(x, y, 'Name: Brightman', { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x, y + 25, `Died: ${date}`, { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x, y + 50, 'Cause of death: Sudden mineral intrusion', { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x, y + 75, 'Statistics:', { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x + 50, y + 100, `Warps: ${this.statistics.warps}`, { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x + 50, y + 125, `Coins: ${this.statistics.coins}`, { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x + 50, y + 150, `Crystals: ${this.statistics.crystals}`, { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); this.add.text(x + 50, y + 175, `Colorboxes: ${this.statistics.colorboxes}`, { align: 'left', fontFamily: 'Monospace' }).setOrigin(0); const playAgain = this.add.text(x, y + 210, `PRESS R TO PLAY AGAIN`, { align: 'left', fontFamily: 'Serif' }).setOrigin(0); this.tweens.add({ targets: playAgain, duration: 500, ease: 'Quad.easeInOut', repeat: -1, yoyo: true, alpha: { getStart: () => 1, getEnd: () => 0.5, }, }); } const removePlayerTint = () => { this.tweens.add({ targets: this.player, alpha: 0.75, ease: 'Quad', duration: 500, onComplete: () => { this.player.clearTint(); this.player.alpha = 1; showStatistics(); } }); } const transitionPlayer = () => { this.player.body.allowGravity = false; this.tweens.add({ targets: this.player, x: this.scale.width * 0.20, y: this.scale.height * 0.5, scaleX: 2, scaleY: 2, duration: 1000, onComplete: removePlayerTint }); } const transitionMap = () => { let completedTweens = 0; let totalBricks = this.map.solids.group.getChildren().length; this.map.safeZone.group.clear(true, true); this.map.solids.group.getChildren().forEach((brick) => { this.tweens.add({ targets: brick, alpha: 0, scale: 0, duration: 1000, onComplete: () => { completedTweens++; if (completedTweens === totalBricks) { this.destroyMap(this.map); transitionPlayer(); } } }); }); } this.player.setTint(0xff0000); // red tint this.tweens.add({ targets: this.player, scaleX: 0.20, scaleY: 0.20, duration: 250, yoyo: true, repeat: 5, onComplete: transitionMap }); }r newEmptyGrid(width, height) { let array = new Array(width); for (let i = 0; i < width; i++) { array[i] = new Array(height); } return array; } seedGrid(grid, percentage){ for (let i = 0; i < grid.length; i++){ for(let j = 0; j < grid[i].length; j++){ grid[i][j] = Math.random() < percentage ? this.Cells.Solid : this.Cells.Empty; } } return grid; } countMooreNeighborhood(grid, x, y) { let count = 0; for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { let nx = x + i; let ny = y + j; if (i === 0 && j === 0) { // Skip the current cell } else if (nx < 0 || ny < 0 || nx >= grid.length || ny >= grid[0].length) { // Count out of bounds as true count++; } else if (grid[nx][ny] === this.Cells.Solid) { // This cell is true count++; } } } return count; } evolveGrid(grid, birthLimit, deathLimit) { let newGrid = this.newEmptyGrid(grid.length, grid[0].length); for (let x = 0; x < grid.length; x++) { for (let y = 0; y < grid[0].length; y++) { let nbs = this.countMooreNeighborhood(grid, x, y); if (grid[x][y]) { newGrid[x][y] = nbs >= deathLimit ? this.Cells.Solid : this.Cells.Empty; } else { newGrid[x][y] = nbs > birthLimit ? this.Cells.Solid : this.Cells.Empty; } } } return newGrid; } startTimer() { this.timerRunning = true; this.timeRemaining = Consts.SecondsPerMap * 1000; } stopTimer() { this.timerRunning = false; this.scene.get('Hud').hideTimer(); } updateTimer(dt) { if (this.timerRunning) { this.timeRemaining -= dt; this.scene.get('Hud').setTimeRemaining(this.timeRemaining); if (this.timeRemaining <= 0) { this.cameras.main.flash(); this.warp(); } } } } class TitleScene extends Phaser.Scene { constructor () { super({ key: 'TitleScene' }); } preload() { this.load.image('brick', `https://play.rosebud.ai/assets/solid brick color.png?ydDU`); } create () { // add event handler for 'keydown' this.input.keyboard.on('keydown', () => { this.scene.stop('TitleScene'); this.scene.start('Example'); }); this.createTitleSequence(); this.showTitleSequence(); } createTitleSequence() { this.titleText = this.add.text(this.scale.width / 2, this.scale.height / 2 - 200, 'STONEWARP', { fill: '#ffffff', fontSize: '64px', fontFamily: 'monospace', }).setOrigin(0.5, 0.5); this.titleText.alpha = 0; let instructionsText = "Trapped in an ever-shifting cave, Brightman occupies himself by collecting loot. He must return to the green safe zone before the timer runs out, otherwise he might be trapped in stone. Or he might be lucky."; this.instructionsText = this.add.text(this.scale.width / 2, this.scale.height / 2 - 50, instructionsText, { fill: '#ffffff', fontSize: '24px', fontFamily: 'monospace', align: 'left', wordWrap: { width: this.scale.width * 0.8, useAdvancedWrap: true } }); this.instructionsText.setOrigin(0.5, 0.5); this.instructionsText.alpha = 0; let controlsText = "Left/Right Arrows to move left/right. Up arrow to jump. Press and hold S to deploy grappling hook, arrow up/down to ascend/descend. Press A to toggle zoom. Hold Q to accelerate timer."; this.controlsText = this.add.text(this.scale.width / 2, this.scale.height / 2 + 150, controlsText, { fill: '#ffffff', fontSize: '24px', fontFamily: 'monospace', align: 'left', wordWrap: { width: this.scale.width * 0.8, useAdvancedWrap: true } }); this.controlsText.setOrigin(0.5, 0.5); this.controlsText.alpha = 0; } showTitleSequence() { let timeline = this.tweens.createTimeline(); timeline.add({ targets: this.titleText, alpha: 1, ease: 'Power1', duration: 1000 }); timeline.add({ targets: this.instructionsText, alpha: 1, ease: 'Bounce.easeOut', duration: 1000, offset: '-=500' // start 500ms before previous tween ends }); timeline.add({ targets: this.controlsText, alpha: 1, ease: 'Circ.easeOut', duration: 500, offset: '-=250' // start 250ms before previous tween ends }); timeline.play(); } } 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: 2600 }, debug: false, } }, scene: [TitleScene, GameScene, HudScene ] }; window.phaserGame = new Phaser.Game(config);