Prince Joal
Web Developer
  • Name: Prince

  • Birthday: 28 February 1993

  • Job: Freelancer

  • Email: i@princejoal.com

  • Skype: 1081a1d198d8081c

Ballon Games

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.

Live Demo | Quick Download

JavaScript code

The below lines of code will read a key Code upon pressing a key on keyboard.

$(document).keydown( function(event)

{varkeycode = 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



HTML Code

1
2
3
4
<body>
<div id=”score“>0</div>
<div id=”start“>Start</div>
</body>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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;
}

5 1 vote
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
1
0
Would love your thoughts, please comment.x
()
x