diff --git a/index.html b/index.html index 653f92b..6992ddd 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + diff --git a/js/main.js b/js/main.js index 080bef1..6d5b055 100644 --- a/js/main.js +++ b/js/main.js @@ -1,40 +1,89 @@ function GameState(){ var that = this; - var SCREEN_OUT = 1; - var SCREEN_IN = 2; - var SCREEN_STABLE = 0; - var screenAlpha = 1; - this.pubsub = {}; BindPubSub( this.pubsub ); this.currentTime = new Date().getTime(); this.oldTime = new Date().getTime(); - this.mainUI = new GameUI( "demoCanvas", this ); - createjs.Ticker.addEventListener( "tick", gameLoop ); - - // Load all our resources: var queue = new createjs.LoadQueue(true); queue.installPlugin(createjs.Sound); //queue.addEventListener("fileload", handleFileComplete); - queue.loadFile( {id: "sound", src:"res/sound/turkey_in_the_straw.mp3"} ); + queue.loadFile( {id: "TitleMusicFile", src:"res/sound/turkey_in_the_straw.mp3"} ); + queue.loadFile( {id: "MarketBackgroundSoundFile", src:"res/sound/supermarket.mp3"} ); + queue.loadFile( {id: "MarketBackgroundSoundFile", src:"res/items/FrillsBox.png"} ); this.screenState = 0; + this.newScreen = ""; + + + // Game State flags + this.turkeyBought = false; + this.marketItems = { + "FrillsBox" : new MarketItem( this, "FrillsBox", 133,92, 100, "res/items/FrillsBox.png", "res/items/FrillsBoxGlow.png" ), + "TuTempProberkey" : new MarketItem( this, "TuTempProberkey", 200, 57, 100, "res/items/TempProbe.png", "res/items/TempProbeGlow.png" ), + "OvenLightBox" : new MarketItem( this, "OvenLightBox", 131,222, 100, "res/items/OvenLightBox.png", "res/items/OvenLightBoxGlow.png" ), + + "Alarm" : new MarketItem( this, "Alarm", 173,248, 100, "res/items/Alarm.png", "res/items/AlarmGlow.png" ), + "Cookbook" : new MarketItem( this, "Cookbook", 283,203, 100, "res/items/Cookbook1.png", "res/items/Cookbook1Glow.png" ), + "StuffingRepurposed" : new MarketItem( this, "StuffingRepurposed", 510,197, 100, "res/items/StuffingRepurposed.png", "res/items/StuffingRepurposedGlow.png" ), + "StuffingExquisite" : new MarketItem( this, "StuffingExquisite", 458,210, 100, "res/items/StuffingExquisite.png", "res/items/StuffingExquisiteGlow.png" ), + "StuffingSpecial" : new MarketItem( this, "StuffingSpecial", 390,220, 100, "res/items/StuffingSpecial.png", "res/items/StuffingSpecialGlow.png" ), + + "Turkey1" : new MarketItem( this, "Turkey1", 170,350, 100, "res/items/Turkey5.png", "res/items/Turkey5Glow.png" ), + "Turkey2": new MarketItem( this, "Turkey2", 540,320, 100, "res/items/Turkey4.png", "res/items/Turkey4Glow.png" ), + "Turkey3" : new MarketItem( this, "Turkey3", 265,415, 100, "res/items/Turkey3.png", "res/items/Turkey3Glow.png" ), + "Turkey4": new MarketItem( this, "Turkey4", 474,357, 100, "res/items/Turkey2.png", "res/items/Turkey2Glow.png" ), + "Turkey5": new MarketItem( this, "Turkey5", 368,426, 100, "res/items/Turkey1.png", "res/items/Turkey1Glow.png" ) + }; + + this.purchasedItems = []; + + // did we already show the player the kitchen intro? + this.kitchenIntro = false; + + this.mainUI = new GameUI( "demoCanvas", this ); + createjs.Ticker.addEventListener( "tick", gameLoop ); function gameLoop(){ that.mainUI.draw(); } return { - "main": this + // "main": this } } +/* + createjs.Sound.registerSound("res/sound/supermarket.mp3", "TitleMusic"); + var backgroundSound = createjs.Sound.createInstance("TitleMusic"); // play using id. Could also use full sourcepath or event.src. + var backgroundSounds = createjs.Sound.createInstance("TitleMusic"); + backgroundSound.setPosition(0); + backgroundSound.volume = 1; + setTimeout(function(){ backgroundSounds.play();},2000); + + backgroundSound.play(); + + // loop-de-loop + backgroundSound.addEventListener("complete", playAgain); + backgroundSound.addEventListener("complete", playAgainMe); + function playAgain(event) { + backgroundSound.setPosition(0); + backgroundSound.play(); + + } + function playAgainMe(event){ + setTimeout(function(){ backgroundSounds.play();},1000); + } +*/ function GameUI( canvasElem, gameState ){ var that = this; + var SCREEN_OUT = 1; + var SCREEN_IN = 2; + var SCREEN_STABLE = 0; + this.stage = new createjs.Stage( canvasElem ); this.stage.enableMouseOver(20); @@ -55,27 +104,60 @@ function GameUI( canvasElem, gameState ){ "CreditsScreen" : CreditsScreen } - this.activeScreenObj = new KitchenScreen( this.stage, gameState ); - var textContent = new createjs.Text( "", "16px Arial", "#00000000" ); + this.activeScreenObj = new MarketScreen( this.stage, gameState ); + var textContent = new createjs.Text( "", "20px Arial", "#00000000" ); textContent.x = 750; textContent.y = 30; - that.stage.addChild( textContent); + this.stage.addChild( textContent); + var overlay = new createjs.Shape(); + overlay.graphics.beginFill("#fffffff").drawRect(0, 0, 800, 600 ); + overlay.alpha = 0; + this.stage.addChild(overlay); - this.switchScreen = function( screenName ){ - //gameState.screenState = SCREEN_OUT; + var soundManager = new SoundManager( gameState ); + // delay for fade in and fade-out + this.switchScreen = function( screenName ){ + gameState.screenState = SCREEN_OUT; + gameState.pubsub.publish( "FadeOut", "" ); console.log("Switch screen called with" + screenName); + gameState.newScreen = screenName; + }; + this.actuallySwitchScreen = function( screenName ){ that.stage.removeAllChildren(); that.activeScreenObj = new that.screens[ screenName ]( that.stage, gameState ); - //var rect = new createjs.Rectangle(0, 0, 100, 100); that.stage.addChild( textContent ); - } - + that.stage.addChild( overlay ); + }; gameState.pubsub.subscribe( "SwitchScreen", this.switchScreen ); + gameState.pubsub.subscribe( "ActuallySwitchScreen", this.actuallySwitchScreen ); + + // Allow items to be removed if they don't have access to stage + gameState.pubsub.subscribe("RemoveItems", function(items){ + for (var index in items ){ + that.stage.removeChild(items[index]); + } + }); return { draw : function(){ + if( gameState.screenState == SCREEN_OUT ){ + overlay.alpha +=0.3; + } + if( gameState.screenState == SCREEN_IN ){ + overlay.alpha -=0.3; + } + if( overlay.alpha > 1.0 ){ + gameState.screenState = SCREEN_IN; + overlay.alpha = 1; + gameState.pubsub.publish( "ActuallySwitchScreen", gameState.newScreen ); + } + if( overlay.alpha < 0.0 ){ + gameState.screenState = SCREEN_STABLE; + overlay.alpha = 0; + } + soundManager.tick(); that.activeScreenObj.blit(); textContent.text = createjs.Ticker.getMeasuredFPS().toFixed(1); that.stage.update(); @@ -89,34 +171,33 @@ function DialogUI( stage ){ var DIALOG_RECEDING = 0; var DIALOG_SHOWING = 1; var DIALOG_PAUSING = 2; - var MILLIS_PER_CHAR = 50; + var MILLIS_PER_CHAR = 100; this.dialogSpeed = 30; this.dialogState = DIALOG_PAUSING; - this.dialogMotionQueue = [DIALOG_RECEDING,DIALOG_SHOWING,DIALOG_PAUSING]; + this.dialogMotionQueue = [DIALOG_SHOWING]; this.currDialogueSeq = new DialogueSequence(); dialogQueue = []; - this.dialogBox = new createjs.Bitmap("res/DialogueBox.png"); this.dialogBox.x = 10; - this.dialogBox.y = 435; + this.dialogBox.y = 675; - this.textContent = new createjs.Text( "Hey there kids!", "16px Arial", "#00000000" ); - this.textContent.x = 195; - this.textContent.y = 475; - this.textContent.lineWidth = 600; + this.textContent = new createjs.Text( "Hey there kids!", "24px Arial", "#00000000" ); + this.textContent.x = 205; + this.textContent.y = 705; + this.textContent.lineWidth = 565; this.textContent.lineHeight = 30; this.textContent.textBaseline = "alphabetic"; this.dialogBox.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } ); this.dialogBox.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } ); - this.dialogBox.addEventListener( "click", function(){ clickEvent(); }); + this.dialogBox.addEventListener( "click", function(){ setTimeout( clickEvent, 100); }); this.textContent.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; } ); this.textContent.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; } ); - this.textContent.addEventListener( "click", function(){ clickEvent(); }); + this.textContent.addEventListener( "click", function(){ setTimeout( clickEvent, 100); }); // negate double setTimeout if clicked @@ -126,7 +207,7 @@ function DialogUI( stage ){ // if there is more dialogue text, then keep going, otherwise, recede if( that.currDialogueSeq.more() ){ - that.dialogMotionQueue.push(DIALOG_SHOWING); + setTimeout( function(){ that.dialogMotionQueue.push(DIALOG_SHOWING) }, 1000); that.textContent.text=that.currDialogueSeq.next(); delayCounter = 0; oldTime = new Date().getTime() @@ -166,7 +247,7 @@ function DialogUI( stage ){ } if( that.dialogBox.y < 435 && that.dialogState == DIALOG_SHOWING ){ that.dialogBox.y = 435; - that.textContent.y = 465; + that.textContent.y = 480; that.dialogState = DIALOG_PAUSING; console.log( "Pausing on showing" + that.dialogBox.y ); } diff --git a/js/screens.js b/js/screens.js index 474f53c..4e1deb0 100644 --- a/js/screens.js +++ b/js/screens.js @@ -48,22 +48,6 @@ function MainScreen( stage, gameState ){ this.background = new createjs.Bitmap( "res/Main.png" ); stage.addChild( this.background ); - //createjs.Sound.addEventListener("fileload", createjs.proxy(loadHandler, this)); - createjs.Sound.registerSound("res/sound/turkey_in_the_straw.mp3", "sound"); - - var instance = createjs.Sound.createInstance("sound"); // play using id. Could also use full sourcepath or event.src. - instance.setPosition(5650); - instance.volume = 0.5; - - instance.play(); - - // loop-de-loop - instance.addEventListener("complete", playAgain); - function playAgain(event) { - instance.setPosition(5650); - instance.play(); - } - // buttons info/credits/start stage.addChild( new Button( stage, gameState, 13, 445, 222, 65, "SwitchScreen", "InfoHelpScreen" ) ); stage.addChild( new Button( stage, gameState, 13, 515, 222, 65, "SwitchScreen", "CreditsScreen" ) ); @@ -92,8 +76,8 @@ function DifficultyScreen( stage, gameState ){ stage.addChild( this.background ); // Easy/Hard Button - stage.addChild( new Button( stage, gameState, 170, 40, 450, 105, "SwitchScreen", "MarketScreen" ) ); - stage.addChild( new Button( stage, gameState, 170, 150, 450, 105, "SwitchScreen", "MarketScreen" ) ); + stage.addChild( new Button( stage, gameState, 170, 40, 450, 105, "SwitchScreen", "KitchenScreen" ) ); + stage.addChild( new Button( stage, gameState, 170, 150, 450, 105, "SwitchScreen", "KitchenScreen" ) ); return { blit : function(){ @@ -113,11 +97,18 @@ function KitchenScreen( stage, gameState ){ this.uiElems = []; + + for(var i in gameState.purchasedItems){ + console.log(gameState.purchasedItems); + gameState.purchasedItems[i].draw( stage, 403+100*i, 350 ); + } + this.uiElems.push( new OvenUI( stage, gameState ) ); this.uiElems.push( new ClockUI( stage, gameState ) ); this.uiElems.push( new WindowUI( stage, gameState ) ) this.uiElems.push( new DialogUI( stage ) ); + return { blit : function(){ @@ -134,25 +125,14 @@ function MarketScreen( stage, gameState ){ this.background = new createjs.Bitmap( "res/Store-Screen-Clean.png" ); stage.addChild( this.background ); - stage.addChild( new Button( stage, gameState, 13, 445, 222, 65, "SwitchScreen", "KitchenScreen" ) ); - this.uiElems = []; - this.uiElems.push( new MarketItem( stage, gameState, 275,195, 100, "res/items/Alarm.png", "res/items/AlarmGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 200,200, 100, "res/items/Bottle1.png", "res/items/Bottle1.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 456,123, 100, "res/items/Bottle2.png", "res/items/Bottle2.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 312,222, 100, "res/items/Bottle3.png", "res/items/Bottle3.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 300,400, 100, "res/items/Cookbook1.png", "res/items/Cookbook1Glow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 12,11, 100, "res/items/FrillsBox.png", "res/items/FrillsBoxGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 44,222, 100, "res/items/OvenLightBox.png", "res/items/OvenLightBoxGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 66,444, 100, "res/items/StuffingExquisite.png", "res/items/StuffingExquisiteGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 293,12, 100, "res/items/StuffingRepurposed.png", "res/items/StuffingRepurposedGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 438,200, 100, "res/items/StuffingSpecial.png", "res/items/StuffingSpecialGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 444,334, 100, "res/items/TempProbe.png", "res/items/TempProbeGlow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 555,33, 100, "res/items/Turkey1.png", "res/items/Turkey1Glow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 200,200, 100, "res/items/Turkey2.png", "res/items/Turkey2Glow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 100,100, 100, "res/items/Turkey3.png", "res/items/Turkey3Glow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 122,349, 100, "res/items/Turkey4.png", "res/items/Turkey4Glow.png" ) ); - this.uiElems.push( new MarketItem( stage, gameState, 96,406, 100, "res/items/Turkey5.png", "res/items/Turkey5Glow.png" ) ); + this.uiElems.push( new ImgButton( stage, gameState, 690,0, "res/items/ExitSign.png", "res/items/ExitGlow.png","SwitchScreen", "KitchenScreen" ) ); + var marketItemKeys = Object.keys(gameState.marketItems); + for (var index in marketItemKeys ) { + gameState.marketItems[marketItemKeys[index]].draw( stage ); + } + this.topground = new createjs.Bitmap( "res/TopShelf.png" ); + stage.addChild( this.topground ); return { blit : function(){ diff --git a/js/ui.js b/js/ui.js index b82cd8e..39fb416 100644 --- a/js/ui.js +++ b/js/ui.js @@ -64,7 +64,7 @@ function OvenUI( stage, gameState ){ gameState.pubsub.subscribe( "OvenLight", this.changeOvenLight ); - var temperatureText = new createjs.Text( "325", "40px Arial", "#ff7700" ); + var temperatureText = new createjs.Text( "OFF", "40px Arial", "#ff7700" ); temperatureText.x = 50; temperatureText.y = 147; temperatureText.textBaseline = "alphabetic"; @@ -93,13 +93,17 @@ function OvenUI( stage, gameState ){ temp = temp < 150 ? temp = "OFF" : temp; // Check upper bound - // Set up to 500, then it's BROIL @ 980 + // if over 1100 F, burn house down + if( temp > 1100 ){ + console.log("You have died in a fire"); + return; + } temperatureText.text = temp; } // Tell our model to set the actual temperature - ovenModel.changeTemp( UtilityFunctions.F2C( temperatureText.text == "OFF" ? 150 : parseInt( temperatureText.text ) ) ); + ovenModel.changeTemp( UtilityFunctions.F2C( temperatureText.text == "OFF" ? 125 : parseInt( temperatureText.text ) ) ); } // change temperature, this one's for the UI @@ -131,7 +135,56 @@ return { } } -function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){ +function MarketItem( gameState, name, x, y, cost, mouseOutImg, mouseOverImg ){ + var that = this; + this.name = name; + this.bought = false; + var mouseOver = new createjs.Bitmap( mouseOverImg ); + var mouseOut = new createjs.Bitmap( mouseOutImg ); + mouseOver.x = mouseOut.x = x; + mouseOver.y = mouseOut.y = y; + mouseOut.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; mouseOver.visible = true; mouseOut.visible = false; } ); + mouseOut.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; mouseOver.visible = false; mouseOut.visible = true; } ); + mouseOver.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; mouseOver.visible = true; mouseOut.visible = false; } ); + mouseOver.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; mouseOver.visible = false; mouseOut.visible = true; } ); + mouseOver.addEventListener( "click", function(){ + if(!that.bought){ + if( that.name.indexOf("Turkey") == 0 && gameState.turkeyBought != true){ + gameState.turkeyBought = true; + gameState.marketItems[ that.name ].delete(); + } + + // can we buy this? Only possible if you already bought a turkey + if( !that.name.indexOf("Turkey") == 0 && gameState.turkeyBought == true ){ + gameState.purchasedItems.push( objReturn ); + gameState.marketItems[ that.name ].delete(); + that.bought = true; + } + } + }); + + mouseOver.visible = false; + var objReturn = { + tick: function(){}, + getName: function(){return that.name;}, + delete: function( stage ){ + gameState.pubsub.publish("RemoveItems", [mouseOut, mouseOver]); + }, + draw: function( stage, newx, newy ){ + if( newx && newy ){ + mouseOut.x = mouseOver.x = newx; + mouseOut.y = mouseOver.y = newy; + } + stage.addChild( mouseOut ); + stage.addChild( mouseOver ); + } + } + return objReturn; +} + + + +function ImgButton( stage, gameState, x, y, mouseOutImg, mouseOverImg, eventCmd, arg ){ var mouseOver = new createjs.Bitmap( mouseOverImg ); var mouseOut = new createjs.Bitmap( mouseOutImg ); mouseOver.x = mouseOut.x = x; @@ -140,7 +193,7 @@ function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){ mouseOut.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; mouseOver.visible = false; mouseOut.visible = true; } ); mouseOver.addEventListener( "mouseover", function(){ document.body.style.cursor='pointer'; mouseOver.visible = true; mouseOut.visible = false; } ); mouseOver.addEventListener( "mouseout", function(){ document.body.style.cursor='default'; mouseOver.visible = false; mouseOut.visible = true; } ); - mouseOver.addEventListener( "click", function(){ alert("buy!"); } ); + mouseOver.addEventListener( "click", function(){ gameState.pubsub.publish( eventCmd, arg ) } ); mouseOver.visible = false; stage.addChild( mouseOut ); stage.addChild( mouseOver ); @@ -148,7 +201,6 @@ function MarketItem( stage, gameState, x, y, cost, mouseOutImg, mouseOverImg ){ return { tick: function(){} } - } function Button( stage, gameState, x_orig, y_orig, x_dest, y_dest, eventCmd, arg ){ diff --git a/res/items/Bottle1.png b/res/items/Bottle1.png index 1f47149..6a291ba 100644 Binary files a/res/items/Bottle1.png and b/res/items/Bottle1.png differ diff --git a/res/items/Bottle1Glow.png b/res/items/Bottle1Glow.png new file mode 100644 index 0000000..794dadd Binary files /dev/null and b/res/items/Bottle1Glow.png differ diff --git a/res/items/Bottle2.png b/res/items/Bottle2.png index 748d977..cd0a7d6 100644 Binary files a/res/items/Bottle2.png and b/res/items/Bottle2.png differ diff --git a/res/items/Bottle2Glow.png b/res/items/Bottle2Glow.png new file mode 100644 index 0000000..93ac52b Binary files /dev/null and b/res/items/Bottle2Glow.png differ diff --git a/res/items/Bottle3.png b/res/items/Bottle3.png index 7074625..70d4eeb 100644 Binary files a/res/items/Bottle3.png and b/res/items/Bottle3.png differ diff --git a/res/items/Bottle3Glow.png b/res/items/Bottle3Glow.png new file mode 100644 index 0000000..127383e Binary files /dev/null and b/res/items/Bottle3Glow.png differ diff --git a/res/items/ExitGlow.png b/res/items/ExitGlow.png new file mode 100644 index 0000000..d0f617e Binary files /dev/null and b/res/items/ExitGlow.png differ diff --git a/res/items/ExitSign.png b/res/items/ExitSign.png new file mode 100644 index 0000000..239bc52 Binary files /dev/null and b/res/items/ExitSign.png differ diff --git a/res/items/Store-Screen-Clean.png b/res/items/Store-Screen-Clean.png deleted file mode 100644 index e305a4c..0000000 Binary files a/res/items/Store-Screen-Clean.png and /dev/null differ diff --git a/res/items/Store-ScreenV11-17.png b/res/items/Store-ScreenV11-17.png deleted file mode 100644 index ba95d69..0000000 Binary files a/res/items/Store-ScreenV11-17.png and /dev/null differ diff --git a/res/items/Store-ScreenV11-19.png b/res/items/Store-ScreenV11-19.png deleted file mode 100644 index 3f6fa6b..0000000 Binary files a/res/items/Store-ScreenV11-19.png and /dev/null differ