Cara Membuat Game Kill Cocroach Dengan HTML5

Cara Membuat Game Kill Cocroach Dengan HTML5 - Kali ini kita akan membuat game tentang kecoa yaitu Kill Cocroach. Dalam game Kill Cocroach ini kita ditugaskan untuk membunuh sebanyak mungkin kecoa dengan mengkliknya. Game serderhana ini akan kita buat dengan HTML5.

Siapa yang tidak tau kecoa, serangga dengan kemampuan bertahan hidup paling ekstrim yang bahakan dapat bertahan hidup tanpa kepala dan selamat dari radiasi nuklir. Beberapa orang ketika bertemu dengan kecoa akan merasa geli atau takut, apalagi ketika ia memasuki mode terbang bkakakakak. Mungkin ini bisa mengurangi rasa kesal anda sedikit terhadap kecoa.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Gambar

Buatlah dahulu sebuah folder dengan nama Kill_cocroach kemudian untuk untuk gambar kecoanya nanti gunakan lah gambar berikut ini:

Letakan dalam folder kill_cocroach.

CSS

Buatlah sebuah file CSS baru dengan nama style.css dengan isi script :

.gameArea {
  width: 300px;
  height: 425px;
  text-align:left;
  margin: 0 auto;
  display: block;
  position: relative;
  border: 1px dashed #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: #FFFBDF;
  background-image: radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.1) 99%), radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.1) 99%);
  -webkit-background-size: 60px 60px;
  -moz-background-size: 60px 60px;
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}
.gameArea h2 {
  padding: 0;
  font-size: 14px;
  margin: 20px 10px;
  font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}
.gameArea .cocroach,
.gameArea .cocroach2,
.gameArea .cocroach3 {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.gameArea .cocroach .insect,
.gameArea .cocroach2 .insect,
.gameArea .cocroach3 .insect {
  display: block;
  margin: auto;
  width: 60px;
  height: 75px;
}
.gameArea .cocroach .insect.alive,
.gameArea .cocroach2 .insect.alive,
.gameArea .cocroach3 .insect.alive {
 background-image: url(alive.png);
}
.gameArea .cocroach .insect.dead,
.gameArea .cocroach2 .insect.dead,
.gameArea .cocroach3 .insect.dead {
background-image: url(dead.png);
}

Javascript

Untuk game kali ini kita membutuhkan jQuery jadi donwload terlebih dahulu file jQuerynya di sini : DOWNLOAD
Simpan dalam folder kill_cocroach, lalu buatlah sebuah file javascript dengan nama script.js dengan isi script :

$(function () {
   
    animateDiv();

    function makeNewPosition() {

        var h = $('.gameArea').height() - 50;
        var w = $('.gameArea').width() - 50;

        var nh = Math.floor(Math.random() * h - 20 );
        var nw = Math.floor(Math.random() * w - 20 );

        return [nh, nw];

    }

    function animateDiv() {

        var newq = makeNewPosition();
        $('.cocroach').delay(100).animate({ top: newq[0], left: newq[1] }, function () {
            
            animateDiv();
            
        });
        
    };

    $('a.cocroach').click(
  
       function () {
            $('.insect').removeClass('alive');
            $('.insect').addClass('dead');
            $('.cocroach').animate({ opacity: '0' }, 10);
                    
            setTimeout(function () {
            
                $('.insect').addClass('alive');
                $('.insect').removeClass('dead');
                $('.cocroach').animate({ opacity: '1' });
                $('#score').html(++score); 

            },500);
                       
       }       
  
    );
    
    
    
});

var score = 0;

Perhatikan baris kode berikut :

function makeNewPosition() {

        var h = $('.gameArea').height() - 50;
        var w = $('.gameArea').width() - 50;

        var nh = Math.floor(Math.random() * h - 20 );
        var nw = Math.floor(Math.random() * w - 20 );

        return [nh, nw];

    }

Fungsi ini digunakan untuk membuat random posisi dari si kecoa nanti

$('a.cocroach').click(
  
       function () {
            $('.insect').removeClass('alive');
            $('.insect').addClass('dead');
            $('.cocroach').animate({ opacity: '0' }, 10);
                    
            setTimeout(function () {
            
                $('.insect').addClass('alive');
                $('.insect').removeClass('dead');
                $('.cocroach').animate({ opacity: '1' });
                $('#score').html(++score); 

            },500);
                       
       }       
  
    );

Script ini berfungsi agar ketika kecoa di klik maka ia akan di berikan class dead sehingga gambar background berubah menjadi kecoa mati dan menambahkan score.

HTML

Buatlah sebuah file HTML baru dengan nama index.html di dalam folder yang sama dengan isi script :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Kill The Cocroach</title> 
 <style>
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
 <link type="text/css" href="style.css" rel="stylesheet" /> 
 <script src="jquery-1.8.3.js"></script>
 <script src="script.js"></script>
</head>
<body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Game Kill Cocroach Dengan HTML5</h1>
  <div class="gameArea">       
   <h2>Kills <span id="score">0</span></h2>
   <a href="javascript:void[0]" class="cocroach"><span class="insect alive"></span></a>
  </div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div>
</body>
</html>

Sekarang anda dapat mencobanya dengan cara membuka file index.html di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Author : Jraycv

From : http://cssdeck.com/labs/ugxzocbe

Modified by : Jin Toples

Game Kill Cocroach Dengan HTML5 anda sudah selesai, baca juga tutorial program HTML5 lainnya.