latest Post

Amazing LETTERS TYPE game using JQuery

Amazing LETTERS TYPE  game using JQuery

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

About Mallikarjun A

Mallikarjun A
Recommended Posts × +

0 comments:

Post a Comment