Devilzc0de Forum Follow @devilzc0de
  • Home
  • Hacking
  • Networking
  • Programming
  • O.S
  • Server
  • Tweets
  • Search
  • Member List
  • Calendar
Current time: 05-22-2013, 08:23 AM Hello There, Guest! (Login — Register)
Devilzc0de Forum › Information Technology › Programming › HTML / CSS / Javascript › JQuery
Kabur - simple game menggunakan jQuery

Home General Computer Multimedia Business Lounge

Pages (2): 1 2 Next »
Post Reply 
Tweet
Threaded Mode | Linear Mode
Kabur - simple game menggunakan jQuery
12-21-2011, 10:32 PM (This post was last modified: 12-21-2011 10:33 PM by Fauzi Topan.)
Post: #1
Fauzi Topan Offline
PacarNya Yuki Kato
Posts: 314
Joined: Nov 2011
Reputation: 55
Kabur - simple game menggunakan jQuery
Assalamualaikum wr. wb

Lanjutin thread saya belajar jquery disini
http://devilzc0de.org/forum/thread-11569.html

Saya coba coba lagi buat sebuah game, cara mainnya mudah, kamu cuma harus menghindar dari pesawat yang lalu lalang.

Saya beri nama game ini Kabur ketawa
Sesuai namanya, harus kabur.

[Image: fdai4i.jpg]

Coba dilihat ya kang...
Gamenya ada disini:
http://fauzi.net84.net/js/kabur.html

Source Codenya:
Code:
<html>
<head>
<title>Fauzi Topan Ganteng</title>
<!--
    Kabur ver 0.1
    Fauzi Topan
-->
<style type="text/css">
*{
font-size:10px;
font-family: Tahoma, Verdana, Arial;
}

body{
background:#000;
overflow:hidden;
color:#fff;
padding:8px;
}

#jagoan{
position:absolute;
top:0px;
left:0px;
height:50px;
width:50px;
background:#fff;
border-radius:25px;
box-shadow:0px 0px 10px #fff;
display:none;
}
.musuh{
background: url(http://i621.photobucket.com/albums/tt296/DreDlaDy/Emoticons/run_animation_by_dutchie17.gif) no-repeat;
height:45px;
width:45px;
position:absolute;
top:0px;
left:800px;
}
#area{
width:100%;
height:100%;
background:#080808;
border:1px solid #666;
}
#debug{
position:absolute;
bottom:0px;
width:100%;
height:10%;
padding:10px;
}
#crash, #time{
font-size:37px;
color:#08f;
padding:0 13px;
float:right;
}
#scorebox{
position:absolute;
background:#080808;
width:60%;
color:#08f;
padding:10px 20px;
border-radius:30px;
border:1px solid #444;
text-align:center;
}
#scorebox p{
font-size:37px;
margin:0 0 18px 0;
padding:0;
}
.restart{
background:#111;
padding:8px 18px;
font-size:15px;
border-radius:10px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
musuhx = new Array();
musuhy = new Array();
jagoanx = 0;
jagoany = 0;
jarakx = new Array();
jaraky = new Array();
a = new Array();
b = new Array();
batas_kiri = 0;
batas_kanan = 0;
batas_atas = 0;
batas_bawah = 0;
max_musuh = 100;
xd = new Array();
yd = new Array();
animtimer = new Array();
max_crash = 3;
crash = max_crash;
hit = new Array();
i = 0;
time = 0;
ticktimer = 0;
area_width = 0;
area_height = 0;



$(document).ready(function(){
    $(window).resize(function() {
        area_width = parseInt($('#area').width());
        area_height = parseInt($('#area').height());
        var pos = $('#area').position();
        batas_kiri = pos.left + 8;
        batas_atas = pos.top + 8;
        batas_kanan = batas_kiri + area_width - 16 - 30;
        batas_bawah = batas_atas + area_height - 8 - 30;
        
    });
    
    $(document).bind("mousemove", function(e){
        jagoanx = e.pageX;
        jagoany = e.pageY;

        $('#jagoan').css({
            left : jagoanx - 25,
            top: jagoany - 25
        });
    });
    
    init();
});

function init(){
    i = 0;
    time = 0;
    crash = max_crash;
    
    $('#crash').html(crash);
    
    $('#jagoan').css('display', 'block');

    area_width = parseInt($('#area').width());
    area_height = parseInt($('#area').height());
    var pos = $('#area').position();
    batas_kiri = pos.left + 8;
    batas_atas = pos.top + 8;
    batas_kanan = batas_kiri + area_width - 16 - 30;
    batas_bawah = batas_atas + area_height - 8 - 30;

    auto_create();
    ticktimer = setInterval('tick()',1000);

}

function auto_create(){
    if(i<max_musuh){
        create_enemy(i++);
        setTimeout("auto_create()", 3000);
    }
}

function tick(){
    time++;
    var score = Math.floor((i * time / ($(document).height()*$(document).width()))*100000);
    $('#time').html(score);
}

function create_enemy(i){
    musuhx[i] = jagoanx + Math.floor(Math.random()*area_width) + 100;
    musuhy[i] = jagoany + Math.floor(Math.random()*area_height) + 100;
    
    jarakx[i] = Math.floor(Math.random()*55);
    jaraky[i] = Math.floor(Math.random()*55);
    
    a[i] = jarakx[i];
    b[i] = jaraky[i];

    xd[i] = "kiri";
    yd[i] = "bawah";
    
    animtimer[i] = 0;
    
    hit[i] = false;
    
    $('#area').append("<div class=\"musuh musuh" + i +"\"></div>");
    animasi('.musuh'+i,i);
}

function animasi(what, index){
    musuhx[index] = musuhx[index] + a[index];
    musuhy[index] = musuhy[index] + b[index];
    var kena = '';
    
    
    var selisihx = Math.abs((musuhx[index]) - (jagoanx-25));
    var selisihy = Math.abs((musuhy[index]) - (jagoany-25));
    if(!hit[index]){
            
        if((selisihx < 45) && (selisihy < 45)){
            hit[index] = true;
            kena = ' [ KENA ]';
            $(what).css({'background-image': 'url(http://bestanimations.com/Military/Explosions/Explode-04-june.gif)',
                'height':'75',
                'width':'100'
            });
            
            $(what).fadeOut('slow', function(){
                $(what).css({'background-image': 'url(http://i621.photobucket.com/albums/tt296/DreDlaDy/Emoticons/run_animation_by_dutchie17.gif)',
                    'height':'45',
                    'width':'45',
                });
                musuhx[index] = jagoanx + Math.floor(Math.random()*area_width);
                musuhy[index] = jagoany + Math.floor(Math.random()*area_height);
                gerak(what, musuhx[index], musuhy[index]);
                crash--;
                $('#crash').html(crash);
                $(what).fadeIn('slow');
                hit[index] = false;
                
            });
        }                    
    }
    if(crash <= 0){
        for(z=0;z<=animtimer.length;z++){
            clearTimeout(animtimer[z]);
        }
        clearInterval(ticktimer);
        showscore();
        i = max_musuh;
    }
    else{
        animtimer[index] = setTimeout("animasi(\'"+what+"\',"+index+")",100);    
    }
    
    
    
    gerak(what, musuhx[index], musuhy[index]);
    
    var debug_text = '';
    debug_text += 'Time = ' + time + ' Enemies = ' + i + '<br>';
    debug_text += 'X = ' + jagoanx + ' Y = ' + jagoany;
    debug_text += '<br>Left = ' + batas_kiri + ' Top = ' + batas_atas + ' Right = ' + batas_kanan + ' Bottom = ' + batas_bawah;
    
    
    debug(debug_text);
    
    
    if(xd[index]=="kiri"){
        a[index] = -jarakx[index];

        if(musuhx[index]<batas_kiri){
            xd[index] = "kanan";
        }
    }
    else if(xd[index]!="kiri"){
        a[index] = jarakx[index];
        
        if(musuhx[index]>batas_kanan){
            xd[index] = "kiri";
        }
    }
    
    if(yd[index]=="bawah"){
        b[index] = jaraky[index];

        if(musuhy[index]>batas_bawah){
            yd[index] = "atas";
        }
    }
    else if(yd[index]!="bawah"){
        b[index] = -jaraky[index];
        
        if(musuhy[index]<batas_atas){
            yd[index] = "bawah";
        }
    }
    
    
}

function restart(){
    init();
    $('.musuh').remove();
    $('#scorebox').remove();
}

function showscore(){
        
    var score = parseInt($('#time').html());
    var scorebox = '<div id=\"scorebox\">';
    scorebox += '<p>Your score : ' + score + '</p>';
    scorebox += '<p><span class=\"restart\" onclick=\"restart();\">Restart</span></p>';
    scorebox += '</div>';
    $('#area').append(scorebox);
    var posx = (($('#area').width()-$('#scorebox').width())/2)+8;
    var posy = (($('#area').height()-$('#scorebox').height())/2)+8;
    $('#scorebox').css({
        'left': posx,
        'top': posy
    });

}

function gerak(siapa, x, y){
    $(siapa).css({
      left: x,
      top: y    
    });
}
function debug(str){
    $('#stat').html(str + '<br />');
}

</script>


</head>

<body>
<div id="area"><div id="time">0</div><div id="crash">0</div>

<div id="jagoan"></div>
</div>

<div id="debug">
<table style="width:100%;"><tbody>
<tr>
<td><div id="stat"></div></td>
</tr>
</tbody></table>
</div>

</body>
</html>
*Codingnya belum sempet dirapihin dan diberikan dokumentasi, masih murni bekasan kodingan malam-malam ngantuk

Ditunggu saran dan kritiknya, Source code boleh di ambil dan di modifikasi sesuka hati.



.thx
Ayo siapa yang scorenya paling besar ketawaketawa
Visit this user's website Find all posts by this user
Quote this message in a reply
 Reputed by :  tabun(+1) , schumbag(+1) , ditatompel(+1) , mariachi(+1)
12-21-2011, 10:37 PM
Post: #2
./ rex Away
Wahyu Adi Prasetyo
****
Posts: 828
Joined: Sep 2010
Reputation: 47
RE: Kabur - simple game menggunakan jQuery
wedew game nya mantap keren
Visit this user's website Find all posts by this user
Quote this message in a reply
12-21-2011, 10:39 PM
Post: #3
Fauzi Topan Offline
PacarNya Yuki Kato
Posts: 314
Joined: Nov 2011
Reputation: 55
RE: Kabur - simple game menggunakan jQuery
(12-21-2011 10:37 PM)./ rex Wrote:  wedew game nya mantap keren

Makasih kang.. Masih baru jadi batangnya kang, daun sama ranting2 pohonnya belum
Visit this user's website Find all posts by this user
Quote this message in a reply
12-21-2011, 10:43 PM
Post: #4
tabun Offline
./Junk3r C4d3t
Posts: 1,772
Joined: Dec 2011
Reputation: 33
RE: Kabur - simple game menggunakan jQuery
bener2 deh kang fauzi.. mantap
klo dikembangin bisa tersaing tuh game2 yg top.. smangat
Find all posts by this user
Quote this message in a reply
12-21-2011, 10:46 PM
Post: #5
Fauzi Topan Offline
PacarNya Yuki Kato
Posts: 314
Joined: Nov 2011
Reputation: 55
RE: Kabur - simple game menggunakan jQuery
(12-21-2011 10:43 PM)tabun Wrote:  bener2 deh kang fauzi.. mantap
klo dikembangin bisa tersaing tuh game2 yg top.. smangat

Terima kasih kang...
tapi saya yang buat gamenya, high score cuma 86 dead
Visit this user's website Find all posts by this user
Quote this message in a reply
12-21-2011, 10:56 PM
Post: #6
schumbag Offline
nothing special about me
***
Posts: 800
Joined: Jan 2010
Reputation: 51
RE: Kabur - simple game menggunakan jQuery
fauzi fauzi kamu hebat banget smangat fauzi yang kamu pokoknya beneraaaaannnnn pinter mantap
aku pengen banget belajar jQuery sama kamu,soalnya aku memang blom pernah melajarin malu
cendol deh buat kamyuuu love
Find all posts by this user
Quote this message in a reply
12-21-2011, 11:02 PM
Post: #7
Fauzi Topan Offline
PacarNya Yuki Kato
Posts: 314
Joined: Nov 2011
Reputation: 55
RE: Kabur - simple game menggunakan jQuery
(12-21-2011 10:56 PM)schumbag Wrote:  fauzi fauzi kamu hebat banget smangat fauzi yang kamu pokoknya beneraaaaannnnn pinter mantap
aku pengen banget belajar jQuery sama kamu,soalnya aku memang blom pernah melajarin malu
cendol deh buat kamyuuu love

Terima kasih kang. Boleh yuk kang kita belajar jQuery bersama.
Coba diutak atik source code nya kang asik
Visit this user's website Find all posts by this user
Quote this message in a reply
12-22-2011, 03:29 AM
Post: #8
noe Away
./Devilz Officer
Posts: 223
Joined: May 2011
Reputation: 9
RE: Kabur - simple game menggunakan jQuery
dapet 5 aje hahahaha ngakak
Visit this user's website Find all posts by this user
Quote this message in a reply
12-22-2011, 05:32 AM
Post: #9
Rev Aris Offline
./Devilz Advisor
Posts: 941
Joined: Jul 2011
Reputation: 19
RE: Kabur - simple game menggunakan jQuery
game nya dari jquery yah
keren om
mantap
Visit this user's website Find all posts by this user
Quote this message in a reply
12-22-2011, 09:30 AM
Post: #10
ade yonatan Offline
------
Posts: 531
Joined: May 2011
Reputation: 39
RE: Kabur - simple game menggunakan jQuery
keren banget bang cuma skornya ga singkron ,... so maju terus bang

ane dukung sambil nimpuk aja
Find all posts by this user
Quote this message in a reply
« Next Oldest | Next Newest »
Pages (2): 1 2 Next »
Post Reply 


Topic Tools
Topic Link :
BBCode :
HTML Code :
View a Printable Version Send Thread to a Friend Subscribe to this thread
Submit Google Submit Face book Submit to Digg Submit to Reddit Submit to Furl Submit to Del.icio.us Submit to Jeqq

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [HOT] buat pengumuman kelulusan sekolah dengan jquery chibi 12 1,996 04-28-2012 09:25 AM
Last Post: Super Moderator
  [Tutor] jQuery slideDown Guestbook ditatompel 19 1,617 04-09-2012 04:24 PM
Last Post: jackerp
  [Tutor] Membuat Twitter AJAX Hash URI dengan jQuery ditatompel 7 641 04-04-2012 11:56 PM
Last Post: KillerByte
Smile Animasi Hujan Karakter (jQuery) Fauzi Topan 15 1,829 02-28-2012 06:48 PM
Last Post: seva
  [Tutor] [dark&plonk][jquery]Mengenal Jquery darkslayer 10 1,135 01-21-2012 04:53 PM
Last Post: vikrymadz
  Pesawat-pesawatan di jquery Fauzi Topan 11 1,154 12-30-2011 01:12 PM
Last Post: The.shadow
  [jQuery & PHP] YM! Spy ditatompel 9 2,423 09-18-2011 11:58 AM
Last Post: chaer.newbie
  jquery-ui supermenganteng 24 3,884 08-26-2011 02:30 PM
Last Post: autocrack

Users Browsing
1 Guest(s)

  • Contact Us
  • devilzc0de
  • Return to Top
  • Mobile Version
  • RSS Syndication
  • Help
Current time: 05-22-2013, 08:23 AM Powered By MyBB, © 2002-2013 MyBB Group. Theme created by Justin S. | Mixed By Chaer.Newbie | Fixed By Aditya

USING THIS SITE INDICATES THAT YOU HAVE READ AND ACCEPT OUR TERMS. IF YOU DO NOT ACCEPT THESE TERMS, YOU ARE NOT AUTHORIZED TO USE THIS SITE