JS framework in place with sample screens

11 years ago · 4447592069
6 changed files with 480 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,37 @@
 <html>
 <head>
  <title>Turkey Banking Simulator</title>
 </head>
  <body>
    <br/><br/><br/><br/>
    <center>
    <div class="canvasContainer">
      <canvas onmousemove="showXY(event)" id="demoCanvas" width="800" height="600" style="border:1px solid #000000"></canvas>
    </div>
  </center>
    <script>
    </script>
  </body>
  <script src="http://code.createjs.com/createjs-2013.09.25.min.js"></script>
  <script src="js/main.js"></script>
  <script>
    new GameState();
    function showXY(e)
    {
    var mouseX, mouseY;
    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
    console.log("x: " + mouseX + "y :" + mouseY);
    /* do something with mouseX/mouseY */
    }
  </script>
 </html>
--- a/js/main.js
+++ b/js/main.js
@ -0,0 +1,443 @@
 function GameState(){
 	var that = this;
 	this.oldTime = new Date().getTime();
 	this.mainUI = new GameUI( "demoCanvas" );
    createjs.Ticker.addEventListener( "tick", gameLoop );
 	function gameLoop(){
 		if( ( new Date().getTime() - that.oldTime )  > 1000 ){
 			// It's been at least one second, do logic loop depending on difference
 			console.log("One second");
 			that.oldTime = new Date().getTime();
 		}
 		that.mainUI.draw();
 	}
 	return {
 	}
 }
 function GameUI( canvasElem ){
 	var that = this;
 	this.stage = new createjs.Stage( canvasElem );
 	this.activeScreenName = "EndingScreen";
 	this.activeScreenObj = {};
 	/* Initialize All Screens */
 	this.screens = {
 		"LoadingTitleScreen" : LoadingTitleScreen,
 		"InfoHelpScreen" 	 : InfoHelpScreen,
 		"MainScreen" 	 	 : MainScreen,
 		"KitchenScreen"		 : KitchenScreen,
 		"MarketScreen"		 : MarketScreen,
 		"TurkeyOutScreen"	 : TurkeyOutScreen,
 		"EndingScreen"		 : EndingScreen,
 		"ScoreScreen"		 : ScoreScreen,
 		"CreditsScreen"		 : CreditsScreen
 	}
 	this.activeScreenObj = new MainScreen( this.stage );
 	this.switchScreen = function( screenName ){
 		console.log("Switch screen called with" + screenName);
 		that.stage.removeAllChildren();
 		that.activeScreenObj = new that.screens[ screenName ]( that.stage );
 	}
 	pubsub.subscribe( "SwitchScreen", this.switchScreen );
 	return {
 		draw : function(){
 			that.activeScreenObj.blit();
 			that.stage.update();
 		}
 	}
 }
 /* Screens, inheritance would be nice */
 function LoadingTitleScreen( stage ){
 	var that = this;
    this.picture = new createjs.Bitmap( "res/Loading-Title.png" );
    this.ovenLight = new createjs.Shape();
    this.ovenLight.graphics.beginFill( "red" ).drawCircle( 396, 318, 5 );
    this.ovenLight.addEventListener( "click", function(){alert("hello world")});
    stage.addChild( this.picture );
 	stage.addChild( this.ovenLight );
    this.uiElems = [];
 	this.uiElems.push( new DialogUI( stage ) );
 	return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 }
 function InfoHelpScreen( stage ){
 		var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 }
 function MainScreen( stage ){
 	var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    // buttons info/credits/start
    var infoButton = new createjs.Shape();
 	infoButton.graphics.beginFill("#ffffff").drawRect(13, 445, 222, 65);
 	infoButton.alpha = 0.1;
 	infoButton.addEventListener( "click", function(){ pubsub.publish( "SwitchScreen", "InfoHelpScreen" ) } );
 	var creditsButton = new createjs.Shape();
 	creditsButton.graphics.beginFill("#ffffff").drawRect(13, 515, 222, 65);
 	creditsButton.alpha = 0.1;
 	creditsButton.addEventListener( "click",  function(){ pubsub.publish( "SwitchScreen", "CreditsScreen" ) } );
 	var startButton = new createjs.Shape();
 	startButton.graphics.beginFill("#ffffff").drawRect(564, 520, 222, 65);
 	startButton.alpha = 0.1;
 	startButton.addEventListener( "click",  function(){ pubsub.publish( "SwitchScreen", "KitchenScreen" ) } );
 	stage.addChild( infoButton );
 	stage.addChild( creditsButton );
 	stage.addChild( startButton );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 //start button
 //difficulty selection
 }
 function KitchenScreen( stage ){
 	var that = this;
 	this.uiElems = [];
 	this.uiElems.push( new OvenUI( stage ) );
 	this.uiElems.push( new DialogUI( stage ) );
 	return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 }
 function MarketScreen( stage ){
 	var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 }
 function TurkeyOutScreen( stage ){
 		var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 }
 function EndingScreen( stage ){
 		var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 }
 function ScoreScreen( stage ){
 		var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 	// Retry Button
 }
 function CreditsScreen( stage ){
 		var that = this;
    this.background = new createjs.Bitmap( "res/Main.png" );
    stage.addChild( this.background );
    this.uiElems = [];
    return {
 		blit : function(){
 			// Draw all the uiElements
 	        for( var index in that.uiElems ){
 				that.uiElems[ index ].tick();
 			}
 		}
 	}
 	//
 }
 /* Object models */
 function TurkeyModel( weight ){
 	this.weight = weight;
 }
 function OvenModel(){
 	this.temperature = "";
 }
 function GameModel(){
 	this.timeElapsed = 0;
 	this.ovenModel = new OvenModel();
 	this.turkeyModel = new TurkeyModel();
 }
 function OvenUI( stage ){
 	var that = this;
 	this.ovenLight = new createjs.Shape();
 	this.analogClock = "";
 	this.text = new createjs.Text( "325F", "50px Arial", "#ff7700" );
 	this.text.x = 70;
 	this.text.y = 100;
 	this.text.textBaseline = "alphabetic";
    //Create a Shape DisplayObject.
    this.circle = new createjs.Shape();
    this.circle.graphics.beginFill( "red" ).drawCircle( 0, 0, 40 );
    this.ovenLight.graphics.beginFill( "red" ).drawCircle( 223, 73, 5 );
    //Set position of Shape instance.
    this.circle.x = this.circle.y = 50;
    this.picture = new createjs.Bitmap( "res/Base_Game_Screen.png" );
    //this.picture.scaleX = this.picture.scaleY = 0.5;
    stage.addChild( this.picture );
    stage.addChild( this.circle );
    stage.addChild( this.ovenLight );
    stage.addChild( this.text );
    return {
    	tick: function(){
    		// Circle will move 10 units to the right.
        	that.circle.x += 1;
        	// Will cause the circle to wrap back
        	if ( that.circle.x > stage.canvas.width ) { that.circle.x = 0; }
    	}
 	}
 }
 function DialogUI( stage ){
 	var that = this;
 	// Dialog States
 	var DIALOG_RECEDING = 0;
 	var DIALOG_SHOWING = 1;
 	var DIALOG_PAUSING = 2;
 	this.dialogSpeed = 25;
 	this.dialogState = DIALOG_PAUSING;
 	this.dialogMotionQueue = [DIALOG_RECEDING,DIALOG_SHOWING,DIALOG_RECEDING];
 	dialogQueue = [];
 	// Replace with bitmap
 	this.dialogBox = new createjs.Shape();
 	this.dialogBox.graphics.beginFill( "#00ffff" ).drawRect( 0, 450, 800, 150 );
 	stage.addChild( this.dialogBox );
    return {
    	tick: function(){
    		if( that.dialogState == DIALOG_RECEDING ){
 	    		that.dialogBox.y+=that.dialogSpeed;
 	    		console.log( "Receding" + that.dialogBox.y );
    		}
    		if( that.dialogState == DIALOG_SHOWING ){
    			that.dialogBox.y-=that.dialogSpeed;
    			console.log( "Advancing" + that.dialogBox.y );
    		}
    		// toggle states
    		if( that.dialogBox.y > 150 && that.dialogState == DIALOG_RECEDING ){
    			that.dialogBox.y = 150;
    			that.dialogState = DIALOG_PAUSING;
    			console.log( "Pausing on recede" + that.dialogBox.y );
    		}
    		if( that.dialogBox.y < 0 && that.dialogState == DIALOG_SHOWING ){
    			that.dialogBox.y = 0;
    			that.dialogState = DIALOG_PAUSING;
    			console.log( "Pausing on showing" + that.dialogBox.y );
    		}
    		/* next states if there are any on the queue */
    		if( that.dialogMotionQueue.length > 0 && that.dialogState == DIALOG_PAUSING ){
    			that.dialogState = that.dialogMotionQueue.pop();
    		}
    	},
    	minDialog: function(){
    		that.dialogMotionQueue.push( DIALOG_RECEDING );
    	},
    	maxDialog: function(){
    		that.dialogMotionQueue.push( DIALOG_SHOWING );
    	},
 	}
 }
 function Dialogue( character, text ){
 	var that = this;
 	this.text = text;
 	this.character = character;
 	return {
 		getText: function(){
 			return that.text;
 		},
 		getCharacter: function(){
 			return that.character;
 		},
 		getDuration: function(){
 		// length of text, for each dialog
 		},
 	}
 	// Render one character at a time
 }
 var pubsub = {};
 (function(q) {
    var topics = {}, subUid = -1;
    q.subscribe = function(topic, func) {
        if (!topics[topic]) {
            topics[topic] = [];
        }
        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        });
        return token;
    };
    q.publish = function(topic, args) {
        if (!topics[topic]) {
            return false;
        }
        setTimeout(function() {
            var subscribers = topics[topic],
                len = subscribers ? subscribers.length : 0;
            while (len--) {
                subscribers[len].func(args);
            }
        }, 0);
        return true;
    };
    q.unsubscribe = function(token) {
        for (var m in topics) {
            if (topics[m]) {
                for (var i = 0, j = topics[m].length; i < j; i++) {
                    if (topics[m][i].token === token) {
                        topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };
 }(pubsub));
--- a/res/Base_Game_Screen.png
+++ b/res/Base_Game_Screen.png
--- a/res/Loading-Title.png
+++ b/res/Loading-Title.png
--- a/res/Main.png
+++ b/res/Main.png
--- a/res/Untitled-1.png
+++ b/res/Untitled-1.png