latest Post

Suggest a Name for this Jquery Game

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

About Mallikarjun A

Mallikarjun A
Recommended Posts × +

0 comments:

Post a Comment