games-html5

Games Sederhana dengan HTML5Yudha Yudhanto [email protected] http://www.rumahstudio.com Lisensi Dokumen: Copyright © 2003-2007 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com. HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com DOM. tanggal." type="application/xsilverlight-2" > <param name="source" value="SilverlightApplication1. dan opera. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif.xap"/> </object> Komunitas eLearning IlmuKomputer. firefox. waktu.Com Copyright © 2003-2007 IlmuKomputer. sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut <object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.flv" /> <param name="wmode" value="transparent" /> </object> Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.2006. nav. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. dan JavaScript Mengurangi ketergantugan untuk plugin eksternal (Seperti Flash) Penanganan kesalahan yang lebih baik Lebih markup untuk menggantikan scripting HTML5 merupakan perangkat mandiri Proses pembangunan dapat terlihat untuk umum Fitur baru dalam HTML5 :      Unsur kanvas untuk menggambar Video dan elemen audio untuk media pemutaran Dukungan yang lebih baik untuk penyimpanan secara offline Elemen konten yang lebih spesifik. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini <object width="300" height="300" data="data:application/x-silverlight-2. chrome. Berikut tujuan dibuatnya HTML5 :       Fitur baru harus didasarkan pada HTML.flv"> <param name="movie" value="flvplayer. email. CSS. header. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.Com . Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Beberapa browser sudah mendukung HTML5 seperti safari. Teknologi Silverlight dikembangkan oleh Microsoft. search. footer. seperti artikel.swf?file=movies/holiday. Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. url.swf?file=movies/holiday. section Bentuk kontrol form seperti kalender. Sekarang Anda bisa berimaginasi sendiri. Komunitas eLearning IlmuKomputer. Video dan Audio Akan ada tag <audio> dan <video> di HTML 5. kira-kira apa saja yang orang lakukan dengan <canvas>.00 dengan 385.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12. Apa yang sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh <canvas>.com Dari data yang ada pada website itu browser Maxthon 3. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut <video src=tutorialku. Beberapa di antaranya adalah Canvas dan Video. Sepertinya sampai sekarang codecnya masih jadi kontroversi.Com Copyright © 2003-2007 IlmuKomputer.HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa menggambar langsung di halaman web. Ada beberapa hal yang perlu kita ketahui tentang HML 5. untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. Tidak lagi perlu memuat plugin khusus. HTML 5 yang saat ini sudah mulai diimplementasikan oleh beberapa browser grade A akan membawa lebih dari sekedar fitur untuk layout dan format halaman. Seperti namanya. Jadi tidak perlu lagi menempelkan flash untuk sekedar memutar audio.mp4> </video> Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4.4. canvas adalah media yang bisa dicorat-coret langsung.Com . HTML 5 akan memberikan satu opsi tambahan: canvas. kemungkinan besar codecnya adalah Ogg Theora (patent free) dan H. Canvas Dulu.264. Testing Browser Support HTML5 Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah. pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut: http://html5test. Format video yang didukung akan bervariasi terhadap browser. Oleh karena itu. Safari 5. Firefox 13 dengan 345.1 dengan 317 dan Internet Explorer 9 dengan 138 point. Games Sederhana HTML5 Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer. Kini javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI. HTML5 akan jadi lebih bisa dimengerti. fret no more. Tag yang kaya semantic seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja.Local Storage Masih ingat Google Gears? Sekarang storage untuk browser akan diakomodasi sebagai standard dalam HTML 5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash. Jika javascript biasanya yang kita nikmati di web kadangkala menyebabkan komputer kita melambat atau paling tidak membuat browser seperti sesak napas maka web worker akan bsia jadi pelega.Com . Buat designer yang sering meng-abuse div dan span sebagia elemen nav. footer. Salah satu fitur web worker adalah threading. Dan bagi mesin. Coba liat detilnya di sini. dll. section. Mungkin bisa meningkatkan performa aplikasi dengan menggunakan storage sebagai local cache. Semantics Nah ini dia. Tentunya ini kabar baik bagi pengembang aplikasi web. Web Workers Yang ini juga sempat kita nikmati lewat Google Gears. Akan ada tag khusus untuk navigasi. } </style> </head> <body> <canvas></canvas> <script> // http://paulirish.setTimeout(callback.com/2011/requestanimationframe-for-smart-animating // shim layer with setTimeout fallback window.webkitRequestAnimationFrame || window. // store all bubble. particles etc entities: [].oRequestAnimationFrame || window. background: #fff.requestAnimationFrame || window. initial-scale=1. accuracy: 0 }. ios: null. escaped: 0. background: #000. // namespace our game var POP = { // set up some inital values WIDTH: 320. // we'll set the rest of these // in the init function RATIO: null. scale: 1. left: 0}.} canvas { display: block. // the amount of game ticks until // we spawn a bubble nextBubble: 100. Komunitas eLearning IlmuKomputer. user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <style type="text/css"> body { margin: 0. 1000 / 60). <!DOCTYPE HTML> <html lang="en"> <head> <meta name="viewport" content="width=device-width. padding: 0.mozRequestAnimationFrame || window. })().requestAnimFrame = (function(){ return window. }. maximum-scale=1. hit: 0.msRequestAnimationFrame || function( callback ){ window. user-scalable=no. currentWidth: null. android: null. HEIGHT: 480. margin: 0 auto.Berikut ini adalah script games sederhana dalam format HTML 5. // the position of the canvas // in relation to the screen offset: {top: 0. canvas: null. currentHeight: null. ctx: null. touches.Com Copyright © 2003-2007 IlmuKomputer. ua: null.Com . // for tracking player's progress score: { taps: 0. ceil(POP. }.ua.preventDefault().set(e. Komunitas eLearning IlmuKomputer.preventDefault().ua. POP. // calculate how many circles we need to // cover the screen width POP.indexOf('android') > -1 ? true : false. false).preventDefault().set(e).wave = { x: -25. }. POP. function(e) { e. // circle radius time: 0. POP.android = POP.addEventListener('touchend'.addEventListener('click'.touches[0]). // these will change when the screen is resize POP.Input. a series of overlapping circles // across the top of screen POP. // we're ready to resize POP. // we'll use this in calculating the sine wave offset: 0 // this will be the sine wave offset }.Com Copyright © 2003-2007 IlmuKomputer. function(e) { e. // the canvas context allows us to // interact with the canvas api POP.preventDefault().ctx = POP.userAgent.addEventListener('touchmove'.ios = ( POP.width = POP. false). // it's important to set this // otherwise the browser will // default to 320x200 POP. // the event object has an array // called touches.init: function() { // the proportion of width to height POP.indexOf('iphone') > -1 || POP. // this is our canvas element POP. // x coord of first circle y: -40.addEventListener('touchstart'.RATIO = POP.canvas. // listen for clicks window.loop().total = Math. POP. // set up our wave effect // basically. }.canvas.Com .currentWidth = POP.wave.getContext('2d').WIDTH / POP. }. false). function(e) { // as above e. POP.r) + 1.getElementsByTagName('canvas')[0].WIDTH. // y coord of first circle r: 50.HEIGHT. window. false).canvas = document.HEIGHT.ua.ua = navigator.indexOf('ipad') > -1 ) ? true : false.toLowerCase(). we just want // the first touch POP.canvas. // we need to sniff out android & ios // so we can hide the address bar in // our resize function POP. // listen for touches window.HEIGHT.wave. function(e) { // we're not interested in this // but prevent default behaviour // so the screen doesn't scroll // or zoom e.resize(). POP. window.height = POP.currentHeight = POP.WIDTH.WIDTH / POP.Input. // if the counter is less than zero if (POP.style. allowing us to scroll pass // the address bar. // this is where all entities will be moved // and checked for collisions etc update: function() { var i.Bubble()).tapped) { // keep track of taps.Input.canvas.canvas.nextBubble < 0) { // put a new instance of bubble into our entities array POP.height = (window.push(new POP. POP. 1). if (POP.offset.y)). } // set the new canvas style width & height // note: our canvas is still 320x480 but // we're essentially scaling it with CSS POP.offsetLeft. POP.currentHeight = window.style. resize: function() { POP.entities.random() * 100 ) + 100.currentWidth / POP.canvas.}.currentWidth = POP. // resize the width in proportion // to the new height POP.currentHeight * POP. // set tapped back to false // to avoid spawning a new touch // in the next cycle POP.style.Com .top = POP. needed to // calculate accuracy POP.entities.nextBubble = ( Math. POP.offset.scrollTo(0.offsetTop. Komunitas eLearning IlmuKomputer. }.taps += 1.innerHeight. // reset the counter with a random value POP. }.currentWidth + 'px'. checkCollision = false.x. and thus hide it.setTimeout(function() { window. // add a new touch POP.width = POP.canvas. // this will create some extra space on the // page. } // spawn a new instance of Touch // if the user has tapped the screen if (POP.Input.Com Copyright © 2003-2007 IlmuKomputer.ios) { document.1).innerHeight + 50) + 'px'.body.android || POP. // position of canvas in relation to // the screen POP.WIDTH. // we use a timeout here as some mobile // browsers won't scroll if there is not // a small delay window.scale = POP.nextBubble -= 1.RATIO. POP.left = POP.Input. // the amount by which the css resized canvas // is different to the actual (480x320) size.push(new POP.height = POP. // we only need to check for a collision // if the user tapped on this game tick // decrease our nextBubble counter POP.Input.tapped = false.currentHeight + 'px'.Touch(POP.score. y. i < POP.getTime() * 0.push(new POP. i++) { POP.update().wave.255.score.wave.accuracy = (POP. i < POP.score.wave. POP.y.255.entities. } // delete from array if remove property // flag is set to true if (POP.remove) { POP.002.time * 0.score.score. n < 5.accuracy).wave.collides(POP.entities[i]. } // cycle through all entities and render to canvas for (i = 0.length.entities[i].wave.entities. '#036').entities.entities[i].entities.accuracy) ? 0: ~~(POP. } POP.Draw.type === 'bubble' && checkCollision) { hit = POP. 0.offset + (i * POP. } } // update wave offset // feel free to play with these values for // either slower or faster waves POP. // a handy way to round floats }.WIDTH. // display snazzy wave effect for (i = 0.r). r: 7}). } // cycle through all entities and update as necessary for (i = 0.x + POP.Com Copyright © 2003-2007 IlmuKomputer.circle( POP. POP.wave.Input.Input.hit / POP.Particle( POP. POP.hit += 1.sin(POP.HEIGHT. i += 1) { Komunitas eLearning IlmuKomputer. POP.offset = Math.score.entities[i].entities[i]. {x: POP. // random opacity to spice it up a bit 'rgba(255.accuracy = isNaN(POP. y: POP.Draw.rect(0.8) * 5.entities[i].entities[i].wave. POP.taps) * 100. POP.'+Math.remove = hit. } POP. i < POP. // calculate accuracy POP.splice(i.random()*1+')' )). i += 1) { POP.score.x. POP.checkCollision = true. 1).total.wave. POP. // this is where we draw all the entities render: function() { var i. 2. if (POP.wave.time = new Date(). if (hit) { // spawn an exposion for (var n = 0. '#fff').length.r.y.Com .x.score. n +=1 ) { POP. hit.collides = function(a. 0.fillStyle = col.text('Escaped: ' + POP. y + 5. y).clearRect(0.ctx. y. col) { POP.b.r) * (a.r + b.HEIGHT).x) * (a. POP. } }.text('Hit: ' + POP.score. var radii_squared = (a.ctx. y.PI * 2. x.x . POP. 70.Draw. POP.ctx. '#fff'). circle: function(x.r).WIDTH. } else { return false. 30.POP. POP. Komunitas eLearning IlmuKomputer.ctx.beginPath().Com Copyright © 2003-2007 IlmuKomputer. size. col) { POP. '#fff'). 14.ctx.update(). POP. }.y .fillStyle = col. POP. // abstracts various canvas operations into // standalone functions POP. POP.fill().accuracy + '%'.score.ctx.entities[i].render().fillStyle = col.text('Accuracy: ' + POP. POP. 20. // the actual loop // requests animation frame // then proceeds to update // and render loop: function() { requestAnimFrame( POP.y) * (a.ctx.font = 'bold '+size+'px Monospace'.b.ctx. 14. true).x . 0. // checks if two entties are touching POP. y. y. POP.b. text: function(string.ctx.y . }.Draw = { clear: function() { POP. w. } }. rect: function(x. b) { var distance_squared = ( ((a. }.arc(x + 5. Math. 20.b.fillRect(x.render(). if (distance_squared < radii_squared) { return true. } // display scores POP. POP.fillText(string. x. r.escaped. POP.loop ). w. '#fff'). POP.score.Draw. col) { POP. 50.r + b.x)) + ((a.Com . 20.closePath().ctx.Draw.y))). POP. h). r. }. h.ctx. 14. x = (data.fade = 0.opacity+')'). // amount by which to fade on each game tick // this. this. Komunitas eLearning IlmuKomputer.circle(this.offset.x. // the y coordinate this.tapped = true. }. POP.y = POP.Input = { x: 0. // if opacity if 0 or less. this.'+this. this. this. y) { this. // inital opacity.} }. // we need to remember the original // x position for our sine wave calculation this. // the radius this.HEIGHT + (Math. }.POP.getTime() * 0.random() * 20) + 10.left) / POP.remove = false.type = 'touch'.xConstant = this. set: function(data) { this. // flag for removing this entity. this.waveSize = 5 + this.top) / POP.x = x.scale.scale.remove = false.type = 'bubble'.speed = (Math.opacity -= this.05.fade. flag for removal this.Com . POP.y = y. this. this. this. tapped :false.update = function() { // reduct the opacity accordingly this.r = (Math. the dot will fade out this.update = function() { // a sine wave is commonly a function of time var time = new Date().y = (data. this.Draw.Com Copyright © 2003-2007 IlmuKomputer.x.random() * 100) + 100.0. POP. // we'll need this later this. this. }.Bubble = function() { this. this.random() * 3) + 1.r.opacity < 0) ? true : false.r = 5.this.render = function() { POP.x = (Math.pageY .pageX .offset. // the x coordinate this.POP.r).0.random() * (POP.update // will take care of this this.opacity = 1. } }. y: 0.Touch = function(x.002. 'rgba(255.y.r. // the amount by which the bubble // will move from side to side this.WIDTH) .remove = (this. POP. remove = true.vx *= 0. this. this.x.speed.vy -= 0. this.random() * 4) * this.x = this.col = col.random() * 2 > 1) ? 1 : -1.waveSize * Math. }.255. // random values so particles do no // travel at the same speeds this.random() * 7).99. this.dir.render = function() { POP.x += this. this. this.vy = ~~(Math.dir = (Math.vx. // update score this. this.circle(this.r = r.y += this.x.255. } }. // adding this negative amount to the // y velocity exerts an upward pull on // the particle.y.99. y. // increase velocity so particle // accelerates off screen this.y < -10) { POP.r. this. as if drawn to the // surface this. } }.y.r.vy.vy *= 0.remove = false.y = y.y -= this. }.circle(this. 'rgba(255. this. this. col) { this.y < 0) { this. // if offscreen flag for removal if (this.x = x.xConstant.this. this. POP.Draw.update = function() { // update coordinates this.r.25.Com Copyright © 2003-2007 IlmuKomputer.1)').remove = true. // the x coord to follow a sine wave this.render = function() { POP. this.col). // determines whether particle will // travel to the right of left // 50% chance of either happening this. }.Particle = function(x.sin(time) + this.Draw. }.escaped += 1.score.vx = ~~(Math. this. this. this. // offscreen if (this.Com . Komunitas eLearning IlmuKomputer. id/30210133/2012/07/17/apa-itu-html-5-kelebihanhtml-5-video/ http://rumahstudio. Saat ini aktivitas utamanya belajar mulang di D3 TI Universitas Sebelas Maret (UNS).addEventListener('resize'.com/2012/07/apa-itu-html5-dan-kelebihannya.politekniktelkom. Pernah merantau ke Bandung dan akhirnya pulang ke desa. SKom Alumni SMK N 2 Surakarta dan UNIKOM.html http://blog. </script> </body> </html> Referensi :     http://mkr-site. false). POP.smashingmagazine.blogspot. RFID dan Fingerprint Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer. false).ac.resize. POP.com/2012/10/19/design-your-own-mobile-game/ Biografi Penulis Yudha Yudhanto.window. window.Com .addEventListener('load'.com/kuliah/games http://mobile.init. Ketertarikan Ilmu dan Bisnis di bidang Solusi Barcode.