Cara Membuat Game Ular-Ularan Diblog - Hanya sekedar iseng, sambil blogwalking dan berkomentar diblog tetangga, sambil bermain game ular-ularan deh ala SAHABAT BLOGGER 77 hehe..!!. Game ini merupakan versi ke-2 setelah diartikel sebelumnya telah saya buat permainan yang sama Snake Game (permainan jadul ular-ularan) dengan JavaScript Only. Untuk game kali ini akan saya permudah cara bermainnya, seperti zaman pertama kali punya HandPhone, pilih game lalu tekan tombol play maka si ular akan mencari mangsanya dengan berputar-putar sesuai perintah Anda.


CARA BERMAIN
Pada tab sebelah kanan area game, sudah saya tuliskan semua perintah untuk menjalankan game ular-ularan ini diblog Anda. Untuk memulainya cukup tekan tombol SPACE (Spasi) pada keyboard PC Anda, lalu arahkan dan gerakkan si ular menuju food (makanan) sedekat mungkin menggunakan tombol ARROW ICON (Tanda Panah) kiri, kanan, atas dan bawah yang terletak dipapan keyboard komputer Anda.


PERHATIAN :
INGAT..!! Jangan sampai siular menabrak garis list area game, jika itu terjadi game akan berhenti dan Anda KALAH (Game Over), karena kecepatan level satu saya atur dengan 1.555/m.detik, lumayan cukup cepat. Game dimulai dari level 1, semakin banyak si ular makan maka siularpun semakin panjang dan level semakin bertambah seiring bertambahnya skor yang Anda dapatkan, begitupun untuk kecepatannya. Untuk keluar dari game ini, Anda tekan tombol ESC. Bagaimana, mau mencoba..?





PLAY GAME




Snake game



BACA JUGA
Mengajak Pengunjung Agar Tertarik Untuk Berkomentar


Oh iya, barangkali sahabat semua ingin bermain game ini diblog Anda sendiri, berikut elemen-elemen kode untuk Membuat Game Classic Ular-Ularan secara komplit. Elemen CSS pembentuk tampilan, lengkapnya seperti ini:



<style type='text/css'>
#game {width: 650px;margin: 0 auto}
#gameStage {
  width: 400px;height: 300px;float: left;margin-right: 20px;
  border: 4px double #1D6609;background:#ebe2ce;position:relative}

#gameInfo {
  width: 210px;height: 300px;float: left;border-radius:15px;
  background:#ebe2ce;font-family:sans-serif; font-weight:bold;
  text-align:center;color: darkred;border: 4px dotted #111}

.bodypart {height: 8px;width: 8px;position:absolute;background: red;border-radius:3px}
#points {margin:5px;height:120px;margin-top: 10px}
#rules {
  margin:3px; font-size:12pt;border: 1px solid black;
  border-radius:15px;box-shadow:2px 2px 3px #333;color:green}

.food {height: 8px;width: 8px;position:absolute;background: green;border-radius:5px}
#gamemsg {font-size:16pt;margin-top:-35px;visibility:hidden;color:#E01B6A}
</style>



Menyisipkan JavaScript untuk memanggil perintah TAB keyboard seperti: SPACE, ESC dan ICON ARROW di komputer Anda, namun perhatikan script yang saya beri warna MERAH. JavaScript perintah, lengkapnya seperti ini:


// Hapus script ini, jika Template Anda sudah menggnakan script-jQuery yang sama...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
var gameBoard;
var snake;
var moveDirection = 'right';
var gameExecutor;
var gameSpeed=100;
var roundNum = 1;
var eatenItemsCount =0;
var MAX_FOOD_ITEMS = 12;
var gameFieldRelativeWidth = 30;
var gameFieldRelativeHeight = 30;
var snakeElementWidth = 8;
var snakeElementHeight = 8;
var ESC = 27;
var SPACE = 32;
var LEFT_ARROW = 37;
var UP_ARROW = 38;
var RIGHT_ARROW = 39;
var DOWN_ARROW = 40;
var food;
$(document).ready(function() {$('body').keydown(keyPressedHandler);});
//]]>
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/game.js"></script>


HTML Markup

<div id='game'>
  <div id='gameStage'></div>
    <div id='gameInfo'>
      <div id='points'>
           <div>Your Score:</div>
           <div id='score'>0</div>
           <div>Speed Level:</div>
           <div id='speed'>1</div>
      </div>
      <div id='gamemsg'>
           <div id='nextRndMsg'>Next Round!</div>
           <div id='loseMsg'>You lose! Try again</div>
      </div>
         <div id='rules'>
Press <span style="color:red">SPACE</span> to start or restart the game.
* Use arrows to move *
Press Esc to quit
         </div>
    </div>
</div>


Semoga kejenuhan Anda dapat berubah menjadi keceriaan dengan bermain game ular-ularan ini, pekerjaan sudah selesai, waktunya Devy mohon pamit ya guys..!! semoga terhibur..
Happy blogging..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Game Ular-Ularan Diblog
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 =

60 komentar

  1. Sy coba dulu ah ... ada dorprize nya gk nih dri devy ...hehehe :P

    BalasHapus
    Balasan
    1. dorprize nya kalau mas fiu kalah, traktir es doger (c)

      Hapus
    2. halah ...... itu mah maunya kg jum .... masa klu sy kalah sih ....hhahaha

      Hapus
    3. kebetulan game ini saya desain pada level 10, kecepatannya 0.012/m.second, ibarat naik motor 478km/jam, jikia bisa sampai pada level itu, Devy kasih pin BB, mau..?
      hehe..!! (selamat berjuang mas Fiu) usaha attuh..!!

      Hapus
    4. mw dpt pin bb nya devy butuh perjuangan banget nih ,,,,hehehe

      Hapus
    5. biasanya kan cowok paling suka jika diberi tantangan, apalagi kalau itu berhubungan dengan gebetan, pasti dech pantang mundur, bersaing saja mau kan.?
      hehe..

      Hapus
    6. Mau donk ... kn butuh pengorbanan kata devy ...hehehe
      tpi ini bru nympe level 5 aja jari dah limayan lincah mencetnya ...hehe

      Hapus
    7. baru setengah level mas, level 5, jadi nilainya masih 50:50, gak usah sampai level 10 dech, Devy kurangin hanya sampai level 8 saja, level terakhir 2level lagi anggap saja BONUS dari Devy, hehe..

      Hapus
    8. Asik dikirangin .... semangat ...wlo ularnya kejedot dinding trs klo dj nyampe level 5 keatas ...hehe

      Tpi yg beda dsini selain awal kecepatan beda, ularnya bisa dibolak balik jalannya ...hehe kepala jadi ekor ekor jadi kepala ...hehehe

      Hapus
    9. oooo ada sayembara tooo....!
      masih buka tidak sayembaranya Mas Fi..?..

      nda niat ikut..
      cuma mau tanya ke Devy ..kode css untuk pasang perangkap ularnya apa...

      Hapus
    10. benar mas Fiu, seperti janji saya, permainan ini akan saya permudah, jadi jika tidak sempat membelokkan si ular, tinggal diubah kepala jadi ekor, dan ekor jadi kepala dengan ARROW ICON TAB.

      Hapus
    11. Huaaaa ... nyampe level 6 mkin panjang aja ni ular udah gtu cepat pula .... eh kejedot lg di dinding ... kpn bsa dpt pin bb klo kejedot mulu ....hahahahaha

      Hapus
    12. kecepatan setiap level saya buat berlipat mas, jadi kecepatan pada level 1 akan dikalikan 2 saat berada pada level 2, dan seterusnya, kenapa ini saya lakukan, karena game seperti ini sudah banyak yang mengenal dan pernah memainkannya, jadi kalau dipercepat sedikit kan lebih ada tantangan gitu.?
      apalagi ada dorprizenya, hehe..!!

      Hapus
    13. hhehehe, huh ... bru dpt score 203 level 6 ,,, cepetnya bkin kejedot ditembok trs nih ,,,

      Hapus
    14. score nya bru nympe 286 level 7 ... makin cepat aja nih ,,, :D

      Hapus
    15. semangat semangat...!, tinggal satu level lagi..
      kalo dapat bagi ke sy jg ya..tp jgn bilang2 Devy..

      Hapus
    16. hayoo..mau rahasiaan-rahasiaan samaDevy neh, hhmmmmm..kagak asyik ah kalau gak terbuka gitu ma Devy, hehe

      Hapus
    17. hehehe, devy bkn sy loh yah yg bilng mw rahasia2an ,,, tuh mas al yg bilg bgtu ,,, lgian gmn mw rahasia, ini game aja maen game gk nympe2 8 pdahl tinggal 1 lvell lg ,,, :(

      Hapus
  2. alamak...muantab dev...yang lain baru bikin widget di blog, kamu udah bikin game buat blog...terus asik juga tuh kalau dimainkan....udah nyoba di tampilan demo tadi. lumayan buat ngilangin stress dan nambah wawasanlah masalah codingnya....rada cepat juga sih tapi bagus buat kejelian menjalankannya....ane main dulu ya mbak. terima kasih

    BalasHapus
    Balasan
    1. tadinya sih mau bahas widget diary transisi mbah, tetapi berhubung kodenya belum siap untuk diracik, jadi bahan-bahannya masih menunggu hasil kompres, biar widgetnya berjalan sempurna. baru dech diterbitkan, hehe..

      ya iseng-iseng mbah, biar gak terlalu riyeh membahas kode-kode melulu,,riyet kata orang sunda teh,

      Hapus
    2. he eh kadang mumet juga kalau berkutat dengan masalah kode...makanya kadang saya bikin tulisan ringan atau apalah untuk memberi sedikit kelonggaran berpikir buat pengunjung....jadi mereka juga merasa beda dan tidak ikutan pusing kayak kita dev...heeee

      Hapus
  3. raiso praktek lewat hape aku, mbak :-(

    BalasHapus
  4. Saya udah main tapi cuma sampai score 9 ;(. gamenya keren, nda berat, gak perlu bantuan flash swf pula... (o)

    BalasHapus
    Balasan
    1. takutnya kalau pakai flash bisa merusak jQuery yang ada didalam Template mas, CSS notebandnya lebih ringan, game juga bisa dimainkan toh, hehe..!!

      Hapus
  5. mba devy ularnya terlalu cepet dibikin delay aja biar gampang :D

    BalasHapus
    Balasan
    1. tetapi kan sebelumnya game ular-ularan seperti ini sudah lebih awal kita pernah mainkan, jadi dibuat lebih cepat pada level pertama biar ada sedikit tantangan begitu mas,.

      kalau mau lebih lambat ubah var-speed menjadi 60 pada JavaScript.

      Hapus
  6. hahaha udah lama gak main game ini barusan baru nyobain lagi hehe,ternyata lebih seru main di blog daripada di hp. :D

    BalasHapus
  7. Ngingetin sama Nokia 2100 nih, haha. *angkatan tua*
    Tadi main,sampai speed level 3. Skornya 38, mbak Devy. :D

    BalasHapus
    Balasan
    1. kalau Devy pertama kali main Game ini pada HP 3315 Nokia, siular sampai panjang gak kalah-kalah..

      Hapus
    2. Aku lebih dulu pegang 2100 sih soalnya. Emang ular-ularan ini game legend

      Hapus
  8. oh yaa...kemarin saya ambil kode permalink dan saya modifikasi dikit buat menyesuaikan dengan tampilan template saya dev...mohon izin ya sista...
    terus mengenai javascript: move direction kok cuma right ya...tapi yang kirinya bisa jalan juga...berarti ditentukan oleh pengaturan arrow ya dev...masih bingung juga bacanya...maklum masih belajar js sista...

    BalasHapus
    Balasan
    1. gak apa-apa mbah, toh Devy juga sering ambil tehnik-tehnik dari mbah dinan kok, hehe..saling berbagi itu kan indah, bukan begitu mbah..?

      variabel js. move-direct:"right" maksudnya, saat tombo SPACE ditekan maka siular akan keluar dari kiri dan berjalan kearah RIGHT (kanan), jika dirubah menjadi left, maka sebaliknya siular akan bergerak maju kearah kiri.

      Hapus
  9. seru juga main game ular di blog :) ,terimakasih udah share cara membuatnya :)

    BalasHapus
  10. Devy, bisa membantu ngak? gi mana sih mau masang rollbox padal comment box saya... kok ngak ketemu kode nya... bantuin dong

    BalasHapus
    Balasan
    1. tidak ada kode yang mengatur rollbox pada comment KK, tetapi kode itu harus kita tambahkan untuk membuatnya.

      rollbox maksudnya untuk memperpendek lajur komentar yang masuk jika dalam jumlah banyak, sehingga perintah scroll akan ditampilkan, jadi tubuh komentar harus kita batasi tingginya. contoh seperti ini:

      .box {
      width:340px !important;
      border: solid 2px #39f;
      padding: 8px 12px;
      height:250px;
      overflow:auto;
      }


      dengan kode itu, kita membuat box dengan lebar (width:340px) dan dengan nilai tinggi yang terbatas height;250px, artinya jika isi dalam box melebihi tinggi yang sudah kita atur, misalnya sebesar 400px, maka rollbox akan berlaku.
      sama seperti tubuh komentar, tambahkan kode height:450px (atau sesuai selera) lalu atur muatan dengan perintah overflow:auto (artinya - semua muatan akan ditampilkan melebihi nilai pada height) namaun tampilan dibatasi dengan height:25px.

      Hapus
  11. Kalo sy.. tdk minta untuk di bantu Mas Najib Ariyan
    cuma mau tanya ke Bu guru Devy..

    Judul post memberi bayangan dgn efek kurva, cssnya sy ambil untuk dipasang..
    ternyata..saat dipasang.. kenapa miring2 ke atas ya.. (lihat head blog sy ya Vy... Pliss)
    salahnya di mana?
    *header {*
    background-color:#fff;
    background-image:url(http://3.bp.blogspot.com/-hs54aIS6o18/VIBNUZVQxVI/AAAAAAAADpM/6K1n69FxjpY/s1600/sya.jpg);
    border-bottom:1px solid rgba(0,0,0,0.12);
    position:relative;
    float:left;
    width:100%;
    z-index:99
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    bottom: 36px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
    height: 20%;
    left: 10px;
    max-height: 100px;

    *}*

    makasi Vy.. rencananya mau buat seperti yg di demoshow judul efek kurva..

    tadinya juga mau penggal kepalanya.. mau ganti seperti yg di demo shhow.. berhubung saat menerapkan ke template.. hanya box hitam persegi bertuliskan s77 yg muncul.. sementara efek melengkung/kurva tidak ada efek sama sekali..


    BalasHapus
    Balasan
    1. kode CSS yang mas Al tuliskan tidak salah, cuma perhatikan dalam menempatkan elemen ::before dan ::after, efek ini menggunakan 2 pengaturan sisi yang berbeda, sisi-left dan sisi-right, kita hanya ambil untuk menampilkan sisi left dan right, sedangankan bottom-center-shadow kita naikkan keatas dengan nilai 0, seperti ini:

      .span:before, .span:after {
      content: "";
      position: absolute;
      z-index: -2;
      -moz-transform: rotate(-3deg);
      -webkit-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
      bottom: 36px;
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
      height: 20%;
      left: 10px;
      max-height: 100px;
      //lebar kedua sisi (kiri dan kanan)
      width:350px;}

      .span:after {
      -moz-transform: rotate(3deg);
      -webkit-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);
      left: auto;
      right: 10px;}


      Namun perhatikan halaman header yang akan kita beri shadow (bayangan), jika itu satu tubuh, atau satu wilayah dengan posting-page, maka efek ini tidak akan terjadi pada header, karena tubuhnya menyatu dengan posting page, jadi elemen CSS header dan post sama.

      Hapus
    2. oh iya lagi mas, agar lebih fokus dengan kode yang mas Al tanyakan, saat hendak menuliskan kode dalam komentar, mas gunakan kode seperti ini dalam komentar:

      <i rel="pre">
      ...Sisipkan Kode Disini...
      </i>

      Hapus
    3. sepertinya begitu Vy..!, kepala dgn body post mnyatu..!

      sekali lagi, makasi ats penjelasannya ya..!?

      Hapus
    4. iya..iya..nda tau Vy..

      i rel Preeeeeett..! Ok sdh hapal

      Hapus
    5. jika untuk judul mas cari elemen tag heading yang membungkus teks judul pada CSS, biasanya ada kode h1,h2,h3 dst...

      seperti yang saat ini, jika judul dihover maka akan berubah dengan tampilan background dan rotate, ganti kode hover dengan kode :before dan :after seperti diatas, lalu beri border, dan pada elemen CSS tunggal tag judul jangan diberi efek rotate seperti yang mas tuliskan pada header.

      Hapus
    6. tambah pusing Vy..!.. masih kurang paham..

      Hapus
    7. Vy..! mau tanya lagi.. untuk lebar kiri kanan header, untuk merubah bagian kodenya di mana ya? tp.. tetap responsive..

      sudah ada perubahan.. shadow di bawah.. semula pake deg.deg..-/+ malah heder ygmiring ke atas.. bukan ujung header..
      mohon solusinya bagaimana ya.. :))


      header {
      background-color:#fff;
      background-image:url(https://lh3.googleusercontent.com/myl7lntkT8irF1MBTr7ZLP_ony90SfIJHhTyBDaKIjY=w719-h220-p-no);
      border-bottom:1px solid rgba(0,0,0,0.12);
      position:relative;
      float:left;
      width:100%;
      z-index:99
      bottom: 36px;
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
      height: 10%;
      left: 0px;
      max-height: 200px;
      //lebar kedua sisi (kiri dan kanan)
      width:350px;}
      left: auto;
      right: 10px;
      }

      Hapus
    8. Nah tuh cakep mas, hehe..
      jika pemanggil header dengan class, mas cukup tambahkan kode efek kurvanya saja seperti komentar sebelumnya mas, seperti ini:

      .header:before, .header:after {
      ......
      .....
      }

      .header:after {
      -moz-transform: rotate(3deg);
      ......
      ......
      }


      Kalau untuk sisi responsive tidak ada masalah mas, tadi sudah Devy lihat hasilnya. header-page blog mas Al sudah responsive

      Hapus
  12. seperti game ular yang ada di hp nokia 1200, layar kuning dulu.. jaman dulu banget. tapi ini lebih kencang

    BalasHapus
  13. kayaknya masih main ular-ularan ya dev...biar kayak game jadul tapi ini hasil karya sendiri dan penerapannya di blog...hehehe

    oh ya...saya mau ucapkan terima kasih atas masukannya...untung juga punya kawan jago coding...heheee...sudah saya update sista...terima kasih banyak sekali lagi...

    dan...

    mohon izin dulu main ular-ularan...bukannya gak mau pasang di blog, tapi kalau main di sini sekalian silaturrahmi dev....gak papa kan?

    BalasHapus
    Balasan
    1. Devy bukan jago kok mbah, buktinya tidak bisa berkokok, hehe..

      terimakasih kembali mbah, dan pintu rumah Sahabat Blogger 77 selalu terbuka buat sahabat mbah dinan khususnya,hehe..!!

      Hapus
  14. barusan maen cuma bisa ampe level 3 :( nostalgia zaman dulu,, pertama main game ya main ular-ularan kaya yang ini, di hp yang gede terus ada pemancarnya itu loh, tapi lupa tipenya apa,, @-)

    BalasHapus
  15. tadi pas coba demo nya asyik juga ya mbak , jadi pengunjung bisa lebih betah lagi nih,,, hehehe..
    makasih mbak.. (h)

    BalasHapus
  16. lama-lama jadi developer game mbak hehee

    BalasHapus
  17. Itu akan membuat blog semakin lelet gan :)

    BalasHapus
    Balasan
    1. kalau gak tahu meringkas kode dan fungsi-fungsi deklerasi tag kondisional jawabannya YA, Anda bisa buktikan dalam page blog DEMO SHOW di blog ini, semuanya membahas effect dengan penggunaan elemen CSS,js,jQuery,PHP dan lain-lain tetapi bisa saya pastikan, blog itu (DEMO SHOW) lebih cepat loadingnya dari blog anda.

      belajar meringkas kode gan sebagai tahap awal saja, biar gak takut nanti kalau pasang widget, takut berat loading, :-)

      Hapus
  18. Waduh Mbak Lelet gk ?
    ijin nyoba aja + nyimak yahhh ..
    blognya udah seo bangett 100 jempol deh buat mbak
    http://android-kukusan.blogspot.com/2015/02/backlink-kunbal.html

    BalasHapus
  19. waduh saya kalah terus nih main-ularannnya ...
    mainkannya saja sudah sudah apalagi membuatnya ya?

    BalasHapus
  20. Seru gamenya... Skor gue cuma 8 :-)
    Kira-kira mbak Devi bisa bikin game tetris nggak ya?

    BalasHapus
    Balasan
    1. Game tetris itu permainan yang menyusun balok (bata) seperti itu kah mas, kalau iya insyaAllah Devy akan buatkan.

      Hapus
    2. Yup! Betul mbak! Kalau kita berhasil menyusun balok-balok hingga tersusun tanpa celah atau membentuk satu atau lebih garis horizontal balok yang sempurna, baris balok tersebut akan collapse. Wah mau dibuatin game sama mbak Devy, jadi nggak enak saya ngerepotin... :)

      Hapus
    3. .Ini toh yang request gamenya, hehe. Nice Req gan. :D

      Hapus
    4. iya mas, tadinya mau tampilkan link google+ mas Anza, tetapi mas anza gak membukanya untuk publik, mau berkunjung ke situs beliau yang mana saja saya gak tahu,

      Hapus
  21. jadi nostalgia sama game klasik nokia :d

    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