Memory Game Picture With jQuery

Memory Game Picture With jQuery - Daripada mengingat kisah sedih bersama mantan pacar, yang semuanya tentang kenangan pahit doang, mending bermain game untuk menguji daya ingat Anda disini - Di Memory Game Picture With jQuery. Permainan kali ini adalah mencari pasangan gambar yang sudah saya acak setiap kali Anda menekan tombol RESET. Disini sudah saya tampilkan 20 lembar kartu dengan 10 pasang gambar yang berbeda, dan masing-masing kartu sudah saya beri 1 buah gambar yang saya letakkan dibalik kartu tersebut, jadi gambar tidak akan terlihat.

Efek gambar tampil saya desain dengan slide out, untuk melihat gambar cukup Anda KLIK salah satu dari 20 kartu yang sudah tersusun, maka gambar akan terlihat. Tugas Anda adalah mencari pasangan gambar yang terbuka diantara susunan kartu tersebut secara TEPAT dan BENAR, karena jika Anda salah membuka pasangan gambar, maka gambar yang terbuka akan tertutup kembali. Nah..!! saya menantang sahabat semua pecinta SAHABAT BLOGGER 77 seberapa tinggi daya ingat Anda untuk membuka semua gambar dibalik kartu tersebut dalam waktu yang cepat.

Permainan ini bukan tentang » Game Test Kecerdasan pada postingan sebelumnya. Permainan ini saya buat untuk menguji seberapa tinggi daya ingat Anda dalam mengontrol konsentrasi, namun ini hanya sebuah permainan, akan tetapi bisa kita jadikan acuan untuk mengukur berapa nilai IQ yang kita miliki jika mampu menyelesaikan game kali ini dengan metode hasil test IQ seperti ini:

(E, E-) 70 “ 79 = Tingkat IQ rendah
(D) 80 “ 90 = Tingkat IQ rendah yang masih dalam kategori normal (Dull Normal)
(C) 91 “ 110 = Tingkat IQ normal atau rata-rata
(B) 111 “ 120 = Tingkat IQ tinggi dalam kategori normal (Bright Normal)
(A) 121 “ 130 = Tingkat IQ superior
(A +) 131 atau lebih = Tingkat IQ sangat superior atau jenius.

Kita hubungkan dengan game memory kali ini, jika Anda mampu membuka semua pasangan gambar hanya dengan :

• 27 - 30 Klik, tingkat IQ A+
• 31 - 35 Klik, tingkat IQ A
• 36 - 40 Klik, tingkat IQ B
• 41 - 46 Klik, tingkat IQ C
• 47 - 53 Klik, tingkat IQ D
• 60 atau lebih, tingkat IQ E, E-

Mau tahu berapa nilai yang akan Anda dapatkan dipermainan ini, atau ingin tahu tingkat konsentrasi Anda dalam mengingat, coba mainkan game ini:




PLAY GAME



Penyusunan rangkaian JavaScript-variable, lalu saya hubungkan dengan perintah js-jQuery untuk membuat Memory Game Picture seperti ini. Bila mana Anda ingin mengganti gambar-gambar tersebut, Anda cukup ganti kode yang saya beri warna MERAH dengan URL-Gambar Anda pada kode JavaScript berikut:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var BoxOpened = "";
var ImgOpened = "";
var Counter = 0;
var ImgFound = 0;
var Source = "#boxcard";
var ImgSource = [
  "<http://Url-Gambar Anda (1).jpg>",
  "<http://Url-Gambar Anda (2).jpg>",
  "<http://Url-Gambar Anda (3).jpg>",
  "<http://Url-Gambar Anda (4).jpg>",
  "<http://Url-Gambar Anda (5).jpg>",
  "<http://Url-Gambar Anda (6).jpg>",
  "<http://Url-Gambar Anda (7).jpg>",
  "<http://Url-Gambar Anda (8).jpg>",
  "<http://Url-Gambar Anda (9).jpg>",
  "<http://Url-Gambar Anda (10).jpg>"
];
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/picbox-memory-game.js"></script>
<div id="picbox">
<span id="boxbuttons"><span class="button"><span id="counter">0</span> Clicks</span><span class="button"><a onclick="ResetGame();">Reset</a></span></span>
<div id="boxcard"></div>
</div>

Sedikit tambahan CSS pelengkap untuk mempercantik desain tampilan game ini, silahkan Anda acak-acak kode dibawah ini jika ingin memodifikasi bentuk tampilan sesuai style Anda. CSS lengkapnya seperti ini:

<style type="text/css">
#picbox {margin: 0 auto;width: 640px;}
#boxcard {z-index: 1;margin: -33px 0 0;}
#boxcard div{
 float: left;width: 100px;height: 100px;margin: 5px;padding: 5px;
 border: 3px solid #E9967A;cursor: pointer;border-radius: 10px;
 box-shadow: 0 1px 5px rgba(0,0,0,.8);z-index: 2;
 background: linear-gradient(left, transparent 0%,#B1B1B1 50%,#B1B1B1 100%);
 background:-webkit-linear-gradient(left, transparent 0%,#B1B1B1 50%,#B1B1B1 100%);
 background:-moz-linear-gradient(left, transparent 0%,#B1B1B1 50%,#B1B1B1 100%);
 background:-o-linear-gradient(left, transparent 0%,#B1B1B1 50%,#B1B1B1 100%)}

#boxbuttons .button:hover {background: #2c4762}
#boxcard div img {display:none;border-radius:10px;z-index:3;width:100px;height:100px}
#boxbuttons {text-align: right;margin: 20px;display: block;font:14px Verdana}
#boxbuttons .button {
 text-transform: uppercase;background: #DC143C;padding: 5px 10px;margin: 5px;
 cursor: pointer;border-left:3px solid #FFFF00;border-radius:2px}
</style>

Oh..iya sekali lagi ini hanya sebuah permainan ala SB-77, jika kiranya Anda mendapat nilai yang menurut Anda kurang memuaskan saat menyelesaikan permainan ini, mohon jangan salahkan Devy ya, hehe..!!. Karena saya hanya memberikan hiburan semata buat sahabat semua, tidak berbeda seperti Cara Membuat Game Ular-Ularan Diblog pada artikel terdahulu. Semoga Anda betah berkunjung disini dan terhibur, terima kasih.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memory Game Picture With jQuery
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2015/03/memory-game-picture-with-jquery.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77