Home‎ > ‎

fun2hit

Import Engine.js (Javascript Library) in your index page.

<script type="text/javascript" src="engine.js"></script>

some important function in engine.js file

drawImage(uri, x, y) - use to draw image 

drawImageFrame(uri,xOffset, yOffset, w, h, x, y) - use to draw image portion from image

create a file game.js where JSON data stored in Javascript file and import in index file

<script type="text/javascript" src="game.js"></script>

Initialize the doc object with app name Fun2Hit.

doc = 
{
'Fun2Hit' :
{
'type' : 'game' ,
'widgets' : ['LOADING_BAR', 'MENU'],
'currentScene' : 'LOADING_BAR'
},
}

doc is object which pass JSON data in engine.
widgets : all scene 
currentScene : desired scene will execute

the first scene execute in game is loading bar which pre-load the images for game.



"LOADING_BAR":
{
'type' : 'scene',
'time' : 0 ,
'visible' : true,
'state' : 1 ,
'images' :
[
{
'uri' : "images/openclass.png",
'object' : undefined,
'loaded' :false
},
],
"frames": [
{'image':0,'xOffset':0,'yOffset':0, 'width': 150,'height': 102}, // 0 - Logo
{'image':1,'xOffset':0,'yOffset':0, 'width': 121,'height': 158}, // 0 - Logo
],
"execute" : function()
{
if (doc['LOADING_BAR']['state'] != -1)
{
drawRect(0,0,430,378,'fill', 0, undefined, 'white') ;
drawFrame('LOADING_BAR',0, 140, 95) ; // LOGO
drawRect(125,208,180,15,'stroke', 0, undefined, '#037619') ;
drawRect(126,209,tick,13,'fill', 0, undefined, '#23f54a') ;
if(tick > 175)
{
updateWidget('SPLASH_SCREEN',1) ;
}
}
}
},

Loading Bar is scene,

Properties :
time : 0 (initializer the time for timer)
visible : true (scene is visible)
state : 1 (declare the current state of scene)
images : array, frames array.
execute : execute the frames and function which inside this function.

drawRect : Draw Rectangle function define in engine.js file which is used to create rectangle
drawFrame : Draw Frame function define in engine.js file which is used to draw particular image area from image that define in images array.

Creating Menu Screen for Game


Create Menu scene with 4 state
state1 = New Game (Default)
state2 = About Us
state3 = Help
state4 = Invite

state change based on Mouse action.

"MENU":
{
'type' : 'scene',
'time' : 0 ,
'visible' : true,
'state' : 1 ,
'subState' : 0 ,
'images' :
[
{
'uri' : "images/BackgroundMenu.png",
'object' : undefined,
'loaded' : false
},
{
'uri' : "images/buttons.png",
'object' : undefined,
'loaded' : false
},
],
"frames" :
[
{'image':0,'xOffset':   0,'yOffset':0, 'width': 430,'height': 378}, // 0 - Back
{'image':1,'xOffset':   0,'yOffset':0, 'width': 178,'height':  48}, // 1 - MENU BUTTON
{'image':1,'xOffset': 534,'yOffset':0, 'width': 157,'height':  44}, // 2 - New Game
{'image':1,'xOffset': 691,'yOffset':0, 'width': 157,'height':  44}, // 3 - New Game (S)
{'image':1,'xOffset':1162,'yOffset':0, 'width': 157,'height':  44}, // 4 - About Us
{'image':1,'xOffset':1319,'yOffset':0, 'width': 157,'height':  44}, // 5 - About Us (S)
{'image':1,'xOffset':1476,'yOffset':0, 'width': 157,'height':  44}, // 6 - Help
{'image':1,'xOffset':1633,'yOffset':0, 'width': 157,'height':  44}, // 7 - Help (S)
{'image':1,'xOffset':2337,'yOffset':0, 'width': 157,'height':  44}, // 8 - Exit
{'image':1,'xOffset':2492,'yOffset':0, 'width': 157,'height':  44}, // 9 - Exit (S)
{'image':2,'xOffset':   0,'yOffset':0, 'width': 121,'height': 158}, // 0 - Logo
],
"execute" : function()
{
var state = doc['MENU']['state'] ;
var x1 = 140 ;
var x2 = 140 ;
var x3 = 140 ;
var x4 = 140 ;
var y1 = 110 ;
var y2 = 160 ;
var y3 = 210 ;
var y4 = 260 ;
// Button : New Game
if(x1 <= mouseOverX && x1 + 157 >= mouseOverX && y1 <= mouseOverY && y1 + 44 >= mouseOverY)
{
updateWidget('MENU',1) ;
}
else if(x2 <= mouseOverX && x2 + 157 >= mouseOverX && y2 <= mouseOverY && y2 + 44 >= mouseOverY)
{
updateWidget('MENU',2) ;
}
else if(x3 <= mouseOverX && x3 + 157 >= mouseOverX && y3 <= mouseOverY && y3 + 44 >= mouseOverY)
{
updateWidget('MENU',3) ;
}
else if(x4 <= mouseOverX && x4 + 157 >= mouseOverX && y4 <= mouseOverY && y4 + 44 >= mouseOverY)
{
updateWidget('MENU',4) ;
}
//drawRect(0,0,430,60,'fill', 0, undefined, '#01a7ea') ;
drawFrame('MENU', 0, 0, 0); // Background
drawFrame('MENU', 1, 130, 35); // Menu Caption
//drawFrame('MENU', 10, 95, 30); // Background
// Default New Game Selected
if(state == 1)
{
drawFrame('MENU', 3, 140, 110); // 2 - New Game (S)
drawFrame('MENU', 4, 140, 160); // 4 - About Us
drawFrame('MENU', 6, 140, 210); // 6 - Help
drawFrame('MENU', 8, 140, 260); // 8 - Exit
}
// About Us Selected
else if(state == 2)
{
drawFrame('MENU', 2, 140, 110); // 2 - New Game
drawFrame('MENU', 5, 140, 160); // 5 - About Us (S)
drawFrame('MENU', 6, 140, 210); // 6 - Help
drawFrame('MENU', 8, 140, 260); // 8 - Exit
}
// Help Selected
else if(state == 3)
{
drawFrame('MENU', 2, 140, 110); // 2 - New Game
drawFrame('MENU', 4, 140, 160); // 4 - About Us
drawFrame('MENU', 7, 140, 210); // 7 - Help (S)
drawFrame('MENU', 8, 140, 260); // 8 - Exit
}
// Exit Selected
else if(state == 4)
{
drawFrame('MENU', 2, 140, 110); // 2 - New Game
drawFrame('MENU', 4, 140, 160); // 4 - About Us
drawFrame('MENU', 6, 140, 210); // 6 - Help (S)
drawFrame('MENU', 9, 140, 260); // 9 - Exit (S)
}
// Button : New Game
if(x1 <= mouseX && x1 + 157 >= mouseX && y1 <= mouseY && y1 + 44 >= mouseY)
{
updateWidget('LEVEL_1','run') ;
doc['User']['state'] = 'stand' ;
life = 5 ;
doc['LEVEL_1']['maxBalloon'] = 99 ; // Reset Balloon Value
updateHits() ; // Reset hits value
}
else if(x2 <= mouseX && x2 + 157 >= mouseX && y2 <= mouseY && y2 + 44 >= mouseY)
{
updateWidget('ABOUT_US',0) ;
}
else if(x3 <= mouseX && x3 + 157 >= mouseX && y3 <= mouseY && y3 + 44 >= mouseY)
{
updateWidget('HELP',0) ;
}
else if(x4 <= mouseX && x4 + 157 >= mouseX && y4 <= mouseY && y4 + 44 >= mouseY)
{
if(doc['MENU']['subState'] == 0)
{
popup() ;
doc['MENU']['subState'] = 1 ;
}
}
if(keyDownCode == 40)
{
if(state > 3)
{
state = 1 ;
}
else
{
state += 1 ;
}
updateWidget('MENU',state) ;
}
else if(keyDownCode == 38)
{
if(state < 2)
{
state = 4 ;
}
else
{
state -= 1 ;
}
updateWidget('MENU',state) ;
}
else if(keyDownCode == 13)
{
switch (state)
{
// New Game
case 1 :
{
updateWidget('LEVEL_1','run') ;
doc['User']['state'] = 'stand' ;
life = 5 ;
doc['LEVEL_1']['maxBalloon'] = 99 ; // Reset Balloon Value
updateHits() ; // Reset hits value
break ;
}
// About US Screen
case 2 :
{
updateWidget('ABOUT_US',0) ;
break ;
}
// Help Screen
case 3 :
{
updateWidget('HELP',0) ;
break ;
}
// Exit Screen
case 4 :
{
popup();
break ;
}
}
}
}
},

Sample Widget for Creating Animation

"bus_Right":
{
'type' : 'layer',
'visible' : true,
'state' : -1 ,
'hit' : 1 ,
'currentFrame' : -1 ,
'x' : -115 ,
'y' : 210,
'frame' : 0,
'images' :
[
{
'uri' : "images/bus.png",
'object': undefined,
'loaded': false
}
],
"frames": [
{'image':0,'xOffset':0,'yOffset':0, 'width': 130,'height': 115}, // Frame2 - 2
{'image':0,'xOffset':130,'yOffset':0, 'width': 130,'height': 115}, // Frame2 - 3
{'image':0,'xOffset':260,'yOffset':0, 'width': 130,'height': 115}, // Frame2 - 3
],
"aData" :
{
"cIndex":0 ,
"slow":
[
{'dx':4,'dy':0,'frame':0},
{'dx':3,'dy':0,'frame':0},
{'dx':4,'dy':0,'frame':1},
{'dx':3,'dy':0,'frame':1},
],
"hit":
[
{'dx':4,'dy':0,'frame':0},
{'dx':3,'dy':0,'frame':1},
{'dx':3,'dy':0,'frame':2},
{'dx':3,'dy':0,'frame':2},
{'dx':3,'dy':0,'frame':2},
{'dx':3,'dy':0,'frame':2},
{'dx':3,'dy':0,'frame':2},
{'dx':3,'dy':0,'frame':2},
{'dx':3,'dy':0,'frame':2},
],
"stop":
[
{'dx':0,'dy':0,'frame':0},
{'dx':0,'dy':0,'frame':0},
]
}
,
"execute" : function()
{
if(doc['bus_Right']['x'] > 430)
{
updateWidget('bus_Right',-1) ;
}
if(doc['bus_Right']['state'] == 'slow')
{
drawAnimation('bus_Right','slow') ;
}
else if(doc['bus_Right']['state'] == 'stop')
{
drawAnimation('bus_Right','stop') ;
}
else if(doc['bus_Right']['state'] == 'hit')
{
drawAnimation('bus_Right','hit') ;
if(doc['bus_Right']['aData']['cIndex'] == 8)
{
doc['bus_Right']['state'] = 'slow' ;
doc['bus_Right']['aData']['cIndex'] = 0 ;
}
}
}
},

images : array contain image file location
frames : image frame based on images array
aData : Animation data contain animation sequence of x and y position eg. (dx : 4 and dy : 0) add x = 4 to its x value and y = 0 to its y value

in execution function state = slow. when state == slow the desired animation start

"bus_Left":
{
'type' : 'layer',
'visible' : true,
'state' : -1 ,
'hit' : 1 ,
'currentFrame' : -1 ,
'x' : 430 ,
'y' : 257,
'frame' : 0,
'images' :
[
{
'uri' : "images/bus.png",
'object': undefined,
'loaded': false
}
],
"frames": [
{'image':0,'xOffset':650,'yOffset':0, 'width': 130,'height': 115}, // Frame2 - 2
{'image':0,'xOffset':520,'yOffset':0, 'width': 130,'height': 115}, // Frame2 - 3
{'image':0,'xOffset':390,'yOffset':0, 'width': 130,'height': 115}, // Frame2 - 3
],
"aData" :
{
"cIndex":0 ,
"slow":
[
{'dx':-3,'dy':0,'frame':0},
{'dx':-2,'dy':0,'frame':0},
{'dx':-3,'dy':0,'frame':1},
{'dx':-2,'dy':0,'frame':1},
],
"hit":
[
{'dx':-4,'dy':0,'frame':0},
{'dx':-3,'dy':0,'frame':1},
{'dx':-3,'dy':0,'frame':2},
{'dx':-3,'dy':0,'frame':2},
{'dx':-3,'dy':0,'frame':2},
{'dx':-3,'dy':0,'frame':2},
{'dx':-3,'dy':0,'frame':2},
{'dx':-3,'dy':0,'frame':2},
{'dx':-3,'dy':0,'frame':2},
],
"stop":
[
{'dx':0,'dy':0,'frame':0},
{'dx':0,'dy':0,'frame':0},
]
}
,
"execute" : function()
{
if(doc['bus_Left']['x'] < -130)
{
updateWidget('bus_Left',-1) ;
}
if(doc['bus_Left']['state'] == 'slow')
{
drawAnimation('bus_Left','slow') ;
}
else if(doc['bus_Left']['state'] == 'stop')
{
drawAnimation('bus_Left','stop') ;
}
else if(doc['bus_Left']['state'] == 'hit')
{
drawAnimation('bus_Left','hit') ;
if(doc['bus_Left']['aData']['cIndex'] == 8)
{
doc['bus_Left']['state'] = 'slow' ;
doc['bus_Left']['aData']['cIndex'] = 0 ;
}
}
}
}, 

images : array contain image file location
frames : image frame based on images array
aData : Animation data contain animation sequence of x and y position eg. (dx : -3 and dy : 0) add x = -3 to its x value and y = 0 to its y value

create scene LEVEL_1 and append the widget.

"LEVEL_1":
{
'type' : 'scene' ,
'time' : 0 ,
'widgets' : 
[
    "bus_Right" , "bus_Left"
] ,
"execute": function()
{
var time = doc['LEVEL_1']['time'] ;

                        // To call the bus widget to start animation
                        doc['bus_Right']['state'] = 'slow' ;

}
        }

Controlling User Character with Keyboard

ASCII Code :
Left Arrow - 37
Right Arrow - 39
Space Bar - 32

// Controlling User
// Left Arrow Key
if(keyDownCode == 37 && doc['User']['state'] != 'left')
{
doc['User']['aData']['cIndex'] = 0 ;
doc['User']['state'] = 'left' ;
}
// Right Arrow Key Down
if(keyDownCode == 39 && doc['User']['state'] != 'right')
{
doc['User']['aData']['cIndex'] = 0 ;
doc['User']['state'] = 'right' ;
}
// Throw (Down Arrow Key)
else if(keyDownCode == 32 && doc['User']['state'] != 'throw')
{
doc['User']['aData']['cIndex'] = 0 ;
doc['User']['state'] = 'throw' ;
}
else if(keyDownCode == 32) // Stand (Up Arrow Key)
{
doc['User']['aData']['cIndex'] = 0 ;
doc['User']['state'] = 'stand' ;
}
// Left Arrow Key Up
if(keyUpCode == 37 || keyUpCode ==39 || keyUpCode == 32)
{
doc['User']['aData']['cIndex'] = 0 ;
doc['User']['state'] = 'stand' ;
}

Creating Balloons

"Balloon1":
{
'type' : 'layer',
'visible' : true,
'state' : -1 ,
'currentFrame' : -1 ,
'x' : 10 ,
'y' : 10,
'frame' : 0,
'images' :
[
{
'uri' : "images/balloons.png",
'object': undefined,
'loaded': false
}
],
"frames": [
// Red Balloon
{'image':0,'xOffset':0,'yOffset':0, 'width': 13,'height': 15}, // 0
],
"execute" : function()
{
if (doc['Balloon1']['state'] != -1)
{
// Balloons X and Y
doc['Balloon1']['y'] += 19 ;
drawFrame('Balloon1', 0, doc['Balloon1']['x'], doc['Balloon1']['y']) ; // Balloons
}
}
},

When throwing balloons, x and y need to be set based on user x and y.

Mix up all together to create a level

"LEVEL_1":
{
'type' : 'scene' ,
'state' : 'run' ,
'maxBalloon' : 99 ,
'time' : 0 ,
'widgets' : 
        [
        'Background','balloonValue','User'
] ,
"execute": function()
{
var time = doc['LEVEL_1']['time'] ;
doc['lifeValue']['value']         = life ;
doc['scoreValue']['value'] = score ;
doc['balloonValue']['value']   = doc['LEVEL_1']['maxBalloon'] ;
if(doc['LEVEL_1']['state'] == 'run')
{
// Widget visible based on timer
                                if(time == 0)
{
// Widget Data
}

                                // Controlling User
                                // Left Arrow Key
                                if(keyDownCode == 37 && doc['User']['state'] != 'left')
                                {
                               doc['User']['aData']['cIndex'] = 0 ;
                               doc['User']['state']  = 'left' ;
                                }
                                // Right Arrow Key Down
                                if(keyDownCode == 39 && doc['User']['state'] != 'right')
                                {
                               doc['User']['aData']['cIndex'] = 0 ;
                               doc['User']['state']  = 'right' ;
                                }
                                // Throw (Down Arrow Key)
                                else if(keyDownCode == 32 && doc['User']['state'] != 'throw')
                                {
                                    doc['User']['aData']['cIndex']  = 0 ;
                                doc['User']['state']  = 'throw' ;
                                }
                                else if(keyDownCode == 32) // Stand (Up Arrow Key)
                                {
                                doc['User']['aData']['cIndex']  = 0 ;
                               doc['User']['state']  = 'stand' ;
                                }
                                // Left Arrow Key Up
                                if(keyUpCode == 37 || keyUpCode ==39 || keyUpCode == 32)
                                {
                                    doc['User']['aData']['cIndex']  = 0 ;
                               doc['User']['state']  = 'stand' ;
                                }
                        }
                }
        }
Comments