Game Menyusun Angka

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.

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>