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.
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:
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:
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 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 >>
ambil petromaksnya dulu..!
BalasHapuskan kagak mati lampu mas,
Hapusbetul..betul..inih dari kode2 saja Kan Vy..?
Hapusyups..!! js script, sedangkan untuk tampilan sedikit dengan CSS ribbon.
HapusVy,..mau nanya..!
HapusLoad blog kamu cepat .. rahasianya apa?,.
iya ya koq loadingnya cepet banget mbak, bagi-bagi rahasianya dong...
Hapusah saya mah mo panggil Mbak Devy teteh aja ya, tadi liat diprofil kayaknya urang Bandung nya? Apa cuma domisilinya aja yang di Bandung :)
Berhubung petromak dah diambil Mas Al, saya pinjem lampu cempornya ada gak? kalo kagak lampu damar juga boleh :D
Hapuskagak ada yang harus dirajik kok mas Al, jadi gak ada ramuannya, hehe,,
Hapuspenggunaan 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,
iyyaaa...! Tapi caranya bagaimanaaa Vy..!.. Nenk Cantiiiiiiik..!,
Hapus+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...
Hapuswalaaaah daun muda nie wkwkwkkkk... oh gitu toh...
Hapuspanggilan neng itu saya paling suka banget, oke deh mulai sekarang panggil neng geulis aja ya :)
iya-iya dech mas Al, ntar devy beritahu rahasianya, tetapi jangan disni ya, ntar banyak yang mau lagi, hehe..
Hapussedikit 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.
;(( ;(( ;(( =))
HapusBelum paham cara mainin game ular ularan ini Mbak Devy
Hapusmaen game ular beneran aja mas biar lebih menantang gitu lho :D
Hapusmau 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
Hapusrame banget ya, saya ikut nimbrunglah
Hapusaaah..nda konsen.. masih dgr lagunya warkop..dari Mas Marnes..!
BalasHapusMbo' ya dipateni disit soundnya mas :D
Hapusloh sikakek sudah berubah wujud toh jadi mas aldi.kkwkwkw
Hapus:d roh si kakek sdh keluar Mas Yan..!
Hapustrus yg menunggu dibelakangmu itu siapa mas??
Hapushii
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
Hapuswaduh kalau jagonya modus dah datang saya mundur teratur deh
Hapusngintip mas marnes aja
jangan suka ngintip tar matanya bintitan lho...
Hapushehehe..sumpah..! pasti tuan rumah bingung mau jawab yg mana dulu..!
Hapusyang punya rumah dah tidur mas, yuk ngebahas ISIS lagi aja...
HapusKirain teh gamesnya bisa didonlot gituh... ini mah maennya harus di blog ya, nanti saya coba deh, sekarang masih patroli dulu nie...
BalasHapushanya memindahkan yang dulunya ada pada mobile phone ke blog, sembari blogwalking iseng-iseng bermain game buatan Devy, hehe,,..
Hapuswow mbak devy sedang getol bikin game nih
BalasHapusbukannya begitu mas Yan, cuma lagi iseng-iseng aja kok, lagian Devy lagi males membahas kode-kode widget,
Hapusbutuh hiburan saja, hehe,,
woooiii.... tidur-tidur... dah jam barapa nie coba? besok kan harus sekolah, itu PR dah dikerjain blom? :D
Hapusini barusan sudah ngerjain istri mas.kwkwkw
HapusMas Marnes ~ gimana mau tidur,.. Mas Kasino suruh bubar dolo nyanyinya..bawa2 engkong saya lagi..hihihiih
Hapusko saya gak diajak? kali butuh bantuan saya gituh ckckckk...
Hapuskalo dah capek ngomong ya Mas Yan, biar saya yang gantiin wkwkwkwk...
hahahahahahahahahahahahahahahahahahahahahha hacciuuuuuuu...!
Hapusudah malem mas harap maklum ya, lupa blom minum obat soalnya jadi konsletnya mulai kumat duah :D
Hapussaya ngalah deh sama mas marnes
Hapuskalah deket sih
coba saya ada dijabar.hehehe
Ah Neng Devy nya juga dah bobo kali mas, pulang yuk!!
Hapushehhehe...yaa..pulang..
Hapus*Kakek ngomong*
nag Mas Yan..! Tongkak Kakek titip doloe ya..!,
Game baru buat lagi ya Mbak Devy saya coba deh makasih :)
BalasHapusbaru juga saya mo pulang, ini lagi aki-aki baru nongol hahaahahaa...
Hapuskenapa sih hari ini rame banget,2 pergi 1 datang
Hapusmau tidur pada berisik
hadeuhh
bentar bentar ... kyknya ada yg gak beres nih postingan ,,,, roman-roman nya ada yg bilang sy menelan game ular2an nih ? gimana ceritaya .... :p [-(
BalasHapusklo mas aldino sih sy bru pecaya klo menelan game ular,,, secara kan suka nelan tuh ular hidup2 juga ,,,heheheh
bagus ya game nya....jadi ingat dulu mainan hp yang ada game snake nya sampai mau selesai, penuh smua :D
BalasHapusPengen nya maen game ular yang beneran mbak, ada nggak? :d
BalasHapus:d
Hapusasyik nge game lagi :)
BalasHapusbisa sebagai hiburan nih di saat penatnya ngurusin dumay hihi.. (o)
BalasHapustadi saya cek demo gamesnya jadi inget ama Gamebot :D
BalasHapusmain nih buat seru2an :D bisa dikembangin sis
BalasHapuskox jalanya lurus terus ya, apa sayanya yag ngak pande mainnya
BalasHapusgunakan tool bar Tanda Panah pada papan keyboard di PC Anda, kan ada tanda panah kekiri, kekanan, keatas dan kebawah, gampang kok.hehe..
Hapusoke lah kalo begitu mah Neng nanti aa coba lagi :)
Hapuslangsung main dan copas scriptnya, makasih mba..baik banget :)
BalasHapusNumpang maen gamenya mbak... (c)
BalasHapusasyik juga ya bisa bikin game sendiri, jadi bisa nge game sepuasnya ya kak ;)
BalasHapusbisa dicoba nih tutorialnya ;)
unik banget game nya .. :D bisa langsung saya pelajari tentang Javascriptnya nih , trimakasih :))
BalasHapusGame snake, game legendaris.. Sejak awal punya hape, sering main game ini
BalasHapus