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.

Memory Games


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 Indriyani
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 >>
= TERIMA KASIH =

53 komentar

  1. saya coba di andro ga bisa mbak :-)

    BalasHapus
    Balasan
    1. cepet balik ke bekasi kg jum biar jaringan gk lemot ...hehe

      Hapus
    2. oh si andro itu aslinya anak bekasi toh, baru tahu Devy, hehe..!!

      Hapus
    3. bkn asli bekasi devy ,,, tpi asli jawa tu si andro ,,, cuma kdang menclok aja dibekasi ..hehe..

      Hapus
    4. oh berarti dari jawa, hanya mencoba mengadu nasib ke bekasi gitu ya mas, hehe

      Hapus
    5. ktanya sih tinggal di cibubur .. tapi gk itu kdang menclok dibekasi ...hehe

      Hapus
    6. Nyimak dan ikut sowan blogwalking kayaknya ni, masih awam mbak?

      Hapus
  2. hahaha...., dicopy ya SB-77 .. idenya keren x-)

    BalasHapus
  3. gme yg sebelnya aja blm bisa dpt dorprize nya ... eh dh ada game lg ..hehehe :)

    BalasHapus
    Balasan
    1. biar mas Fiu semangat lagi mendapatkan dorprizenya..

      Hapus
    2. pasti mw kasih target lg nih devy .....
      ini ja sy mentoknya di 40 klik trs ..... [-( hehe

      Hapus
    3. dalam game kali ini tidak Devy beri target mas, sampai mentok berapa kali melakukan KLIK dan itu tidak devy batasi, cuma penilaiannya adalah tingkat daya ingat mereka yang memainkan game ini seberapa tinggi,

      nanti Devy sudah buatkan 1 game yang mengarah kesana, menyusun deretan angka, dan angka itu adalah nomor HP devy, namun angkanya akan devy acak sesulit mungkin dengan bantuan CLUE, kalau bisa. maka bisa berkomunikasi dengan Devy via SMS atau CALL.
      insyaAllah akan devy rilis bulan April mendatang.

      Hapus
    4. hehehe, pengin komunikasi sama devy via sms atau call btuh perjuangan banget nih .... dari game ke game belum berhasil juga ... :)

      Hapus
    5. kesannya jadi terlihat sok ya mas, bukannya kenapa-kenapa mas, kalau memberi dengan mudah dan gampang, minta nomor HP dan pin langsung beri, yang ada bukannya mau berteman dengan Devy malah isenin devy, dan itu sudah sering terjadi, jadi mau ingin tahu saja, siapa yang serius dan siapa yang hanya iseng lewat sebuah permainan. (petualangan istilahnya mas) hehe..!!

      Hapus
    6. heheh, bukan terlihat sok atau gmn kok ...
      itu kn sudah menjadi prinsipnya devy agar tidak terjatuh di tempat yg sama ... :)
      sy juga suka berpetualang kok ... jadi nyante saja ,,, :)

      Hapus
    7. aamiin, semoga Mas Fiu Menang..!
      ingat ya Mas, org yg meng-aamiinkan doanya bisa sj makbul.. hangout g+, standby ya Mas Fi..!


      Vy..! kode PENGACAK demoshow kirimkan ya sebelum akhir bulan inih,.

      Hapus
    8. apanya yang mau dikirimkan mas, sungguh Devy kagak mengerti apa yang mas Al minta, kode pengacak Demoshow yang mana ya.?

      Hapus
    9. he.he.he. lewat.
      .yg dibawah noo.. mohon dijawab ya..!

      Hapus
    10. tuh kan mas Al mau main tebak-tebakan neh kayaknya, mas lihat di halaman yang mana ya.? kok devy kagak loading gitu.? hehe..!! serius attuh mas Al

      Hapus
    11. Mas Fiu..!

      nomor hape devy.. ada 77nya, ingat deretan inih ya..!
      ada jg beberapa nomr yg mengulang..

      kebanyakan menggunakan angka sakti.. :>)

      Hapus
  4. jgn Sedih ya Vy..!
    inh baru yg menyedihkan hehehe... cuma 62
    (E, E-) 70 “ 79 = Tingkat IQ rendah, inipun nda sampai 70/90.. tingkat IQ error ya Vy?
    masuk kategori error.. he.he.he

    berarti pak habibi yg IQ 200.. IQ Supersonik ya Vy?

    BalasHapus
    Balasan
    1. jangan terlalu dipikirkan mas Al, Devy saja yang mendesain game ini hanya mampu membuka keseluruhan gambar dalam 42-45 KLIK padahal acakan gambar devy yang atur setiap kali tombol reset di KLIK, tetapi ini hanya sebuah permainan kok mas Al.

      tergantung konsentrasi untuk mengingat dimana letak gambar tersebut dan pasangannya.oh iya masih ada yang lebih fantastis lagi mas, Leonardo da Vinci Universal Genius,asal Italy, nilai IQ 220, sangat super

      Hapus
    2. nynte mas Al IQ sy juga dibawah mas al kok ...
      yg pnting rasa ingn trs belajar ada itu sudah sangat bgus ..
      bahkan kata Nabi orang yg selalu ingat mati adalah org yg cerdas ... :)

      Hapus
    3. wow..kata-katanya sih sedikit, tetapi maknanya sudah melebihi pak ustad berceramah, hehe..!!

      setuju mas, belajar kan tidak mengenal usia, tua muda terus belajar, karena level pintar itu bukan dinilai dari apa profesi yang kita emban, tetapi dimana kita bisa mengetahui hal yang sudah ada dan malah terus belajar.

      Hapus
    4. hehehe, sy sih belum melebihi pak ustadz berceramah devy .... sy masih dibawah mereka2 para ustadz ....

      sy juga setuju dengan devy ... manusia asal mulanya ya sama tidak ada yg terlahir pintar atau pun bodoh, jika rasa ingin belajar itu ttp ada makan pengetahuan dan ilmu akan trs berkembang... toh sama2 otak ciptaan Allah. :)

      Hapus
  5. kayak main onet ini, cuma belum ada waktunya.. tapi tetep keren :)

    BalasHapus
  6. weh langsung klik ya, seharusnya ada penampakan gambar dulu pertama kali mbak, saran gahahaha

    tapi kok keren ya, kayak yang di android itu

    BalasHapus
    Balasan
    1. kalau dibuat seperti itu akan lebih mudah menyelesaikan permainan ini mas, kalau semuanya tersembunyi kan lebih menantang, jadi harus benar-benar ingat letak dimana gambar pertama saat kita KLIK dan mencari gambar pasangannya yang berbeda, konsentrasi dalam daya ingat.

      Hapus
  7. bener juga ya dari pada mikirin mantan pacar mendingan maen game, tapi kok tingkat iq ku, padahal mudah lho hehe...

    BalasHapus
    Balasan
    1. tuh kan teh santika sependapat dengan Devy, buat apa mikirin mantan, mending seru-seruan disini bermain game, iya gak teh.!
      hehe..!!

      Hapus
    2. mendingan mikirin sy aja coba ,,,,xixixixixixix
      lgsung kbur dulu ah ,,,,

      Hapus
  8. Buat yang jarang main game nyimak aja deh...maklum banyak acara tapi penasaran juga tuh nyoba turun nggak ya IQ saya soalnya dah lama banget nggak tes IQ

    BalasHapus
  9. belum pernah main game ini mbak.. sukanya yg gampang-gampang aja kayak ular tangga wkwkwk

    BalasHapus
    Balasan
    1. aduh elsa, keliata banget payahnya.liat dong aku nih maen game apa aja bisa..

      Hapus
  10. asyik banget nih game nya bisa ngasah iq ya gan, ane cobain dulu yak sapa tahu aja ane jadi winner :D

    BalasHapus
  11. saya malah lebih suka game kartu yang menyusun..

    BalasHapus
  12. Game mengasah otak nih, bisa bikin lupa mandi huehehehe (h)

    BalasHapus
  13. Main game hanya menghilangkan seteres beberapa waktu saja :D

    BalasHapus
    Balasan
    1. lebih baik hilang walau hanya sedikit, daripada seteresnya malah bertambah.?

      Hapus
    2. haha, bukan hnya game, ngeblog juga ampuh loh ngilangin stress... :)

      Hapus
    3. gak juga kok, yang ada tambah pusing dan stres,apalgi saya yang kurang paham bermain blog, kalau seperti mas roli sih gak masalah dan enjoi saja bermain blog karena memang sudah ahlinya, nah bagaimana dengan kita-kita termasuk saya yang masih baru. pasti pusing

      Hapus
  14. sepertinya daya ingat sy membeku, gem memory ingatan ini tdk bisa melebihi target tertentu .. mungkin karena dulunya dipaksa kerja rodi.

    Vy..mau nanya..!
    kan sy cek seo blog.. "Template memiliki 3 h1 .. maksudnya apa N ada solusi nda?
    tengkyu sebelumnya ya Vy..ats bantuannya..

    BalasHapus
    Balasan
    1. Kalau gak salah beberapa waktu lalu hal ini pernah devy jelaskan dalam balasan komentar mas Al pada blog mbah dinan, devy mengatakan kalau blog/Template mas Al diabaikan google dalam hal indeks, sebabnya ya karena tag ini faktor utamanya.

      tag h1 tidak boleh lebih dari 1 dan hanya diperbolehkan menggunakan 1 tag h1 dalam template. solusinya coba periksa kembali template mas Al, perhatikan heading yang mas al gunakan, kalau sudah ketemu ganti h1 menjadi h2 sesuai deklarasi area page. h2 (untuk sidebar) h4 (untuk komentar title) dan h1 hanya untuk nama blog.

      Hapus
    2. iyya.., karna ituh di blog mbah, skrg ganti template..
      template yg skrg no side bar.. cuma ada difooter.. susunan tag2 ituh bagaimana?

      Hapus
    3. saat kita mengadopsi sebuah template hasil download, disana sudah tersusun heading tag pada masing-masing halaman, namun kita perlu lakukan sedikit perubahan saja agar template SEO Friendly dan ramah pada google.

      Devy yakin Mas Al bisa lakukan sendiri, saya akan beri tahapannya pada link berikut:

      » Struktur Kode HTML Halaman Posting

      » Mendesain Template Agar Lebih SEO Fiendly



      Hapus
  15. Ok Vy.. slamat beristrahat.. makasi ya..
    ujicoba terakhir ditest.. result

    H1: 5, that is Bad, must be 1 or maximum 2.
    Warning: Make sure to have one or maximum two H1 tags: They represent the headline of your content/website. Having more than two H1 tags can create confusion on understanding the importance of a content.

    hahahaha.......toweng..toweng... pecaaahh...

    BalasHapus
    Balasan
    1. Devy sudah periksa tataan elemen HTML pada Template yang mas Al gunakan, terdapat 6 tag H1, sebenarnya sih tempat tag h1 yang semestinya untuk title blog sudah benar mas Al, tetapi mas gandakan lagi heading tag H1 pada title content Recent Post

      coba cari kode ini di template yang mas Al gunakan:

      <h1 class='post-title entry-title' itemprop='name'>

      terdapat 5 heading tag h1 disana yang mas buat untuk mengapit judul isi recent post pada footer page:
      1. sejarah sebelum beririnya negara israel
      2. cara polisi tanggap tangan pengedar narkoba
      3. .......
      dst.

      seharusnya apit judul tersebut seperti isi popular post, atau gunakan h2 saja.

      Hapus
  16. gamenya unik cukup dengan jquery memang kalau programmer apik deh

    BalasHapus
  17. asyik juga ne gan, ngeblog sambil mainin game online, ane jadi betah kalau ada game nya, bisa buat hiburan ane hahaha

    BalasHapus
  18. .Wah saya sudah mencobanya mbak, dengan 36 Klik. :>)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK