9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, December 15, 2010

Typing Game with jquery

This is a simple typing game experimental using jquery. The main criteria here is to understand how to read Keyboard Character Codes and displaying its equivalent Character on to screen. You may notice so many bugs in live demo, because this program is not implemented fully as we concentrated on important code blocks only.

Typing game with jquery

Live Demo

About Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info

JavaScript code
The below lines of code will read a key Code upon pressing a key on keyboard.
$(document).keydown( function(event)
{
var keycode = event.keyCode;

Screen resolution is read by the following code. Here we are reducing 100px and 200px from width and height as browser occupying some of the space at top and bottom.
var width = screen.width - 100;
var height = screen.height - 200;

And next function is used to Generate a random alphabet between A - Z.
Here the key code values for A - Z are 65 - 90.
Math.random() - used to generate a random number
String.fromCharCode() - is used to convert a key Code into its equivalent Character

// Generating a random number between 65 -90
var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65;
var ch = String.fromCharCode(k);

For css styling purpose we are generating a random color for every bubble and this is done by the following function
// Generating a random color
function randomColor(){
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;
}
});


Final Javascript Code
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js
"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Getting screen resolutions and positioning the start button
var width = screen.width - 100;
var height = screen.height - 200;
var code = 0;
$('#start').css(
{
"top" : (height/2)+'px',
"left" : (width/2)+'px'
});

$('#start').click( function()
{
$(this).fadeOut('slow');
$('#score').show();
genLetter();
});

// Dealing KeyEvents and fading out matched bubble
$(document).keydown( function(event)
{
var keycode = event.keyCode;
$('.bubb'+keycode).animate(
{
"top" : height+"px", "opacity" : 0
}, 'slow');

$('.bubb'+keycode).fadeOut('slow').hide( 'slow', function()
{
code += 20;
$('#score').html(code);
$(this).remove();
}
);
});

// Generating a random alphabet between A-Z
function genLetter()
{
var color = randomColor();
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="bubb bubb'+ k +'" style="left: '+ left +'; top: '+ top +'; background-color:'+ color +'">'+ ch +'</span>');
setTimeout(genLetter, 1000);
}

// Generating a random color
function randomColor()
{
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>


HTML Code
<body>
<div id="score">0</div>
<div id="start">Start</div>
</body>


CSS
body
{
width: 100%;
margin: 0 auto;
padding: 0;
}

.bubb
{
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;
}

#start
{
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;
}

#start:hover
{
cursor: pointer;
}

Comments
{ 21 comments }
Kathir said...

nice

Abhishek said...

Nice one!

Motyar said...

Nice

Anonymous said...

NICE NOT SO BAD.....

Woothy said...

very creatif!

thanks

quality research papers said...

i have read this blog post its really nice and help in my project work......... so keep it..

Adnan Zulkarnain said...

Amazing..post.best

ΜigueŁ jίмenez™ said...

6760 :)

Dustin said...

Nice tutorial. Though it would probably be more useful to get the browser's window size rather than the screen resolution. That way elements wouldn't appear offscreen like they do for me (I don't maximize my browser).

Ravi Tamada said...

@Dustin: You are correct, it would better to take browser window size.

Thanx

Pisyek said...

very creative! thanks for sharing this mate!

sureshpeters said...

very nice bro./

PHP Scripts said...

You have one of the best tutorial sites on the web by far... hopefully someday I will be as advanced as you.

Anonymous said...

Coool !!!!!! Keep it up bro

Anonymous said...

ya well done

Anonymous said...

nice

OptimizePress said...

I agree. This was a good lesson on jquery.

johnsmith said...

hmm, nice... but what if we use words?

Anonymous said...

nice post

Anonymous said...

why random color is not working

Kingz said...

Cheers.. :)

Post a Comment