Kako napraviti zvezde koje se pomeraju

Pogledaj prethodnu temu Pogledaj sledeću temu Ići dole

Kako napraviti zvezde koje se pomeraju

Počalji od Mr.Joker taj Čet Feb 10, 2011 7:01 am

Mogao bih da vam objasnim kako radi i na koji način medjutim potrebno je veće znanje java skripti da bi ste shvatili. Evo koda:
Kod:
<html>
<head>
<title>Design4You</title>
<style type="text/css">
  body  {margin:0;padding:0;background-color:#000000;font-size:0;overflow:hidden}
  div  {margin:0;padding:0;position:absolute;font-size:0;overflow:hidden}
  canvas{background-color:#000000;overflow:hidden}
</style>
</head>
<script type="text/javascript">
function $i(id) { return document.getElementById(id); }
function $r(parent,child) { (document.getElementById(parent)).removeChild(document.getElementById(child)); }
function $t(name) { return document.getElementsByTagName(name); }
function $c(code) { return String.fromCharCode(code); }
function $h(value) { return ('0'+Math.max(0,Math.min(255,Math.round(value))).toString(16)).slice(-2); }
function _i(id,value) { $t('div')[id].innerHTML+=value; }
function _h(value) { return !hires?value:Math.round(value/2); }

function get_screen_size()
  {
  var w=document.documentElement.clientWidth;
  var h=document.documentElement.clientHeight;
  return Array(w,h);
  }

var url=document.location.href;

var flag=true;
var test=true;
var n=parseInt((url.indexOf('n=')!=-1)?url.substring(url.indexOf('n=')+2,((url.substring(url.indexOf('n=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('n=')+2+(url.substring(url.indexOf('n=')+2,url.length)).indexOf('&'):url.length):512);
var w=0;
var h=0;
var x=0;
var y=0;
var z=0;
var star_color_ratio=0;
var star_x_save,star_y_save;
var star_ratio=256;
var star_speed=4;
var star_speed_save=0;
var star=new Array(n);
var color;
var opacity=0.1;

var cursor_x=0;
var cursor_y=0;
var mouse_x=0;
var mouse_y=0;

var canvas_x=0;
var canvas_y=0;
var canvas_w=0;
var canvas_h=0;
var context;

var key;
var ctrl;

var timeout;
var fps=0;

function init()
  {
  var a=0;
  for(var i=0;i<n;i++)
      {
      star[i]=new Array(5);
      star[i][0]=Math.random()*w*2-x*2;
      star[i][1]=Math.random()*h*2-y*2;
      star[i][2]=Math.round(Math.random()*z);
      star[i][3]=0;
      star[i][4]=0;
      }
  var starfield=$i('starfield');
  starfield.style.position='absolute';
  starfield.width=w;
  starfield.height=h;
  context=starfield.getContext('2d');
  [You must be registered and logged in to see this link.]
  context.fillStyle='rgb(0,0,0)';
  context.strokeStyle='rgb(255,255,255)';
  var adsense=$i('adsense');
  adsense.style.left=Math.round((w-728)/2)+'px';
  adsense.style.top=(h-15)+'px';
  adsense.style.width=728+'px';
  adsense.style.height=15+'px';
  adsense.style.display='block';
  }

function anim()
  {
  mouse_x=cursor_x-x;
  mouse_y=cursor_y-y;
  context.fillRect(0,0,w,h);
  for(var i=0;i<n;i++)
      {
      test=true;
      star_x_save=star[i][3];
      star_y_save=star[i][4];
      star[i][0]+=mouse_x>>4; if(star[i][0]>x<<1) { star[i][0]-=w<<1; test=false; } if(star[i][0]<-x<<1) { star[i][0]+=w<<1; test=false; }
      star[i][1]+=mouse_y>>4; if(star[i][1]>y<<1) { star[i][1]-=h<<1; test=false; } if(star[i][1]<-y<<1) { star[i][1]+=h<<1; test=false; }
      star[i][2]-=star_speed; if(star[i][2]>z) { star[i][2]-=z; test=false; } if(star[i][2]<0) { star[i][2]+=z; test=false; }
      star[i][3]=x+(star[i][0]/star[i][2])*star_ratio;
      star[i][4]=y+(star[i][1]/star[i][2])*star_ratio;
      if(star_x_save>0&&star_x_save<w&&star_y_save>0&&star_y_save<h&&test)
        {
        context.lineWidth=(1-star_color_ratio*star[i][2])*2;
        context.beginPath();
        context.moveTo(star_x_save,star_y_save);
        context.lineTo(star[i][3],star[i][4]);
        context.stroke();
        context.closePath();
        }
      }
  timeout=setTimeout('anim()',fps);
  }

function move(evt)
  {
  evt=evt||event;
  cursor_x=evt.pageX-canvas_x;
  cursor_y=evt.pageY-canvas_y;
  }

function key_manager(evt)
  {
  evt=evt||event;
  key=evt.which||evt.keyCode;
  //ctrl=evt.ctrlKey;
  switch(key)
      {
      case 27:
        flag=flag?false:true;
        if(flag)
            {
            timeout=setTimeout('anim()',fps);
            }
        else
            {
            clearTimeout(timeout);
            }
        break;
      case 32:
        star_speed_save=(star_speed!=0)?star_speed:star_speed_save;
        star_speed=(star_speed!=0)?0:star_speed_save;
        break;
      case 13:
        context.fillStyle='rgba(0,0,0,'+opacity+')';
        break;
      }
  top.status='key='+((key<100)?'0':'')+((key<10)?'0':'')+key;
  }

function release()
  {
  switch(key)
      {
      case 13:
        context.fillStyle='rgb(0,0,0)';
        break;
      }
  }

function mouse_wheel(evt)
  {
  evt=evt||event;
  var delta=0;
  if(evt.wheelDelta)
      {
      delta=evt.wheelDelta/120;
      }
  else if(evt.detail)
      {
      delta=-evt.detail/3;
      }
  star_speed+=(delta>=0)?-0.2:0.2;
  if(evt.preventDefault) evt.preventDefault();
  }

function start()
  {
  resize();
  anim();
  }

function resize()
  {
  w=parseInt((url.indexOf('w=')!=-1)?url.substring(url.indexOf('w=')+2,((url.substring(url.indexOf('w=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('w=')+2+(url.substring(url.indexOf('w=')+2,url.length)).indexOf('&'):url.length):get_screen_size()[0]);
  h=parseInt((url.indexOf('h=')!=-1)?url.substring(url.indexOf('h=')+2,((url.substring(url.indexOf('h=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('h=')+2+(url.substring(url.indexOf('h=')+2,url.length)).indexOf('&'):url.length):get_screen_size()[1]);
  x=Math.round(w/2);
  y=Math.round(h/2);
  z=(w+h)/2;
  star_color_ratio=1/z;
  cursor_x=x;
  cursor_y=y;
  init();
  }

document.onmousemove=move;
document.onkeypress=key_manager;
document.onkeyup=release;
document.onmousewheel=mouse_wheel; if(window.addEventListener) window.addEventListener('DOMMouseScroll',mouse_wheel,false);

</script>
<body onload="start()" onresize="resize()" onorientationchange="resize()" onmousedown="context.fillStyle='rgba(0,0,0,'+opacity+')'" onmouseup="context.fillStyle='rgb(0,0,0)'">
<canvas id="starfield" style="background-color:#000000"></canvas>
<div id="adsense" style="position:absolute;background-color:transparent;display:none">
  </div>
</body>
</html>
I rezultat vidite kada kopirate kod u notepad, i snimite kao index.html

Mr.Joker
Administrator
Administrator

Broj poruka Broj poruka : 1709
D4U Novac D4U Novac : 1871
Reputacija Reputacija : 31
Godina Godina : 24
Lokacija Lokacija : Svet Foruma
Poso/dokolice Poso/dokolice : Programiranje


Pogledaj profil korisnika

Nazad na vrh Ići dole

Pogledaj prethodnu temu Pogledaj sledeću temu Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu