Typing Test – w3-html

Today I am going to share Typing Test Game. Where you Type to alphabets and get point. You can use html, javascript and jqury to create this game. I have give you Demo link in below where you can play this Game.
<!DOCTYPE html>
<html>
<head>
 <title>Typing Test</title>
 <style type="text/css">
 body
 {
 width: 100%;
 margin: 0 auto;
 padding: 0;
 }
 
 .bubb
 {
 position: absolute;
 
 
 font: bold 14px verdana;
 background-color: yellow;
 text-align: center;
 
 vertical-align: middle;
 padding: 10px;
 border: solid 5px #ccc;
 font-size: 50px;
 }
 
 .score
 {
 font-size:26px;
 top: 25px;
 right: 50px;
 text-align:right;
 }
 
 #start
 {
 
 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;
 }
 #sTotalcore
 {
 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;
 }
 #score
 {
 width: 200px
 }
 .score
 {
 float: right;
 }
 .CountDown
 {
 font-size:26px;
 width: 200px;
 text-align:left;
 float: left;
 
 }
 #countDown
 {
 
 }
 .bg
 {
 background: rgba(180, 222, 166, 0.75);
 border: 3px solid #238c7d;
 text-align: center; 
 }
 .body
 {
 background:#79c1c1;
 }
 </style>
 
 
</head>
<body class="body"> <div class="CountDown bg">Count Down: <div id="countDown">0</div></div>
 <div class="score bg">Score <div id="score">0</div></div>
 <div id="start">Start</div>
<div id="data"></div>
<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()
 { count=1;
 $(this).fadeOut('slow');
 $('#score').html('0');
 genLetter();
 });
 
 
 // Dealing KeyEvents and fading out matched bubble
 $(document).keydown( function(event)
 {
 var keycode = event.keyCode;
 
 if($('.bubb').text()==String.fromCharCode(keycode))
 { 
 code += 10;
 $('#score').html(code);
 $('#data').html('');
 }
 
 
 /*$('.bubb'+keycode).animate({ "top" : height+"px", "opacity" : 0 }, 'slow');
 
 $('.bubb'+keycode).fadeOut('fast').hide( 'fast', function()
 {
 $(this).remove();
 }
 );*/
 });
 
 
 // Generating a random alphabet between A-Z
 
 function genLetter()
 { 
 
 $('#countDown').html(count); 
 if(count==10)
 {
 $('#start').show();
 $('#start').html('Your Total Score is :-'+$('#score').text()+'/100'); 
 $('#data').html(''); 
 }
 else
 {
 
 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 );
 $('#data').html('<span class="bubb bubb'+ k +'" style="left: '+ left +'px; top: '+ top +'px; background-color:#'+ color +'">'+ ch +'</span>');
 setTimeout(genLetter, 1000);
 }
 
 count++;
 }
 
 // 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>
 
</body>
</html>
Home
