Membuat Game Typing dengan jQuery

Tutorial - 02 Aug 2012

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.

Game Typing dengan jQuery

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;
}

Kode Javacript

// Menampilkan huruf alfabet dari A-Z secara acak function alfabet() { var warna = acakWarna(); var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65;// Math.random() digunakan untuk menghasilkan angka secara acak var ch = String.fromCharCode(k); // digunakan untuk mengkonversi keycode (inputan dari keyboard) ke karakter var atas = Math.floor(Math.random() * tinggi ); var kiri = Math.floor(Math.random() * lebar ); $('body').append(''+ ch +''); setTimeout(alfabet, 1000); }

// Menampilkan warna secara acak function acakWarna() { var warna = ''; var isian = ['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); warna += isian[no]; } return warna; } });