5:44 AM
Parasharmaneesh
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
style="border:1px solid #000000;">
</canvas>
Using this html canvas tag and jquery we will make simple ball game.Firstly i will show you main parts of code.
Lets start with html code.Copy below code and save in file with .html extension.
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<div style="border:solid 5px;height:100%">
<canvas id="mybar1" width="150" height="25" style="padding:5px;bottom:0px;left:10px;position:absolute">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="myCanvas" width="1300" height="600">
</canvas>
</div>
<div id="watermark"><p><center>Game By Money</center></p></div>
</body>
</html>
Now lets add some life to code by adding some js.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var a=0;
var maxy=$("div").width();
var maxx=$("div").height();
var c=document.getElementById("mybar1");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,25);
var c=document.getElementById("myCanvas");
var context;
var x=maxy;
var y=maxx;
var dx=5;
var dy=5;
function init()
{
context= myCanvas.getContext('2d');
setInterval(draw,10);
}
function draw()
{
context.clearRect(0,0, maxy,maxx);
context.beginPath();
context.fillStyle="#0000ff";
// Draws a circle of radius 20 at the coordinates 100,100 on the canvas
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
// Boundary Logic
if( x<0 || x>maxy) dx=-dx;
if( y<0 || y>maxx) dy=-dy;
var position=$("#mybar1").offset();
if (x < position.left + 150 && x + 40 > position.left &&
y < position.top + 25 && y + 40 > position.top) {
// The objects are touching
dy=-dy;
}
x+=dx;
y+=dy;
if(y>maxx)
alert("Game Over");
}
$(document).keydown(function(e) {
switch (e.which) {
case 37:
if(a>25){
a=a-25;
document.getElementById("mybar1").style.left = a + "px";
}
break;
case 39:
if(a+170<maxy){
a=a+25;
document.getElementById("mybar1").style.left = a + "px";
}
break;
}
});
</script>
Now we give some colors to game adding css.
<style type="text/css">
#watermark {
color: #d0d0d0;
font-size: 100pt;
position: absolute;
width: 50%;
height: 50%;
margin: 0;
z-index: -1;
left:350px;
top:0px;
}
Now we have understood all main parts of coding.
Below is the full code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#watermark {
color: #d0d0d0;
font-size: 100pt;
position: absolute;
width: 50%;
height: 50%;
margin: 0;
z-index: -1;
left:350px;
top:0px;
}
</style>
</head>
<body onLoad="init();" style="position: absolute;
height: 93%;
top: 0px;
bottom: 0px;
width: 98%;">
<div style="border:solid 5px;height:100%">
<canvas id="mybar1" width="150" height="25" style="padding:5px;bottom:0px;left:10px;position:absolute">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="myCanvas" width="1300" height="600">
</canvas>
</div>
<div id="watermark"><p><center>Game By Money</center></p></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var a=0;
var maxy=$("div").width();
var maxx=$("div").height();
var c=document.getElementById("mybar1");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,25);
var c=document.getElementById("myCanvas");
var context;
var x=maxy;
var y=maxx;
var dx=5;
var dy=5;
function init()
{
context= myCanvas.getContext('2d');
setInterval(draw,10);
}
function draw()
{
context.clearRect(0,0, maxy,maxx);
context.beginPath();
context.fillStyle="#0000ff";
// Draws a circle of radius 20 at the coordinates 100,100 on the canvas
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
// Boundary Logic
if( x<0 || x>maxy) dx=-dx;
if( y<0 || y>maxx) dy=-dy;
var position=$("#mybar1").offset();
if (x < position.left + 150 && x + 40 > position.left &&
y < position.top + 25 && y + 40 > position.top) {
// The objects are touching
dy=-dy;
}
x+=dx;
y+=dy;
if(y>maxx)
alert("Game Over");
}
$(document).keydown(function(e) {
switch (e.which) {
case 37:
if(a>25){
a=a-25;
document.getElementById("mybar1").style.left = a + "px";
}
break;
case 39:
if(a+170<maxy){
a=a+25;
document.getElementById("mybar1").style.left = a + "px";
}
break;
}
});
</script>
</body>
</html>
Posted in: 
