Snake Game With Javascript

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>