Siapa tahu bisa menjadi inspirasi untuk teman-teman
cekidot --> http://fauzi.net84.net/js/pesawat.html
http://devilzc0de.org/forum/thread-11569.html
source nya:
Code:
<html>
<head>
<title>Fauzi Topan Ganteng</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
x = 0;
y = 0;
a = -11;
b = 7;
dh = 0;
dw = 0;
xd = "kiri";
yd = "bawah";
animtimer = 0;
planettimer = 0;
planet1timer = 0;
starstimer = 0;
$(document).ready(function(){
$('#aktor').css('left', $(document).width());
x = parseInt($('#aktor').css('left'));
y = parseInt($('#aktor').css('top'));
dh = $(document).height()-50;
dw = $(document).width()-100;
for(i=0;i<100;i++){
var xr = Math.floor(Math.random()*dw);
var yr = Math.floor(Math.random()*dh);
$('#bg').append("<div class=\"stars\"
style=\"position:absolute;left:"+xr+"px;top:"+yr+"px;background:#666;width:4px;height:4px;border-radius:2px;\"> </div>");
$('#bg1').append("<div class=\"stars\"
style=\"position:absolute;left:"+xr+"px;top:"+yr+"px;background:#666;width:4px;height:4px;border-radius:2px;\"> </div>");
}
$('#bg1').css('left', '-'+dw);
stars();
animplanet();
animplanet1();
animasi();
$('body').keydown(function(e){
var px = 0;
var py = 0;
switch(e.keyCode){
case 37:
e.preventDefault();
/* kiri */
px = parseInt($('#pesawat').css('left')) - 8;
if(px>0)
$('#pesawat').css('left', px + 'px')
break;
case 38:
e.preventDefault();
/* atas */
py = parseInt($('#pesawat').css('top')) - 8;
if(py>0)
$('#pesawat').css('top', py + 'px')
break;
case 39:
e.preventDefault();
/* kanan */
px = parseInt($('#pesawat').css('left')) + 8;
if(px<dw)
$('#pesawat').css('left', px + 'px')
break;
case 40:
e.preventDefault();
/* bawah */
py = parseInt($('#pesawat').css('top')) + 8;
if(py<dh)
$('#pesawat').css('top', py + 'px')
break;
}
});
$(document.documentElement).keydown(function(e){
var px = 0;
var py = 0;
switch(e.keyCode){
case 37:
e.preventDefault();
/* kiri */
px = parseInt($('#pesawat').css('left')) - 8;
if(px>0)
$('#pesawat').css('left', px + 'px')
break;
case 38:
e.preventDefault();
/* atas */
py = parseInt($('#pesawat').css('top')) - 8;
if(py>0)
$('#pesawat').css('top', py + 'px')
break;
case 39:
e.preventDefault();
/* kanan */
px = parseInt($('#pesawat').css('left')) + 8;
if(px<dw)
$('#pesawat').css('left', px + 'px')
break;
case 40:
e.preventDefault();
/* bawah */
py = parseInt($('#pesawat').css('top')) + 8;
if(py<dh)
$('#pesawat').css('top', py + 'px')
break;
}
});
$('.tombol').live('click', function(){
if($('.tombol').html() == "Stop"){
clearTimeout(animtimer);
clearTimeout(planettimer);
clearTimeout(planet1timer);
clearTimeout(starstimer);
$('.tombol').html("Start");
}
else if($('.tombol').html() == "Start"){
animplanet();
animplanet1();
animasi();
stars();
$('.tombol').html("Stop");
}
});
});
function animasi(){
x = x + a;
y = y + b;
gerak(x, y, dh, dw);
if(xd=="kiri"){
a = -11;
if(x<0){
xd = "kanan";
}
}
else if(xd=="kanan"){
a = 11;
if(x>dw){
xd = "kiri";
}
}
if(yd=="bawah"){
b = 7;
if(y>dh){
yd = "atas";
}
}
else if(yd=="atas"){
b = -7;
if(y<0){
yd = "bawah";
}
}
animtimer = setTimeout("animasi()",100);
}
function gerak(x,y,dh,dw){
$('#aktor').css('left', x +"px");
$('#aktor').css('top', y +"px");
$('#stat').html('X = ' + x + ' ('+dw+') Y = ' + y + ' ('+dh+')
<br> XD = ' + xd + ' YD = ' + yd + ' <br> a = ' + a + ' b = '
+ b );
}
function animplanet(){
var xplanet = parseInt($('.planet').css('left'));
xplanet = xplanet + 1;
if(xplanet>=(dw)) xplanet = -300;
$('.planet').css('left', xplanet + 'px');
planettimer = setTimeout("animplanet()",300);
}
function animplanet1(){
var xplanet = parseInt($('.planet1').css('left'));
xplanet = xplanet + 3;
if(xplanet>=(dw)) xplanet = -500;
$('.planet1').css('left', xplanet + 'px');
planet1timer = setTimeout("animplanet1()",500);
}
function stars(){
var xstars = parseInt($('#bg').css('left'));
var xstars1 = parseInt($('#bg1').css('left'));
xstars = xstars + 1;
xstars1 = xstars1 + 1;
if(xstars>=(dw)) xstars = -dw;
if(xstars1>=(dw)) xstars1 = -dw;
$('#bg').css('left', xstars + 'px');
$('#bg1').css('left', xstars1 + 'px');
starstimer = setTimeout("stars()",100);
}
</script>
<style type="text/css">
body{
background:#000;
width:100%;
height:100%;
overflow:hidden;
font-size:12px;
color:#fff;
font-family:Tahoma, Verdana;
}
#pesawat{
background: url(http://www.pixeljoint.com/files/icons/jetspre.png) no-repeat;
height:64px;
width:64px;
position:absolute;
top:50px;
left:300px;
}
#aktor{
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;
}
#statbox{
position:absolute;
left:0px;
top:0px;
padding:10px;
}
.planet{
position:absolute;
left:-300px;
top:90px;
height:300px;
width:300px;
background:#800;
border-radius:150px;
box-shadow:0 0 40px #f00;
}
.planet1{
position:absolute;
left:-500px;
top:200px;
height:500px;
width:500px;
background:#eee;
border-radius:250px;
box-shadow:0 0 40px #fff;
}
.tombol{
background:#555;
padding:4px 20px;
border-radius:10px;
}
.stars{
box-shadow:0 0 40px #fff;
}
#bg{
position:absolute;
top:0px;
left:0px;
}
#bg1{
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="bg1"></div>
<div class="planet"></div>
<div class="planet1"></div>
<div id="statbox">
<span id="stat"></span>
<br><br><span class="tombol">Stop</span>
</div>
<div id="aktor"></div>
<div id="pesawat"></div>
</body>
</html>
.thx
