9.11.14
59
Snake Game With Javascript - Ada saatnya waktu dimana rasa lelah akan sesuatu menghampiri diri kita, seperti mendesain atau mengubah tampilan blog agar terlihat tampil menarik, membuat widget pada halaman sidebar dan lain-lain yang semuanya itu banyak dibahas dalam blog sederhana ini "SAHABAT BLOGGER 77". Tetapi bukannya Devy mau berhenti untuk berbagi pengetahuan seputar tutorial blog dan cara-cara mendesain tampilan template, hanya libur sesaat membahas hal tentang itu, butuh hiburan untuk meringankan sedikit pikiran dengan bermain permainan JADUL (Jaman Dulu) yaitu SNAKE GAME.

Snake game, permainan ular-ularan yang pasti sahabat semua pernah melihat bahkan memainkan game ini pada beberapa type mobile phone. Hanya karena saat ini kita berada pada zamannya Android, sehingga game ini berangsur-angsur hilang ditelan mas +Aldino Sya dan mas +Fiu S hehe...!!!!, pertemuan kali ini saya akan tampilkan kembali langsung pada blog Anda Permainan Simple Snake Game With Javascript seperti ini:




PLAY GAME



Gambar Loading Please Wait...


Game ini saya bentuk dengan menggunakan JavaScript variable, sedangkan untuk menghindari beban loading halaman, saya tidak menggunakan efek loading pada game (Super Ringan). Untuk menjalankan game ini, saya menghubungkan komponen pada keyboard PC Anda sebagai perintah untuk menggerakkan animasi snake kekiri, kekanan, keatas dan kebawah dengan tombol panah pada papan keyboard PC Anda.


SEKILAS INFORMASI :
Game ini hanya support untuk Template HTML5, karena elemen yang saya gunakan adalah canvas data sebagai dasar pembuatan game, sehingga game ini bisa dijalankan pada blog.


Game Test Kecerdasan Ala SAHABAT BLOGGER 77 pada permainan sebelumnya, saya tidak memberikan kode cara membuatnya, tetapi karena hari ini saya lagi baik hati dan tidak sombong hehe..!!, terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, berikut kode lengkap cara membuat Snake Game With Javascript di blog Anda:



<style type='text/css'>
//*snake games
original type: script variable game element
support: html v-5 (canvas data)
design by. http://sahabatblogger77.blogspot.com
date on: November 09, 2014
author: Devy Indriyani*/
canvas {border: 2px solid rgb(151, 149, 149);}
.container {text-align:center;margin:0 auto;}
.ribbon-top {
  font:bold 25px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:555px;
  padding:0px 20px;
  background:green;
  position:relative;
  line-height:48px;
  margin:0 auto;
  text-align:center;}

.ribbon-top:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:10px;
  border-width:8px;
  border-style:solid;
  border-color:green green transparent transparent;}

.ribbon-top:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:10px;
  border-width:8px;
  border-style:solid;
  border-color:green transparent transparent green;}

.ribbon-bottom {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:543px;
  padding:0px 10px;
  background:green;
  position:relative;
  line-height:30px;
  margin: -6.5px auto;
  text-align:center;}

.ribbon-bottom:before {
  content:"";
  position:absolute;
  bottom:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent green green;}

.ribbon-bottom:after {
  content:"";
  position:absolute;
  bottom:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:transparent green green transparent;}
</style>
<script type='text/javascript'>
//<![CDATA[
var Game      = Game      || {};
var Keyboard  = Keyboard  || {};
var Component = Component || {};

Keyboard.Keymap = {
  37: 'left',
  38: 'up',
  39: 'right',
  40: 'down'
};
//]]>
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/snake-game.js"></script>
<div class="container">
   <div class="ribbon-top">SNAKE GAME</div>
     <canvas id="stage" height="400" width="520"></canvas>
   <h4 class="ribbon-bottom">Selamat Bermain</h4>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Snake Game With Javascript
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 =

59 komentar

  1. ambil petromaksnya dulu..!

    BalasHapus
    Balasan
    1. kan kagak mati lampu mas,

      Hapus
    2. betul..betul..inih dari kode2 saja Kan Vy..?

      Hapus
    3. yups..!! js script, sedangkan untuk tampilan sedikit dengan CSS ribbon.

      Hapus
    4. Vy,..mau nanya..!
      Load blog kamu cepat .. rahasianya apa?,.

      Hapus
    5. iya ya koq loadingnya cepet banget mbak, bagi-bagi rahasianya dong...
      ah saya mah mo panggil Mbak Devy teteh aja ya, tadi liat diprofil kayaknya urang Bandung nya? Apa cuma domisilinya aja yang di Bandung :)

      Hapus
    6. Berhubung petromak dah diambil Mas Al, saya pinjem lampu cempornya ada gak? kalo kagak lampu damar juga boleh :D

      Hapus
    7. kagak ada yang harus dirajik kok mas Al, jadi gak ada ramuannya, hehe,,

      penggunaan tag kondisional, makanya banyak mereka yang bilang takut loading blog berat kalau banyak menggunakan script kode, nah ini buktinya, template saya ada 26 bentuk js yang berbeda, 31 kode CSS, namun akan bekerja jika hanya diperlukan saja, jadi tidak pengaruh terhadap loading.

      bungkus semua kode yang sekiranya memberatkan loading page dengan tag kondisional mas,

      Hapus
    8. iyyaaa...! Tapi caranya bagaimanaaa Vy..!.. Nenk Cantiiiiiiik..!,

      Hapus
    9. +Marnes Kliker jangan panggil teteh attuh mas, Devy masih 19 tahun kok, panggil neng aja, Devy aslinya bandung mas, tetapi karena dulu lama tinggal dibekasi-jakarta akhirnya devy kurang begitu pasih bahasa sunda, hanya nyaho saetik-saetik. hehe...

      Hapus
    10. walaaaah daun muda nie wkwkwkkkk... oh gitu toh...
      panggilan neng itu saya paling suka banget, oke deh mulai sekarang panggil neng geulis aja ya :)

      Hapus
    11. iya-iya dech mas Al, ntar devy beritahu rahasianya, tetapi jangan disni ya, ntar banyak yang mau lagi, hehe..

      sedikit bantuan untuk mengedit load-speed, jika devy lihat blog mas Al, pada halaman header begitu banyak ruang kosong, terus kalau menggunakan background kalau bisa jangan dengan gambar warna, jika pun harus gunakan perintah linear-gradient untuk membentuk warna.

      setelah itu hapus lekukan pada semua baris kode template. sehingga saat laman dimuat tidak membutuhkan ruang yang banyak dalam mengindeks kode tersebut.

      Hapus
    12. Belum paham cara mainin game ular ularan ini Mbak Devy

      Hapus
    13. maen game ular beneran aja mas biar lebih menantang gitu lho :D

      Hapus
    14. mau dong mbak saya dikasih tahu tentang cara membungkus semua kode yang sekiranya memberatkan loading page dengan tag kondisional, biar blog saya ringan...skarang agak berat kayaknya

      Hapus
    15. rame banget ya, saya ikut nimbrunglah

      Hapus
  2. aaah..nda konsen.. masih dgr lagunya warkop..dari Mas Marnes..!

    BalasHapus
    Balasan
    1. Mbo' ya dipateni disit soundnya mas :D

      Hapus
    2. loh sikakek sudah berubah wujud toh jadi mas aldi.kkwkwkw

      Hapus
    3. :d roh si kakek sdh keluar Mas Yan..!

      Hapus
    4. trus yg menunggu dibelakangmu itu siapa mas??
      hii

      Hapus
    5. Neng Devy mendingan buruan bobo gih, nie aki-akinya soalnya ada 3 nie, saya gak rela kalo neng Devy dikerubutin 3 aki-aki ini, eh 2 aki-aki doang ding da saya juga masih ABG atuh :D

      Hapus
    6. waduh kalau jagonya modus dah datang saya mundur teratur deh
      ngintip mas marnes aja

      Hapus
    7. jangan suka ngintip tar matanya bintitan lho...

      Hapus
    8. hehehe..sumpah..! pasti tuan rumah bingung mau jawab yg mana dulu..!

      Hapus
    9. yang punya rumah dah tidur mas, yuk ngebahas ISIS lagi aja...

      Hapus
  3. Kirain teh gamesnya bisa didonlot gituh... ini mah maennya harus di blog ya, nanti saya coba deh, sekarang masih patroli dulu nie...

    BalasHapus
    Balasan
    1. hanya memindahkan yang dulunya ada pada mobile phone ke blog, sembari blogwalking iseng-iseng bermain game buatan Devy, hehe,,..

      Hapus
  4. wow mbak devy sedang getol bikin game nih

    BalasHapus
    Balasan
    1. bukannya begitu mas Yan, cuma lagi iseng-iseng aja kok, lagian Devy lagi males membahas kode-kode widget,

      butuh hiburan saja, hehe,,

      Hapus
    2. woooiii.... tidur-tidur... dah jam barapa nie coba? besok kan harus sekolah, itu PR dah dikerjain blom? :D

      Hapus
    3. ini barusan sudah ngerjain istri mas.kwkwkw

      Hapus
    4. Mas Marnes ~ gimana mau tidur,.. Mas Kasino suruh bubar dolo nyanyinya..bawa2 engkong saya lagi..hihihiih

      Hapus
    5. ko saya gak diajak? kali butuh bantuan saya gituh ckckckk...
      kalo dah capek ngomong ya Mas Yan, biar saya yang gantiin wkwkwkwk...

      Hapus
    6. hahahahahahahahahahahahahahahahahahahahahha hacciuuuuuuu...!

      Hapus
    7. udah malem mas harap maklum ya, lupa blom minum obat soalnya jadi konsletnya mulai kumat duah :D

      Hapus
    8. saya ngalah deh sama mas marnes
      kalah deket sih
      coba saya ada dijabar.hehehe

      Hapus
    9. Ah Neng Devy nya juga dah bobo kali mas, pulang yuk!!

      Hapus
    10. hehhehe...yaa..pulang..

      *Kakek ngomong*
      nag Mas Yan..! Tongkak Kakek titip doloe ya..!,

      Hapus
  5. Game baru buat lagi ya Mbak Devy saya coba deh makasih :)

    BalasHapus
    Balasan
    1. baru juga saya mo pulang, ini lagi aki-aki baru nongol hahaahahaa...

      Hapus
    2. kenapa sih hari ini rame banget,2 pergi 1 datang
      mau tidur pada berisik
      hadeuhh

      Hapus
  6. bentar bentar ... kyknya ada yg gak beres nih postingan ,,,, roman-roman nya ada yg bilang sy menelan game ular2an nih ? gimana ceritaya .... :p [-(

    klo mas aldino sih sy bru pecaya klo menelan game ular,,, secara kan suka nelan tuh ular hidup2 juga ,,,heheheh

    BalasHapus
  7. bagus ya game nya....jadi ingat dulu mainan hp yang ada game snake nya sampai mau selesai, penuh smua :D

    BalasHapus
  8. Pengen nya maen game ular yang beneran mbak, ada nggak? :d

    BalasHapus
  9. bisa sebagai hiburan nih di saat penatnya ngurusin dumay hihi.. (o)

    BalasHapus
  10. tadi saya cek demo gamesnya jadi inget ama Gamebot :D

    BalasHapus
  11. main nih buat seru2an :D bisa dikembangin sis

    BalasHapus
  12. kox jalanya lurus terus ya, apa sayanya yag ngak pande mainnya

    BalasHapus
    Balasan
    1. gunakan tool bar Tanda Panah pada papan keyboard di PC Anda, kan ada tanda panah kekiri, kekanan, keatas dan kebawah, gampang kok.hehe..

      Hapus
    2. oke lah kalo begitu mah Neng nanti aa coba lagi :)

      Hapus
  13. langsung main dan copas scriptnya, makasih mba..baik banget :)

    BalasHapus
  14. Numpang maen gamenya mbak... (c)

    BalasHapus
  15. asyik juga ya bisa bikin game sendiri, jadi bisa nge game sepuasnya ya kak ;)
    bisa dicoba nih tutorialnya ;)

    BalasHapus
  16. unik banget game nya .. :D bisa langsung saya pelajari tentang Javascriptnya nih , trimakasih :))

    BalasHapus
  17. Game snake, game legendaris.. Sejak awal punya hape, sering main game ini

    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