SOURCE CODE Program 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.


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.js"></script>
 <script src="script.js"></script>
</head>
<body>
 <div class="wrap">
  <h1>HI-CODDING 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://hi-codding.blogspot.com">HI-CODDING 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 : HI-Codding

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

COMMENTS

Nama

AJAX Android APLIKASI APLIKASI PROGRAMMING BASIC Bootstrap C Plus Plus Cisco Packet Tracer Codeigniter CRUD CSS Framework HTML Instaling Jaringan Komputer Java Java Script JavaScript JQUERY Pengetahuan PHP Programming Review Sekolah SOURCODE Teknologi TipsTrick Tutorial Video Yii
false
ltr
item
HI-CODDING: SOURCE CODE Program Game Kill Cocroach Dengan HTML5
SOURCE CODE Program 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.
https://4.bp.blogspot.com/-cWtTDQt6Y9Q/V00LURobOFI/AAAAAAAABAU/vvS8emYiWrQt7U39xVWPbsESCAEo6OMKwCLcB/s400/Screenshot_90.png
https://4.bp.blogspot.com/-cWtTDQt6Y9Q/V00LURobOFI/AAAAAAAABAU/vvS8emYiWrQt7U39xVWPbsESCAEo6OMKwCLcB/s72-c/Screenshot_90.png
HI-CODDING
http://www.hi-codding.net/2016/05/source-code-program-game-kill-cocroach-dengan-html5.html
http://www.hi-codding.net/
http://www.hi-codding.net/
http://www.hi-codding.net/2016/05/source-code-program-game-kill-cocroach-dengan-html5.html
true
5256670903611799845
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy