Membuat Game Typing dengan jQuery

Pada tutorial ini, kita akan mencoba membuat game typing (mengetik) sederhana menggunakan jQuery. Hal yang paling penting dari game ini ialah memahami bagaimana membaca kode inputan dari karakter keyboard dan menampilkan karakter tersebut ke layar. Untuk lebih jelasnya, silahkan coba demo game typing pada link dibawah.

Download

Demo

Langkah Pengerjaan

Kode HTML

<body>
<div id="skor">0</div>
<div id="mulai">Mulai</div>
</body>

Kode CSS

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

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

#skor
{
font-size:46px;
top: 25px;
right: 50px;
display: none;
text-align:right;
}

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

#mulai:hover
{
cursor: pointer;
}