Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Italy, Reggio Emilia, Campegine
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML5 Javascript Game Engine

    Hello Everybody... I have been working on something that everyone could need.
    It's a Javascript Library that I called FGGE (FabioGiopla Game Engine).

    Why am I posting it here?
    Well... I am new for this forum, but the error I found in my Lib has been solved here, so you can consider it as a reward for your help.

    What is it actually?
    It's an HTML5 Javascript Game Engine, it's so simple that in 137 lines of code I written a simple old school ping-pong game fully commented!

    My Library's Code (To place in "FGGE.JS")
    Code:
    /* FGGE - FabioGiopla Game Engine
     * Coded by Fabio Iotti
     */
    
    function FGGE()
    {
    	var clickMouse = false;
    	
    	var root = this;
    	
    	this.mouseX = 0;
    	this.mouseY = 0;
    	
    	this.Canvas;
    	this.Context2D;
    	
    	this.FPS = 15;
    	
    	this.totalExternals = 0;
    	this.loadedExternals = 0;
    	
    	var startingGame = false;
    	
    	var gameCycleIntervalID;
    	var gameCycleFunction;
    	
    	var readyFunction;
    	
    	this.Layer = new Array();
    	
    	function getCursorPosition(e)
    	{
    		// SNIPPET: http://tinyurl.com/3r6kcqf
    		var x;
    		var y;
    		if (e.pageX || e.pageY)
    		{
    			x = e.pageX;
    			y = e.pageY;
    		}
    		else
    		{
    			x = e.clientX + document.body.scrollLeft +
    					document.documentElement.scrollLeft;
    			y = e.clientY + document.body.scrollTop +
    					document.documentElement.scrollTop;
    		}
    
    		x -= root.Canvas.offsetLeft;
    		y -= root.Canvas.offsetTop;
    
    		return [x,y];
    	}
    	
    	function upDateMouse(e)
    	{
    		root.mouseX = getCursorPosition(e)[0];
    		root.mouseY = getCursorPosition(e)[1];
    	}
    	
    	function upDateMouseDown(e)
    	{
    		clickMouse = true;
    	}
    	
    	function upDateMouseUp(e)
    	{
    		clickMouse = false;
    	}
    	
    	this.makeEnvironment = function(tag)
    	{
    		this.Canvas = document.createElement("canvas");
    		tag.appendChild(this.Canvas);
    
    		this.Context2D = this.Canvas.getContext('2d');
    	};
    	
    	this.setBackgroundColor = function(color)
    	{
    		this.Canvas.style.backgroundColor = color;
    	};
    	
    	this.addLayer = function(layer)
    	{
    		this.Layer.push(layer);
    	};
    	
    	this.loadImage = function(image)
    	{
    		root.totalExternals++;
    		image.onload = function()
    		{
    			root.loadedExternals++;
    			
    			if(root.loadedExternals >= root.totalExternals)
    			{
    				if(readyFunction != undefined)
    					readyFunction();
    				
    				if(startingGame == true)
    					root.forceStartGame();
    			}
    		};
    	};
    	
    	this.callWhenReady = function(rdfun)
    	{
    		readyFunction = rdfun;
    	};
    	
    	this.startGame = function()
    	{
    		startingGame = true;
    		
    		if(root.loadedExternals >= root.totalExternals)
    		{
    			if(readyFunction != undefined)
    				readyFunction();
    			
    			root.forceStartGame();
    		}
    	};
    	
    	this.forceStartGame = function()
    	{
    		startingGame = false;
    		
    		if(gameCycleIntervalID == undefined)
    			gameCycleIntervalID = setInterval(root.updateGame, 1000/root.FPS);
    			
    		root.Canvas.addEventListener("mousemove", upDateMouse, false);
    		root.Canvas.addEventListener("mouseup", upDateMouseUp, false);
    		root.Canvas.addEventListener("mousedown", upDateMouseDown, false);
    	};
    	
    	this.updateGame = function()
    	{
    		root.clearScreen();
    
    		if(gameCycleFunction)
    		{
    			try
    			{
    				gameCycleFunction();
    			}
    			catch(error)
    			{
    				clearInterval(gameCycleIntervalID);
    				gameCycleIntervalID = undefined;
    				
    				alert(error);
    			}
    		}
    		
    		try
    		{
    		for(var layerNum = 0; layerNum < root.Layer.length; layerNum++)
    		{
    			for(var modelNum = 0; modelNum < root.Layer[layerNum].Model.length; modelNum++)
    			{
    				root.Context2D.drawImage(
    				root.Layer[layerNum].Model[modelNum].getImage(),
    				root.Layer[layerNum].Model[modelNum].x - root.Layer[layerNum].Model[modelNum].centerX,
    				root.Layer[layerNum].Model[modelNum].y - root.Layer[layerNum].Model[modelNum].centerY
    				);
    			}
    		}
    		}
    		catch(error)
    		{
    			alert("Layer: "+layerNum+"\nModel: "+modelNum+"\n\n"+error);
    		}
    	};
    	
    	this.setGameCycleFunction = function(gcFunction)
    	{
    		gameCycleFunction = gcFunction;
    	}
    	
    	this.clearScreen = function()
    	{
    		root.Context2D.clearRect(0, 0, root.Canvas.width, root.Canvas.height);
    	}
    }
    
    function Layer()
    {
    	this.Model = new Array();
    	
    	this.addModel = function(model)
    	{
    		this.Model.push(model);
    	};
    }
    
    function Model()
    {
    	var root = this;
    	
    	this.x = 0;
    	this.y = 0;
    	
    	this.xScale;
    	this.yScale;
    	
    	this.centerX = 0;
    	this.centerY = 0;
    	
    	this.alpha;
    	
    	this.rot;
    	
    	var image;
    	
    	var width;
    	var height;
    	
    	this.detectPointCollision = function(pointX, pointY)
    	{
    		if(pointX > root.x - root.centerX && pointX < root.x - root.centerX + width)
    		{
    			if(pointY > root.y - root.centerY && pointY < root.y - root.centerY + height)
    			{
    				return true;
    			}
    		}
    		
    		return false;
    	};
    	
    	this.getImage = function()
    	{
    		return image;
    	};
    	
    	this.getWidth = function()
    	{
    		return width;
    	};
    	
    	this.getHeight = function()
    	{
    		return height;
    	};
    	
    	this.applyImage = function(imageo)
    	{
    		image = imageo;
    		width = imageo.width;
    		height = imageo.height;
    	};
    }
    An example HTML Code (make it "ping-pong.html"):
    Code:
    <html>
    	<head>
    		<title>FGGE - Test Zone</title>
    		<script type="text/javascript" src="FGGE.JS"></script>
    	</head>
    	<body>
    		<div id="fgge_sandbox"></div>
    		<script type="text/javascript">
    			// Generate a new game...
    			var myGame = new FGGE;
    			
    			// ...and give it an environment where to show.
    			myGame.makeEnvironment(document.getElementById("fgge_sandbox"));
    			
    			// I like black, so set a black background.
    			myGame.setBackgroundColor("#000000");
    			
    			// Set the size of the window.
    			myGame.Canvas.width = 800;
    			myGame.Canvas.height = 600;
    			
    			// Make a new layer containing bouncers and one for the ball.
    			var bouncersLayer = new Layer;
    			var ballLayer = new Layer;
    			
    			// Make 2 bouncers, one for player and one for computer, and a ball.
    			var bouncer1 = new Model;
    			var bouncer2 = new Model;
    			var ball = new Model;
    			
    			// In this engine everything is an image, so make some...
    			var bouncerImage = new Image();
    			bouncerImage.src = "bouncer.png";
    			
    			var ballImage = new Image();
    			ballImage.src = "ball.png";
    			
    			// ...and tell the engine to load it (game won't start until all images are loaded)...
    			myGame.loadImage(bouncerImage);
    			myGame.loadImage(ballImage);
    
    			// ...then apply it to the bouncers.
    			bouncer1.applyImage(bouncerImage);
    			bouncer2.applyImage(bouncerImage);
    			ball.applyImage(ballImage);
    
    			// Add the bouncers to their layer, ball to it's one...
    			bouncersLayer.addModel(bouncer1);
    			bouncersLayer.addModel(bouncer2);
    			ballLayer.addModel(ball);
    			
    			// ...and layers to the game.
    			myGame.addLayer(bouncersLayer);
    			myGame.addLayer(ballLayer);
    			
    			// If we don't wait for images to be loaded, getWidth() and getHeight() may work bad.
    			myGame.callWhenReady(function()
    			{
    				// To help coding, set the center of objects to the center of the image (by default center is top-left corner)...
    				// ...setting center will move x and y position.
    				ball.centerX = ball.getWidth()/2;
    				ball.centerY = ball.getHeight()/2;
    				
    				bouncer1.centerY = bouncer1.getHeight()/2;
    				
    				bouncer2.centerY = bouncer2.getHeight()/2;
    				bouncer2.centerX = bouncer2.getWidth();
    			});
    			
    			// Set models places.
    			bouncer1.x = 10;
    			bouncer1.y = 10;
    			
    			bouncer2.x = myGame.Canvas.width - 10;
    			bouncer2.y = 10;
    			
    			ball.x = myGame.Canvas.width/2;
    			ball.y = myGame.Canvas.height/2;
    			
    			// We set a funtion for the engine
    			var ballSpeedX = 10;
    			var ballSpeedY = 0;
    			
    			myGame.setGameCycleFunction(function()
    			{
    				bouncer2.y -= (bouncer2.y-ball.y)/3;
    
    				bouncer1.y = myGame.mouseY;
    				
    				// WARNING: Collision detectors work only in a single frame, so, if the ball is too fast, it may pass through bouncer!
    				// 			For this reason, never use FGGE Native collision detector for rapidly moving small objects.
    				
    				if(bouncer1.detectPointCollision(ball.x - ball.getWidth()/2, ball.y))
    				{
    					var difference = bouncer1.y - ball.y;
    					
    					ballSpeedY = -difference/2;
    					
    					if(difference < 0)
    						difference *= -1;
    					
    					ballSpeedX = 15-difference/6;
    				}
    				else if(bouncer2.detectPointCollision(ball.x + ball.getWidth()/2, ball.y))
    				{
    					var difference = bouncer2.y - ball.y;
    					
    					ballSpeedY = -difference/2;
    					
    					if(difference < 0)
    						difference *= -1;
    					
    					ballSpeedX = -15+difference/6;
    				}
    				
    				if(ball.y < 0 || ball.y > myGame.Canvas.height)
    					ballSpeedY *= -1;
    				
    				ball.x += ballSpeedX;
    				ball.y += ballSpeedY;
    				
    				if(ball.x < 0 || ball.x > myGame.Canvas.width)
    				{
    					if(ball.x < 0)
    						ballSpeedX = 10;
    					else
    						ballSpeedX = -10;
    					
    					ballSpeedY = 0;
    					
    					ball.x = myGame.Canvas.width/2;
    					ball.y = myGame.Canvas.height/2;
    				}
    			});
    			
    			// And tell engine to start the game (when ready).
    			myGame.startGame();
    		</script>
    	</body>
    </html>
    Just add two images "bouncer.png" 15x50 and "ball.png" 16x16 fully white to have a ready to play game!

    I am waiting for comments and suggestions... Thanks for reading!
    Attached Files Attached Files


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •