Suggest a Name for this Jquery Game
Letters type game Created in JQuery.
1.click "start play" button.
2.press the letter on keyboard you seen in the screen.
and see the magic n enjoy the feel of game.
<html>
<head>
<title>Jquery Letters game</title>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
body
{
width: 100%;
margin: 0 auto;
padding: 0;
}
.drp
{
position: absolute;
width:30px;
height: 30px;
font: bold 14px verdana;
background-color: yellow;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
vertical-align: middle;
padding: 5px;
}
#score
{
font-size:46px;
top: 25px;
right: 50px;
display: none;
text-align:right;
}
#play
{
width: 50px;
padding: 10px 15px;
text-align: center;
font:bold 15px arial;
background-color: #dedede;
color: #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
position: absolute;
}
#play:hover
{
cursor: pointer;
}
h1{color:green;text-align:center;}
p{
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var width = screen.width - 100;
var height = screen.height - 200;
var code = 0;
$('#play').css(
{
"top" : (height/2)+'px',
"left" : (width/2)+'px'
});
$('#play').click( function()
{
$(this).fadeOut('slow');
$('#score').show();
newLetters();
});
$(document).keydown( function(event)
{
var keycode = event.keyCode;
$('.drp'+keycode).animate(
{
"top" : height+"px", "opacity" : 0
}, 'slow');
$('.drp'+keycode).fadeOut('slow').hide( 'slow', function()
{
code += 20;
$('#score').html(code);
$(this).remove();
}
);
});
function newLetters()
{
var color = changeClr();
var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65;
var ch = String.fromCharCode(k);
var top = Math.floor(Math.random() * height );
var left = Math.floor(Math.random() * width );
$('body').append('<span class="drp drp'+ k +'" style="left: '+ left +'; top: '+ top +'; background-color:'+ color +'">'+ ch +'</span>');
setTimeout(newLetters, 1000);
}
function changeClr()
{
var color = '';
var values = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
for (c = 0; c < 6; c++)
{
no = Math.floor(Math.random() * 15);
color += values[no];
}
return color;
}
});
</script></head><body>
<h1>Jquery Letters Game created by <p>MBox - tuts</p></h1>
<div id="score">0</div>
<div id="play">Let's play</div>
</body>
</html>
If you like this Game feel free to Like my facebook page,and stay in touch to see and njoy some cool Tutorials...
https://www.facebook.com/mboxtuts
Letters type game Created in JQuery.
1.click "start play" button.
2.press the letter on keyboard you seen in the screen.
and see the magic n enjoy the feel of game.
<html>
<head>
<title>Jquery Letters game</title>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
body
{
width: 100%;
margin: 0 auto;
padding: 0;
}
.drp
{
position: absolute;
width:30px;
height: 30px;
font: bold 14px verdana;
background-color: yellow;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
vertical-align: middle;
padding: 5px;
}
#score
{
font-size:46px;
top: 25px;
right: 50px;
display: none;
text-align:right;
}
#play
{
width: 50px;
padding: 10px 15px;
text-align: center;
font:bold 15px arial;
background-color: #dedede;
color: #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
position: absolute;
}
#play:hover
{
cursor: pointer;
}
h1{color:green;text-align:center;}
p{
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var width = screen.width - 100;
var height = screen.height - 200;
var code = 0;
$('#play').css(
{
"top" : (height/2)+'px',
"left" : (width/2)+'px'
});
$('#play').click( function()
{
$(this).fadeOut('slow');
$('#score').show();
newLetters();
});
$(document).keydown( function(event)
{
var keycode = event.keyCode;
$('.drp'+keycode).animate(
{
"top" : height+"px", "opacity" : 0
}, 'slow');
$('.drp'+keycode).fadeOut('slow').hide( 'slow', function()
{
code += 20;
$('#score').html(code);
$(this).remove();
}
);
});
function newLetters()
{
var color = changeClr();
var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65;
var ch = String.fromCharCode(k);
var top = Math.floor(Math.random() * height );
var left = Math.floor(Math.random() * width );
$('body').append('<span class="drp drp'+ k +'" style="left: '+ left +'; top: '+ top +'; background-color:'+ color +'">'+ ch +'</span>');
setTimeout(newLetters, 1000);
}
function changeClr()
{
var color = '';
var values = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
for (c = 0; c < 6; c++)
{
no = Math.floor(Math.random() * 15);
color += values[no];
}
return color;
}
});
</script></head><body>
<h1>Jquery Letters Game created by <p>MBox - tuts</p></h1>
<div id="score">0</div>
<div id="play">Let's play</div>
</body>
</html>
If you like this Game feel free to Like my facebook page,and stay in touch to see and njoy some cool Tutorials...
https://www.facebook.com/mboxtuts
0 comments:
Post a Comment