State-manager.js

Download on github

Use

State-manager.js is powerful for your game development because you can switch lvl or menu as you want easy. but you need to adopt object structure like a mini framework. work on canvas 2d and canvas 3d just work with threejs. So how to use it :

					
						<script src="js/State-manager.min.js.min.js"></script>
						<script src="js/state1.js"></script>
						<script src="js/state2.js"></script>
						<script src="js/state3.js"></script>
						<script src="js/state4.js"></script>
						<script src="js/state5.js"></script>
						<script src="js/main.js"></script>
					

				
					
						var menu = {
							state : new State(true, "canvas2d"),    // need to create state property like this
														// true for the first state active
														// canvas2d or threejs 

							init : function(){ // need to proced with init function its call with state-manager
											menu.titlePlay = "Play";
											menu.titleCustomStuff = "CustomStuff";
											menu.titleOption = "Option";
											menu.titleScore = "Score";

											// draw the menu
											ctx.font = "30px Helvetica";
											ctx.fillStyle ="#fff";
											ctx.fillText(menu.titlePlay, 450, 300);
											ctx.fillText(menu.titleCustomStuff, 450, 400);
											ctx.fillText(menu.titleOption, 450, 500);
											ctx.fillText(menu.titleScore, 450, 600);
							}
						};
					
				
					
						// test canvas & context
						var canvas = document.getElementById('canvas');
						if(!canvas){
							alert("Impossible de récupérer le canvas");

						}

						var ctx = canvas.getContext('2d');

						if(!ctx){
							alert("Impossible de récupérer le context du canvas");

						}
						menu.state.initState(menu); // init state menu here
					

				
					
						//mapping for click
						$('#canvas').on('click',function (e) {
							var clickedX = e.pageX - this.offsetLeft; // take coord of page
							var clickedY = e.pageY - this.offsetTop; // take coord of page

							if ( clickedX > 420 && clickedX < 580 && clickedY > 250 && clickedY < 320){
								$('#canvas').off();
								menu.state.changeState(state2, menu, ctx); // here we change state
														// state2 is the state we want
														// menu is the state we were
														// ctx is the context of my canvas2d	
							}
							if ( clickedX > 420 && clickedX < 700 && clickedY > 350 && clickedY < 420){
								$('#canvas').off();
								menu.state.changeState(state3, menu, ctx); //change state	
							}
							if ( clickedX > 420 && clickedX < 600 && clickedY > 480 && clickedY < 520){
								$('#canvas').off();
								menu.state.changeState(state4, menu, ctx); //change state		
							}
							if ( clickedX > 420 && clickedX < 580 && clickedY > 550 && clickedY < 620){
								$('#canvas').off();
								menu.state.changeState(state5, menu, ctx) ;//change state		
							}
						});
					

				

Demo

big design for this exemple ;)