24.11.14
22
The Numbers Game With JavaScript Versi 1.0 By. Sahabat Blogger 77
Game Menyusun Angka - Permainan ini adalah sebuah game clasic (Jadul) yang sudah pasti sahabat semua mengenalnya, bahkan pernah memainkannya. Disela-sela kejenuhan, pikiran mampet kata orang jawa, terlebih lagi kalau sudah main dan singgah ke blog ini yang semuanya tentang pembahasan kode CSS, HTML dan JavaScript yang menambah pusing lagi kata +kang jum hehe..!!! Tetapi, bersamaan disaat itu pula saya akan memberikan sedikit hiburan buat sahabat semua pecinta SAHABAT BLOGGER 77 dengan permainan yang mengandalkan strategi, kecepatan serta ketepatan Anda dalam menyusun Angka acak dalam game kali ini.

Dahulu sewaktu masih kanak-kanak, saya bahkan sangat menyukai game ini, sampai-sampai saya punya 2 buah mainan ini dengan objek berbeda, pertama game menyusun angka dan yang kedua menyusun deretan huruf acak. Cara memainkannya dengan menggeser susunan angka yang sudah teracak sampai membentuk deretan angka yang semestinya dengan jari telunjuk seperti ini:




PLAY GAME




CARA BERMAIN
Game ini mungkin terlihat biasa saja, sangat mudah. Namun disana saya menampilkan alat penghitung untuk mengukur berapa kali Anda melakukan geseran pada setiap angka (Total Slide) saat Anda akan mulai memainkannya. Dan susunan angka akan teracak kembali jika Anda menekan tombol "RESTART" saat akan mengulang. Jadi, pikirkan strategi apa yang akan Anda gunakan untuk menyelesaikan permainan pada game ini, Karena game kali ini bukan hanya sekedar permainan seperti Game Test Kecerdasan Ala Sahabat Blogger 77 pada artikel sebelumnya. jika Anda berhasil menyelesaikan game ini dengan Total Slide: 151 kali dan deretan angka sudah tersusun dengan benar dan tepat, secara otomatis kotak cell angka akan berputar (Flipping) untuk menampilkan "Sesuatu" yang pasti Anda menginginkannya.



Perintah Cell Tab :
Disana saya membuang 1 kotak tab cell pada Angka, sehingga 1 kotak terlihat kosong, Untuk menggeser dan memindahkan angka, Anda cukup KLIK angka yang terdekat pada tab yang kosong, begitu seterusnya sampai angka tersebut tersusun dengan benar dan tepat.


Game numbers image


Buat sahabat semua yang ingin membuat game menyusun angka seperti ini sebagai hiburan buat pengunjung blog, disini sudah saya siapkan kode-kode untuk membuat game ini, seperti CSS, HTML dan JavaScript secara lengkap seperti ini:



<style type='text/css'>
.game-field {
   margin: 0 auto;padding: 2px;font-size: 0;
   border-radius: 10px; border: 10px solid #333;
   width: 272px;background: black;
   background: -moz-linear-gradient(30deg, #222 0%, #666 100%);
   background: -webkit-linear-gradient(30deg, #222 0%, #666 100%);
   background: -o-linear-gradient(30deg, #222 0%, #666 100%);
   background: -ms-linear-gradient(30deg, #222 0%, #666 100%);
   background: linear-gradient(120deg, #222 0%, #666 100%);
   -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.80);
   -moz-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.80);
   box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.80);}

.game-field._hide {display: none;}
.cell {
   display: inline-block;position: relative;margin: 2px;
   border-radius: 8px;vertical-align: top;
   width: 64px;height: 64px;font-size: 0;
   background: rgba(0, 0, 0, 0.2);}

.tag {
   position: relative;width: 64px;height: 64px;
   border-radius: 8px;border: 6px solid #eee;
   box-sizing: border-box;background: #fff;
   vertical-align: top;text-align: center;
   line-height: 52px;font-size: 28px;
   text-shadow: 1px 1px 4px #969696;color: #6f3622;
   -webkit-box-shadow: inset 0px 0px 10px 0px black;
   -moz-box-shadow: inset 0px 0px 10px 0px black;
   box-shadow: inset 0px 0px 10px 0px black;}

.tag:hover {cursor: pointer;}
.tag._active {color: #495b3b;}
.move-count {
   display: inline-block;width: 150px;
   padding: 5px;border: 2px solid #B6B493;
   color: #B6B493;margin-left: 28.2%;
   background: rgba(0, 0, 0, 0.2);}

.restart {
   padding: 7px;width: 150px;margin: 120px 0 0 20px;
   font-size: 16px;border: 2px solid #B6B493;
   color: #B6B493;background: rgba(111, 54, 34, 0.8);}

.restart:hover {cursor: pointer;background: #6f3622;}
.restart:focus {outline: none;}
.ver {font-size:11px;margin:0 0 0 70%;}
</style>
//hapus kode ini jika Template Anda sudah menggunakan jQuery...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
  Array.prototype.shuffle = function(){
    for (var i = 0; i < this.length; i++){
      var a = this[i];
      var b = Math.floor(Math.random() * this.length);
      this[i] = this[b];
      this[b] = a;
    }
  };

  var $el = {
    cell: $('.cell'),
    moves: $('.moves'),
    field: $('.game-field'),
    restart: $('.restart')
  };
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/the-numbers-game.js"></script>
<div class="game-field">
   <div class="cell" data-cell="1"></div>
   <div class="cell" data-cell="2"></div>
   <div class="cell" data-cell="3"></div>
   .....
   //teruskan sampai data-cell="16" seperti ini...
   <div class="cell" data-cell="16"></div>
</div>
      <div class="move-count">
          Total Slide: <span class="moves"></span>
      </div>
<button class="restart">Restart</button>
<div class="ver">ver.1.0.0 | Design by: </div>



Jangan terlalu keasyikan ya bermainnya, hehe..!! dan jangan sampai Anda melewatkan artikel menarik lainnya disini:
TOP GOOGLE SEARCH
      Membuat Tombol Share Terbaru Efek Transisi
      Tampilkan Foto Kecil Saat Gambar Utama Dihover
      Membuat Menu Navigasi Fixed Fly Out Dengan CSS3

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Game Menyusun Angka
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 >>
= TERIMA KASIH =

22 komentar

  1. Game baru lagi buatan Mbak Devy ya, namanya menyusun angka bisa sambil belajar berhitung. saya coba dulu gimana cara mainya ya Mbak.?.

    BalasHapus
    Balasan
    1. iya mas saud, ya hitung-hitung sambil belajar berhitung, hehe..

      Hapus
    2. KODE STAR SIX..

      DELETE THIS COMMENT

      Hapus
    3. whether there is something wrong Mr. Aldino with the symbol, because devy really do not know what it means, because it is only an effect only in the tutorial blog. No connection or specific intent, willy..!!

      Hapus
    4. hehehe..Ok. aman..!,
      sy paham Vy..!,.

      ijin lanjutkan perjalanan.. jelajahi tiap judul s77,. ada yg dicari tp blom ketemu..!

      Hapus
  2. Setelah lihat emonya sungguh menarik ini bisa di pasang di blog kan Mbak. coba saya kalau ada waktu senggang bisa di coba makasih Mbak Devy sudah berbagi

    BalasHapus
  3. deretan urutan sesuai 151 itu zigzag atau searah nih ? ntr sy mw coba ,,, sy juga hoby maen bgtuan ....heheh

    BalasHapus
  4. ow ,,, brti zigzag yah deratan angka urutnya ,,, soalnya angka dah urut 96 kli slide tapi gak ada reaksi flipping ,,,,heheheh :-)

    BalasHapus
    Balasan
    1. dg total slide yg sama pula kurang dri 151 urut zigzag dari arah kiri, gak ada reaksi flipping juga ,,,, hehehehe ,,, sy coba lg deh urut zigzaq dari arah kanan ,,. :)

      Hapus
    2. total slide 138 urut zigzag dari kanan sama gak ada reaksi flipping ,,, atau devy buat harus pas 151 slide yah ? baru ada flipping ..hehe

      Hapus
    3. sebenarnya urutan angka tidak devy desain dengan efek zigzag mas, saya memanfaatkan 4 sisi pada tabel kotak, sisi kanan, kiri, atas dan bawah, yang setiap permainan selesai maka efek flipping akan tampil, namun acakan akan mempersulit kembali jika kita mengulang game.

      Hapus
    4. jadi bukan harus pas 151 slide, devy membuat 150 slide dan 1 slide sebagai kelebihan slide saat menyusun, bisa saja susunan angka dari kiri-kekanan seperti tulisan, tetapi bisa saja dimulai dari susut sisi kanan kebawah,

      devy sengaja mempersulit, karena saya mengisi PIN BB saya dibalik tab cell angka, saat efek flipping sudah terbuka.

      Hapus
    5. udah sy selesain pertama dengan total slide 98 urt dri arah kiri seperti utulisan tapi kok gak ada reaksi flipping yah ,,,heheh

      Hapus
    6. Bisa saja susunan angkanya seperti ini mas:
      http://4.bp.blogspot.com/-OOf7yu9xPNI/VHQNNv2eG8I/AAAAAAAABbk/h7raq6AY9n0/s1600/susun-angka.png

      hanya membutuhkan 102 slide dalan Start pertama. tetapi bisa saja bukan seperti itu pada start pertama, misala seperti ini:

      1 5 12 13
      2 6 11 14
      3 7 10 15
      4 8 9

      Hapus
  5. susan angka gini bakalan gak siap-siap ne saya menikmati game dari mbak devy nya....
    saya numpang main game saja deh mbak... 8-)

    BalasHapus
  6. Saya numpang main game saja mbak :3

    BalasHapus
  7. susah jawabnya jadi makin lama nih nginep disini hehe

    BalasHapus
    Balasan
    1. mumpung lagi hujan diluar teh, jangan pulang dulu, ntar kalau dpaksain bisa basah-basahan lagi, terus demam, terus ditanya, habis darimana, dari rumah online Devy, kan bisa repot urusannya,,

      tunggu hujan reda aja ya teh, baru balik, hehe..

      Hapus
  8. Aku cuma dapet 148 slide.. :-d ini mah mainan yang paling aku suka. Hehe. Tapi saya kurang banyak angkanya. Coba ada 100 biji .. :d

    BalasHapus
  9. gimana jadiin 3 x 3 teh?

    BalasHapus
  10. bagus gamenya bisa buat pelajaran

    BalasHapus
  11. yang ini saya pasang ya min, soalnya ada angka2 nya kelihatan lebih indah =))

    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