Sprite Sheet Handling Using Phaser

Phaser is a nice framework for html5 game development below is the link for handling sprite sheets and keyboard handling and used to learn the control of sprite sheets using keyboards

Phaser Framework File

Sprite sheet loading source

Note: Download the Framework file and place it near to the html file

Sprite sheet handling in HTML5

We can able to handle the spritesheet easily in HTML5 below URL is help full to you get the source for the spritesheet handling .In the file i use Image function for to load the sprite sheet PNG file and i use Texture packer software to get the json format data for the spritesheet , After sprite sheet loaded successfully i use drawImage function for draw the spritesheet data with corresponding x&y positions and height & width and i use keyboard control also for the animate the sprite sheet

Avatar Move.rar

Simple Score Board Logic in HTML5

In the below Url you can get the simple score board display logic using HTML5 , In the file i use 2 static array with name and dates and i draw a rectangle and place 2 text boxes in the rectangle one is used to display name and another is used to display date using the interval function i move the rectangle box one by one up to 10 so we can use this to display the top 10 scores of a game

ScoreCard.zip

Google API Authentication Example

The below url used to get the google oAuth Authentication process and used to get the user info from google account and used to get the user image & name & Birthday from Google Account

google.html

Simple Paint Application in HTML5

In the Below link is used to get source for to create a Simple Drawing Application using HTML5

Using that app you can draw whatever you like in different colors, In the App you have color box to choose the different colors and Draw in canvas

PaintApp.zip

Class splitting Example in HTML5

In the Below link is used to get source to

1) draw arc

2) class splitting logic

3) Mouse Click Event for the specified objects in HTML5

class Split.zip

Rotate a single image in HTML5

In the below Url used to get the source to draw an image in HTML5 canvas tag and it used rotate a single image in a same HTML5 canvas

draw.zip