diff --git a/client/config/config.js b/client/config/config.js index 8a3b911..07d4b89 100644 --- a/client/config/config.js +++ b/client/config/config.js @@ -105,8 +105,10 @@ const config = { } }, neutralMap:{ - velocity: 120, - mapsCount: 2, + //velocity: 120, + //mapsCount: 2, + xRegion: 0.5, + zOrder: -1, imgKey: "neutralMap", imgSrc: "assets/img/floorBgAsset.png" }, @@ -150,7 +152,7 @@ config.default.settings = { tileHeight: 58, tileWidth: 74, wrapOffset: -1, - mapVelocity: 25, + mapVelocity: 10, maxMapVelocity: 150, difficultyInterval: 10000, //10 seconds difficulty: "easy" @@ -169,7 +171,7 @@ config.default.player = { src: "../spriteLocation.png" }; -config.default.fog = { +config.default.darkness = { key: "fog", src: "assets/img/fogLayer.png" } diff --git a/client/index.html b/client/index.html index dffcc59..d7773bb 100644 --- a/client/index.html +++ b/client/index.html @@ -2,33 +2,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - Path Light - - + + + + + + + + + + + + + + + + + + + + + + + + + + + Path Light + + diff --git a/client/js/gameLoop.js b/client/js/gameLoop.js index 242502f..8a3b7c2 100644 --- a/client/js/gameLoop.js +++ b/client/js/gameLoop.js @@ -2,6 +2,8 @@ let gameLoop = {}; gameLoop = { + // phaser default methods (subStates) ------------------------- + init: (data) => { data = typeof data === "undefined" ? {} : data; gameLoop.player = data.player || config.default.player; @@ -19,8 +21,10 @@ gameLoop = { else { gameLoop.debugMode = false; } + + mapController.init(); + neutralMap.init(); }, - // phaser default methods (subStates) ------------------------- create: () => { game.physics.startSystem(Phaser.Physics.ARCADE); @@ -34,7 +38,7 @@ gameLoop = { ]; gameLoop.player.sprite = game.add.sprite(...playerStartData); playerUtilities.create(gameLoop.player); - fogUtilities.create(gameLoop.player); + darknessUtilities.create(gameLoop.player); // clicking the mouse during this state will change the control type to mouse game.input.onDown.add(() => { gameLoop.player.controlType = config.default.controls.mouse; }); @@ -50,11 +54,11 @@ gameLoop = { gameLoop.debug.controls = game.input.keyboard; }; - gameLoop.difficultyIncrease = gameLoop.manageDifficulty(); + //gameLoop.difficultyIncrease = gameLoop.manageDifficulty(); // idk what this does lol }, update: () => { - neutralMap.updateMap(); // update neutral map states[] + mapController.update(); playerUtilities.update(gameLoop.player); //gameLoop.score.amount += gameLoop.score.bonus1; @@ -63,12 +67,12 @@ gameLoop = { gameLoop.score.interface.setText(gameLoop.score.text + gameLoop.score.amount); if(gameLoop.debugMode){ - let upScrollCheat = gameLoop.debug.controls.isDown(Phaser.KeyCode.OPEN_BRACKET); - let downScrollCheat = gameLoop.debug.controls.isDown(Phaser.KeyCode.CLOSED_BRACKET); + //let upScrollCheat = gameLoop.debug.controls.isDown(Phaser.KeyCode.OPEN_BRACKET); + //let downScrollCheat = gameLoop.debug.controls.isDown(Phaser.KeyCode.CLOSED_BRACKET); let gameOverCheat = gameLoop.debug.controls.isDown(Phaser.KeyCode.SPACEBAR); - upScrollCheat ? neutralMap.setMapSpeed(-gameLoop.difficulty) : -1; - downScrollCheat ? neutralMap.setMapSpeed(gameLoop.difficulty) : -1; + //upScrollCheat ? neutralMap.setMapSpeed(-gameLoop.difficulty) : -1; + //downScrollCheat ? neutralMap.setMapSpeed(gameLoop.difficulty) : -1; gameOverCheat ? game.state.start("end") : -1; } @@ -84,8 +88,8 @@ gameLoop = { return; }; - gameLoop.velocity *= data.velocityIncrease; - neutralMap.setMapSpeed(gameLoop.velocity); + //gameLoop.velocity *= data.velocityIncrease; + //neutralMap.setMapSpeed(gameLoop.velocity); //blockUtilities.setVelocity(gameLoop.velocity); }; diff --git a/client/js/colorUtilities.js b/client/js/gameLoopTools/colorUtilities.js similarity index 100% rename from client/js/colorUtilities.js rename to client/js/gameLoopTools/colorUtilities.js diff --git a/client/js/gameLoopTools/darknessUtilities.js b/client/js/gameLoopTools/darknessUtilities.js new file mode 100644 index 0000000..74b9d52 --- /dev/null +++ b/client/js/gameLoopTools/darknessUtilities.js @@ -0,0 +1,7 @@ +const darknessUtilities = {}; +darknessUtilities.create = (player) => { + let darknessSprite = game.make.sprite(0, 0, config.default.darkness.key); + let darknessCenter = [0.5, 0.5]; + darknessSprite.anchor.setTo(...darknessCenter); + player.sprite.addChild(darknessSprite); +}; diff --git a/client/js/gameLoopTools/fogUtilities.js b/client/js/gameLoopTools/fogUtilities.js deleted file mode 100644 index e951ac3..0000000 --- a/client/js/gameLoopTools/fogUtilities.js +++ /dev/null @@ -1,7 +0,0 @@ -const fogUtilities = {}; -fogUtilities.create = (player) => { - let fogSprite = game.make.sprite(0, 0, config.default.fog.key); - let fogCenter = [0.5, 0.5]; - fogSprite.anchor.setTo(...fogCenter); - player.sprite.addChild(fogSprite); -}; diff --git a/client/js/gameLoopTools/mapController.js b/client/js/gameLoopTools/mapController.js new file mode 100644 index 0000000..5cb96c0 --- /dev/null +++ b/client/js/gameLoopTools/mapController.js @@ -0,0 +1,91 @@ +// This implementation of the map controller takes the same data as every other phaser state, which is the config variable. +// This avoids having to pass all the data needed for the mapController in explicitly, as all the data the controller needs is in the config. + +const mapController = {}; +// mapController properties - this is my C# influence ^_^ (Eric) +mapController.bottom; +mapController.top; +mapController.speed; +mapController.mapObjects; // Anything in here will move down with the map +// Anything in mapObjects must have a .height, .anchor, and .y component so that their positions can be defined and manipulated. +// Anything in mapObjects must also not use its .fullyOnMap property +// Optionally, anything in mapObjects can have these callbacks: .onFullyOnMap, .onFullyLeftMap + +mapController.init = (data) => { + data = typeof data === "undefined" ? {} : data; + // external data + mapController.settings = data.settings || config.default.settings; + mapController.bottom = data.height || config.init.screenHeight; + + // assign to internal member data + mapController.top = 0; + mapController.speed = mapController.settings.mapVelocity; + mapController.mapObjects = []; +}; + +/* + * Adds an object to the map to start traveling downwards. + */ +mapController.addToMap = (object) => { + if (object.height == null || object.anchor == null || object.y == null) { + console.log("Cannot add %s to the map because it doesn't contain .height, .anchor, or a .y property!", object); + return null; + } + + let objectTop = transformUtilities.getTopPosition(object.y, object.height, object.anchor.y); + if (mapController.top <= objectTop) + object.fullyOnMap = true; + else + object.fullyOnMap = false; + mapController.mapObjects.push(object); + return object; +}; + +/* + * Adds an object specifically to the top of the map, right above where it will become visible. + */ +mapController.addToTopOfMap = (object) => { + let addedObj = mapController.addToMap(object); // This lets one function perform the null check without overriding the passed in object + if (addedObj == null) + return; + object = addedObj; + object.y = mapController.top - object.height * (1 - object.anchor.y); // anchor.y = 0 means anchor is at top of object + object.fullyOnMap = false; +}; + +mapController.update = () => { + for (i = mapController.mapObjects.length - 1; i >= 0; i--) { // Backwards iteration since items could be removed from the array + let object = mapController.mapObjects[i]; + + if (object.y == null) { // This is in case the mapController is not destroyed upon game state change + mapController.mapObjects.splice(i, 1); + continue; + } + + object.y += mapController.speed; + + let objectTop = transformUtilities.getTopPosition(object.y, object.height, object.anchor.y); + + if (object.fullyOnMap === false) { + if (mapController.top <= objectTop) { + if (typeof (object.onFullyOnMap) === "function") { + object.onFullyOnMap(transformUtilities.getTopPosition(object.y, object.height, object.anchor.y)); + } + object.fullyOnMap = true; + } + } + + if (mapController.bottom <= objectTop) { + if (typeof (object.onFullyLeftMap) === "function") + object.onFullyLeftMap(); + //if (typeof (object.destroy) === "function") // this should be used if there's some custom destruction method attached to .onFullyLeftMap + // object.destroy(); + object.destroy(); + mapController.mapObjects.splice(i, 1); + } + } +}; + +mapController.destroy = () => { + mapController.mapObjects = []; +}; \ No newline at end of file diff --git a/client/js/gameLoopTools/neutralMap.js b/client/js/gameLoopTools/neutralMap.js index 6fb2dd5..10bc096 100644 --- a/client/js/gameLoopTools/neutralMap.js +++ b/client/js/gameLoopTools/neutralMap.js @@ -1,80 +1,57 @@ - -/////////////////////////////////////////////////////////////////////////// -///////////////////////// START Neutral Map Handling ////////////////////// -/////////////////////////////////////////////////////////////////////////// - -// neutral map variables const neutralMap = {}; -neutralMap.maps; -neutralMap.velocity = config.default.settings.mapVelocity; -neutralMap.mapsCount = config.default.neutralMap.mapsCount; // number changes pending size of map versus size of screen - -/** - * getMapSpeed() validates config['mapSpeed'] - * if valid, then store it in neutralMap.velocity - * otherwise, use current value of neutralMap.velocity as default - */ -neutralMap.getMapSpeed = () => { - if (config.default.debug.isOn === true){ - if (config.default.settings.mapVelocity){ - console.log("Config mapSpeed: " + config.default.settings.mapVelocity); - } - } -} - -neutralMap.setMapSpeed = (deltaSpeed) => { - neutralMap.velocity += deltaSpeed; - if (config.default.debug.isOn === true){ - console.log("Map Speed Changed! Current speed: " + neutralMap.velocity) - } -} - -neutralMap.createMaps = () => { - - neutralMap.maps = []; - - var tempMap; - var currentYPosition = 0; // identifies the y-positions when stacking maps into list - for(var i = 0; i < neutralMap.mapsCount; i++){ - // create map and give it an ID - tempMap = game.add.sprite(0, currentYPosition, config.default.neutralMap.key); - tempMap.name = config.default.neutralMap.key + '-' + i; - game.physics.arcade.enable(tempMap); +neutralMap.init = (data) => { + data = typeof data === "undefined" ? {} : data; + neutralMap.mapData = data.neutralMap || config.neutralMap; + neutralMap.width = data.width || config.init.screenWidth; + neutralMap.height = data.height || config.init.screenHeight; - // ensure map fits on screen - // let scaleMapValue = config.init.screenWidth / tempMap.width; - // tempMap.scale.setTo(scaleMapValue); + neutralMap.graphicCenter = [0.5, 0.5]; - // add new map to the stack list and prepare Y position for next map to stack on this one - neutralMap.maps.push(tempMap); - currentYPosition -= tempMap.height; - } +}; - if(config.default.debug.isOn === true){ - for(var key in neutralMap.maps) - console.log("Debug: neutralMap y-position = " + neutralMap.maps[key].body.y); - } -} +neutralMap.createMaps = () => { -neutralMap.updateMap = () => { - // check if map image has gone passed the screen, if so, place map back to other side of screen - for (var key in neutralMap.maps){ - // if(neutralMap.maps[key].body.y >= neutralMap.maps[key].height){ - if(neutralMap.maps[key].y > game.world.height) { - //neutralMap.maps[key].y = 0 - neutralMap.maps[key].height; - neutralMap.maps[key].y = -(game.world.height + config.default.settings.wrapOffset); - } - neutralMap.maps[key].body.velocity.y = config.default.settings.mapVelocity; - } -} + let nextMapSpriteBottom = neutralMap.height; + let latestMapSprite; + do { + let mapSpriteData = [ + neutralMap.width * neutralMap.mapData.xRegion, + 0, // this will be changed + neutralMap.mapData.imgKey + ]; + latestMapSprite = game.add.sprite(...mapSpriteData); + latestMapSprite.anchor.setTo(...neutralMap.graphicCenter); + latestMapSprite.scale.x = latestMapSprite.scale.y = + transformUtilities.getScaleValueToEnvelopeRect(latestMapSprite.width, latestMapSprite.height, neutralMap.width, neutralMap.height); + latestMapSprite.y = nextMapSpriteBottom - latestMapSprite.height * (1 - latestMapSprite.anchor.y); + + latestMapSprite.onFullyOnMap = neutralMap.generateNewMap; + + nextMapSpriteBottom = transformUtilities.getTopPosition(latestMapSprite.y, latestMapSprite.height, latestMapSprite.anchor.y); // next map sprite bottom is latest map sprite top + + mapController.addToMap(latestMapSprite); + } while (nextMapSpriteBottom >= 0); +}; + +neutralMap.generateNewMap = (topPosition) => { + let mapSpriteData = [ + neutralMap.width * neutralMap.mapData.xRegion, + 0, // this will be changed + neutralMap.mapData.imgKey + ]; + let mapSprite = game.add.sprite(...mapSpriteData); + mapSprite.anchor.setTo(...neutralMap.graphicCenter); + mapSprite.scale.x = mapSprite.scale.y = + transformUtilities.getScaleValueToEnvelopeRect(mapSprite.width, mapSprite.height, neutralMap.width, neutralMap.height); + mapSprite.y = topPosition - mapSprite.height * (1 - mapSprite.anchor.y); + + mapSprite.onFullyOnMap = neutralMap.generateNewMap; + + mapController.addToMap(mapSprite); +}; // setup neutral map neutralMap.create = () => { - neutralMap.getMapSpeed(); neutralMap.createMaps(); -} - -/////////////////////////////////////////////////////////////////////////// -///////////////////////// END Neutral Map Handling //////////////////////// -/////////////////////////////////////////////////////////////////////////// +}; \ No newline at end of file diff --git a/client/js/load.js b/client/js/load.js index cc20f3f..e5c86c2 100644 --- a/client/js/load.js +++ b/client/js/load.js @@ -141,7 +141,7 @@ loadState = { game.load.image(config.loader.placeHolder.key, config.loader.placeHolder.src); game.load.image(config.default.blocks.quarter.key, config.default.blocks.quarter.src); game.load.image(config.default.neutralMap.key, config.default.neutralMap.src); - game.load.image(config.default.fog.key, config.default.fog.src); + game.load.image(config.default.darkness.key, config.default.darkness.src); // Game over loads game.load.image(config.gameOverState.restartButton.key, config.gameOverState.restartButton.src); diff --git a/client/js/menu.js b/client/js/menu.js index a9edd77..c1dcb34 100644 --- a/client/js/menu.js +++ b/client/js/menu.js @@ -12,15 +12,6 @@ menuState = { menuState.startButtonDots = data.menuState.startButtonDots || config.menuState.startButtonDots; }, - getScaleValueToEnvelopeRect: (childWidth, childHeight, parentWidth, parentHeight) => { - let xScale = parentWidth / childWidth; - let yScale = parentHeight / childHeight; - if (childHeight * xScale >= parentHeight) - return xScale; - else - return yScale; - }, - startGame: function() { //game.state.start("gameLoop", data); // data is currently undefined game.state.start("gameLoop"); @@ -39,7 +30,7 @@ menuState = { menuState.background.sprite.anchor.setTo(...graphicCenter); menuState.background.sprite.scale.x = menuState.background.sprite.scale.y = - menuState.getScaleValueToEnvelopeRect(menuState.background.sprite.width, menuState.background.sprite.height, menuState.width, menuState.height); + transformUtilities.getScaleValueToEnvelopeRect(menuState.background.sprite.width, menuState.background.sprite.height, menuState.width, menuState.height); let menuBackground2Data = [ menuState.width * menuState.background2.xRegion, @@ -50,7 +41,7 @@ menuState = { menuState.background2.sprite.anchor.setTo(...graphicCenter); menuState.background2.sprite.scale.x = menuState.background2.sprite.scale.y = - menuState.getScaleValueToEnvelopeRect(menuState.background2.sprite.width, menuState.background2.sprite.height, menuState.width, menuState.height); + transformUtilities.getScaleValueToEnvelopeRect(menuState.background2.sprite.width, menuState.background2.sprite.height, menuState.width, menuState.height); let menuTitleData = [ menuState.width * menuState.title.xRegion, diff --git a/client/js/transformUtilities.js b/client/js/transformUtilities.js new file mode 100644 index 0000000..14b5214 --- /dev/null +++ b/client/js/transformUtilities.js @@ -0,0 +1,27 @@ +const transformUtilities = {}; + +/* + * Makes sure the background image fills the game display no matter the size of the background. + * @function getScaleValueToEnvelopeRect + * @param {Object} childWidth Background width + * @param {Object} childHeight Background height + * @param {Object} parentWidth The game display's width + * @param {Object} parentHeight The game display's height + * @return {Number} + */ +transformUtilities.getScaleValueToEnvelopeRect = (childWidth, childHeight, parentWidth, parentHeight) => { + let xScale = parentWidth / childWidth; + let yScale = parentHeight / childHeight; + if (childHeight * xScale >= parentHeight) + return xScale; + else + return yScale; +}; + +transformUtilities.getTopPosition = (yPosition, height, anchorYPosition) => { + return yPosition - height * anchorYPosition; +}; + +transformUtilities.getBottomPosition = (yPosition, height, anchorYPosition) => { + return yPosition + height * (1 - anchorYPosition); +}; \ No newline at end of file