This article is to discuss about online game programming.In other words how to make a game
in html . Nothing to think further the option is jquery.
There are any jquery games examples are available in internet.But here I am
introducing a free online ball game coded in jquery.This is padd and ball game.The padd
move with mouse movement.We may save the ball from fall to the ground.I think
this is a simple jquery game.
You can see the working of game which I named Hit Ball before go through this
jquery game source code.
You can download the source code from here
http://sukeshbr.byethost3.com/Blog_Works/hit_ball/hit_ball.zip
Here have two html files g1.html and end.html.
Code
Code description
Let we start from g1.html. In the body section I placed two images namely bar and ball .
The images for this is in the image folder which can be download from above.You can see another
four images.They are the bricks placed above the bar.
In the css section , there are the code to position correctly the bricks , padd and ball.
In the jquery section in the mousemove event the code to move the padd is written.m is
the mouse object m.pageX gives the x cordinate of mouse pointer m.pageY gives the y cordinte of
mouse position. Here we change only the left property of bar image with m.pageX.
We wont change the y cordinate.Because we need to move the padd in horizontal direction
only.
window.setInterval() is another event used to execute a particular block iteratively
in a particular time interval.in this function getTAdd() is called to get the tadd which is added to the y position of the ball.
getLAdd() is called to get the ladd which is added to the x position of the ball.
The variable status returned from getStatus() determine that the game is active or
game over or win in the game.
In the functions getTAdd(),getLAdd() and getStatus() the ladd , tadd and staus is calculated
by analysing the position of ball and padd. If the ball is hit the left half of padd the ladd will be +2.
If the ball is hit the right half of padd the ladd will be -2. If the ball position come near to the walls the ladd is multiplied with -1. Thus the ladd change to opposite value. This will gives a good flow to ball.
In the top when come near to the top wall or bricks the tadd is multiplied with minus.
So the ball then move to downward direction.When ball come near to a brick this the
brick will be removed using remove() method.
This is only a brief description.Hope that you can understand the core.
You can also read :-
in html . Nothing to think further the option is jquery.
There are any jquery games examples are available in internet.But here I am
introducing a free online ball game coded in jquery.This is padd and ball game.The padd
move with mouse movement.We may save the ball from fall to the ground.I think
this is a simple jquery game.
You can see the working of game which I named Hit Ball before go through this
jquery game source code.
You can download the source code from here
http://sukeshbr.byethost3.com/Blog_Works/hit_ball/hit_ball.zip
Here have two html files g1.html and end.html.
Code
g1.html
<html>
<head>
<style type="text/css">
*{ margin: 0;
padding: 0}
#bar{
position:absolute;
left:200px;
width:130px;
height:20px;
}
#ball{
position:absolute;
left:270px;
width:20px;
height:20px;
}
#plain{
width:97%;
height:95%;
border:10px solid #000000;
background:#ccffff;
}
#block_red1{
position:absolute;
top:100px;
left:50px;
width:50px;
height:25px;
}
#block_blue1{
position:absolute;
top:100px;
left:100px;
width:50px;
height:25px;
}
#block_red2{
position:absolute;
top:100px;
left:150px;
width:50px;
height:25px;
}
#block_pink1{
position:absolute;
top:100px;
left:200px;
width:50px;
height:25px;
}
#block_blue2{
position:absolute;
top:100px;
left:250px;
width:50px;
height:25px;
}
#block_pink2{
position:absolute;
top:100px;
left:300px;
width:50px;
height:25px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bar").css("top", window.innerHeight-80);
$("#ball").css("top", window.innerHeight-100);
var click_stat=false;
//Code to move bar
$(document).mousemove(function(m){
$("#body").css('cursor', 'none');
if(m.pageX>10&&m.pageX<window.innerWidth-180)
{
$("#bar").css({"left":m.pageX});
if(click_stat==false)
$("#ball").css({"left":m.pageX+70});
}
});
window.setInterval(function() {
if(click_stat==true){
var p = $("#ball");
var position = p.position();
var status=getStatus();
if(status==1)
{
var tadd=getTAdd();
var ladd=getLAdd();
$("#ball").css({"top":position.top+tadd,"left":position.left+ladd});
}
else if(status==0)
{
alert("Game Over...");
location.href="end.html";
}
else if(status==2)
{
alert("You Won...");
location.href="end.html";
}
}
},40);
//code to detect initial click
$(document).click(function(){
$("#plain").css('cursor', 'none');
click_stat=true;
});
});
function getLAdd()
{
var ladd=0;
var pball = $("#ball");
var pbar = $("#bar");
var bar_position = pbar.position();
var ball_position = pball.position();
if(ball_position.top>=window.innerHeight-100)
{
if(ball_position.left-10>=bar_position.left && ball_position.left-10<=bar_position.left+100 )
{ladd=-2; }
if(ball_position.left+10<=bar_position.left+200 && ball_position.left+10>=bar_position.left+100 )
{ladd=2; }
}
if(ladd==0){ladd=getLAdd.ladd;}
if(ball_position.left<=15|| ball_position.left>=window.innerWidth-40)
ladd=-ladd;
getLAdd.ladd=ladd;
return ladd;
}
function getTAdd()
{
var tadd=0;
var pball = $("#ball");
var pbar = $("#bar");
var ball_position = pball.position();
var bar_position = pbar.position();
if(ball_position.top>=0 && ball_position.top<=11) tadd=5;
if(ball_position.top>=window.innerHeight-100) tadd=-5;
if(ball_position.top>75&&ball_position.top<125)
{
if(($("#block_red1").length>0) && (ball_position.left+20>50&&ball_position.left<100))
{
tadd=-(getTAdd.tadd);
$("#block_red1").remove();
}
if(($("#block_blue1").length>0) && (ball_position.left+20>100&&ball_position.left<150))
{
tadd=-(getTAdd.tadd);
$("#block_blue1").remove();
}
if(($("#block_red2").length>0) && (ball_position.left+20>150&&ball_position.left<200))
{
tadd=-(getTAdd.tadd);
$("#block_red2").remove();
}
if(($("#block_pink1").length>0) && (ball_position.left+20>200&&ball_position.left<250))
{
tadd=-(getTAdd.tadd);
$("#block_pink1").remove();
}
if(($("#block_blue2").length>0) && (ball_position.left+20>250&&ball_position.left<300))
{
tadd=-(getTAdd.tadd);
$("#block_blue2").remove();
}
if(($("#block_pink2").length>0) && (ball_position.left+20>300&&ball_position.left<350))
{
tadd=-(getTAdd.tadd);
$("#block_pink2").remove();
}
}
if(tadd==0){tadd=getTAdd.tadd;}
getTAdd.tadd=tadd;
return tadd;
}
function getStatus()
{
var stat;
var pball = $("#ball");
var pbar = $("#bar");
var bar_position = pbar.position();
var ball_position = pball.position();
if(ball_position.top>=bar_position.top-20)
{
if(ball_position.left+22>=bar_position.left && ball_position.left<=bar_position.left+200)
stat=1;
else
stat=0;
}
else stat=1;
if(stat!=0&&($("#block_blue1").length==0)&&($("#block_blue2").length==0)
&&($("#block_red1").length==0)&&($("#block_red2").length==0)
&&($("#block_pink1").length==0)&&($("#block_pink2").length==0))
stat=2;
return stat;
}
</script>
</head>
<body>
<div id="plain" >
<img id="block_red1" src="images/block_red.png">
<img id="block_blue1" src="images/block_blue.png">
<img id="block_red2" src="images/block_red.png">
<img id="block_pink1" src="images/block_pink.png">
<img id="block_blue2" src="images/block_blue.png">
<img id="block_pink2" src="images/block_pink.png">
<label id="name"><h3>Hit_ball By Sukesh B R</h3></label>
<img id="bar" src="images/bar.png">
<img id="ball" src="images/ball.png">
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
*{ margin: 0;
padding: 0}
#bar{
position:absolute;
left:200px;
width:130px;
height:20px;
}
#ball{
position:absolute;
left:270px;
width:20px;
height:20px;
}
#plain{
width:97%;
height:95%;
border:10px solid #000000;
background:#ccffff;
}
#block_red1{
position:absolute;
top:100px;
left:50px;
width:50px;
height:25px;
}
#block_blue1{
position:absolute;
top:100px;
left:100px;
width:50px;
height:25px;
}
#block_red2{
position:absolute;
top:100px;
left:150px;
width:50px;
height:25px;
}
#block_pink1{
position:absolute;
top:100px;
left:200px;
width:50px;
height:25px;
}
#block_blue2{
position:absolute;
top:100px;
left:250px;
width:50px;
height:25px;
}
#block_pink2{
position:absolute;
top:100px;
left:300px;
width:50px;
height:25px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bar").css("top", window.innerHeight-80);
$("#ball").css("top", window.innerHeight-100);
var click_stat=false;
//Code to move bar
$(document).mousemove(function(m){
$("#body").css('cursor', 'none');
if(m.pageX>10&&m.pageX<window.innerWidth-180)
{
$("#bar").css({"left":m.pageX});
if(click_stat==false)
$("#ball").css({"left":m.pageX+70});
}
});
window.setInterval(function() {
if(click_stat==true){
var p = $("#ball");
var position = p.position();
var status=getStatus();
if(status==1)
{
var tadd=getTAdd();
var ladd=getLAdd();
$("#ball").css({"top":position.top+tadd,"left":position.left+ladd});
}
else if(status==0)
{
alert("Game Over...");
location.href="end.html";
}
else if(status==2)
{
alert("You Won...");
location.href="end.html";
}
}
},40);
//code to detect initial click
$(document).click(function(){
$("#plain").css('cursor', 'none');
click_stat=true;
});
});
function getLAdd()
{
var ladd=0;
var pball = $("#ball");
var pbar = $("#bar");
var bar_position = pbar.position();
var ball_position = pball.position();
if(ball_position.top>=window.innerHeight-100)
{
if(ball_position.left-10>=bar_position.left && ball_position.left-10<=bar_position.left+100 )
{ladd=-2; }
if(ball_position.left+10<=bar_position.left+200 && ball_position.left+10>=bar_position.left+100 )
{ladd=2; }
}
if(ladd==0){ladd=getLAdd.ladd;}
if(ball_position.left<=15|| ball_position.left>=window.innerWidth-40)
ladd=-ladd;
getLAdd.ladd=ladd;
return ladd;
}
function getTAdd()
{
var tadd=0;
var pball = $("#ball");
var pbar = $("#bar");
var ball_position = pball.position();
var bar_position = pbar.position();
if(ball_position.top>=0 && ball_position.top<=11) tadd=5;
if(ball_position.top>=window.innerHeight-100) tadd=-5;
if(ball_position.top>75&&ball_position.top<125)
{
if(($("#block_red1").length>0) && (ball_position.left+20>50&&ball_position.left<100))
{
tadd=-(getTAdd.tadd);
$("#block_red1").remove();
}
if(($("#block_blue1").length>0) && (ball_position.left+20>100&&ball_position.left<150))
{
tadd=-(getTAdd.tadd);
$("#block_blue1").remove();
}
if(($("#block_red2").length>0) && (ball_position.left+20>150&&ball_position.left<200))
{
tadd=-(getTAdd.tadd);
$("#block_red2").remove();
}
if(($("#block_pink1").length>0) && (ball_position.left+20>200&&ball_position.left<250))
{
tadd=-(getTAdd.tadd);
$("#block_pink1").remove();
}
if(($("#block_blue2").length>0) && (ball_position.left+20>250&&ball_position.left<300))
{
tadd=-(getTAdd.tadd);
$("#block_blue2").remove();
}
if(($("#block_pink2").length>0) && (ball_position.left+20>300&&ball_position.left<350))
{
tadd=-(getTAdd.tadd);
$("#block_pink2").remove();
}
}
if(tadd==0){tadd=getTAdd.tadd;}
getTAdd.tadd=tadd;
return tadd;
}
function getStatus()
{
var stat;
var pball = $("#ball");
var pbar = $("#bar");
var bar_position = pbar.position();
var ball_position = pball.position();
if(ball_position.top>=bar_position.top-20)
{
if(ball_position.left+22>=bar_position.left && ball_position.left<=bar_position.left+200)
stat=1;
else
stat=0;
}
else stat=1;
if(stat!=0&&($("#block_blue1").length==0)&&($("#block_blue2").length==0)
&&($("#block_red1").length==0)&&($("#block_red2").length==0)
&&($("#block_pink1").length==0)&&($("#block_pink2").length==0))
stat=2;
return stat;
}
</script>
</head>
<body>
<div id="plain" >
<img id="block_red1" src="images/block_red.png">
<img id="block_blue1" src="images/block_blue.png">
<img id="block_red2" src="images/block_red.png">
<img id="block_pink1" src="images/block_pink.png">
<img id="block_blue2" src="images/block_blue.png">
<img id="block_pink2" src="images/block_pink.png">
<label id="name"><h3>Hit_ball By Sukesh B R</h3></label>
<img id="bar" src="images/bar.png">
<img id="ball" src="images/ball.png">
</div>
</body>
</html>
end.html
<html>
<body>
<h1>Game Completed...</h1>
<br>
<a href="g1.html">Restart</a>
</body>
</html>
<html>
<body>
<h1>Game Completed...</h1>
<br>
<a href="g1.html">Restart</a>
</body>
</html>
Code description
Let we start from g1.html. In the body section I placed two images namely bar and ball .
The images for this is in the image folder which can be download from above.You can see another
four images.They are the bricks placed above the bar.
In the css section , there are the code to position correctly the bricks , padd and ball.
In the jquery section in the mousemove event the code to move the padd is written.m is
the mouse object m.pageX gives the x cordinate of mouse pointer m.pageY gives the y cordinte of
mouse position. Here we change only the left property of bar image with m.pageX.
We wont change the y cordinate.Because we need to move the padd in horizontal direction
only.
window.setInterval() is another event used to execute a particular block iteratively
in a particular time interval.in this function getTAdd() is called to get the tadd which is added to the y position of the ball.
getLAdd() is called to get the ladd which is added to the x position of the ball.
The variable status returned from getStatus() determine that the game is active or
game over or win in the game.
In the functions getTAdd(),getLAdd() and getStatus() the ladd , tadd and staus is calculated
by analysing the position of ball and padd. If the ball is hit the left half of padd the ladd will be +2.
If the ball is hit the right half of padd the ladd will be -2. If the ball position come near to the walls the ladd is multiplied with -1. Thus the ladd change to opposite value. This will gives a good flow to ball.
In the top when come near to the top wall or bricks the tadd is multiplied with minus.
So the ball then move to downward direction.When ball come near to a brick this the
brick will be removed using remove() method.
This is only a brief description.Hope that you can understand the core.
You can also read :-
suber
ReplyDelete