[HTML 5] Share code mưa sao băng được viết bằng HTML 5, không hình ảnh

Thảo luận trong 'Thảo luận website, Forum' bắt đầu bởi phuc113, 21 Tháng ba 2011.

  1. Offline

    phuc113

    • ÔI CÁI CUỘC ĐỜI NÀY

    • HOSTING - DOMAIN - VPS - THIẾT KẾ WEB
    Số bài viết:
    623
    Đã được thích:
    277
    Điểm thành tích:
    220
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html lang="en">

    <head>
    <title>Sao bang</title>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en">
    <meta name="description" content="javascript+canvas starfield">
    <meta name="keywords" content="starfield, star,3d,effect,visual,javascript,canvas,dhtml,webdesign,google,chrome">
    <meta name="author" content="REZ">
    <meta name="generator" content="REZ">
    <meta name="version" content="2.1">
    <meta name="copyright" content="REZ 2007-2009">
    <meta name="robots" content="all">
    <meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <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">
    google_ad_client='pub-5142607733332317';
    google_ad_slot='6304267293';
    google_ad_width=728;
    google_ad_height=15;
    </script>

    <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=new Array(5);
    star[0]=Math.random()*w*2-x*2;
    star[1]=Math.random()*h*2-y*2;
    star[2]=Math.round(Math.random()*z);
    star[3]=0;
    star[4]=0;
    }
    var starfield=$i('starfield');
    starfield.style.position='absolute';
    starfield.width=w;
    starfield.height=h;
    context=starfield.getContext('2d');
    //context.lineCap='round';
    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[3];
    star_y_save=star[4];
    star[0]+=mouse_x>>4; if(star[0]>x<<1) { star[0]-=w<<1; test=false; } if(star[0]<-x<<1) { star[0]+=w<<1; test=false; }
    star[1]+=mouse_y>>4; if(star[1]>y<<1) { star[1]-=h<<1; test=false; } if(star[1]<-y<<1) { star[1]+=h<<1; test=false; }
    star[2]-=star_speed; if(star[2]>z) { star[2]-=z; test=false; } if(star[2]<0) { star[2]+=z; test=false; }
    star[3]=x+(star[0]/star[2])*star_ratio;
    star[4]=y+(star[1]/star[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[2])*2;
    context.beginPath();
    context.moveTo(star_x_save,star_y_save);
    context.lineTo(star[3],star[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>

    <script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
    <script type="text/javascript"> var _uacct='UA-241365-1'; urchinTracker(); </script>

    </html>
    phuc113, 21 Tháng ba 2011
    #1
    thankailo, integer, congthangitvn và 1 người khác thích bài này.
  2. Offline

    viethung_9x

    • Windows XP

    Số bài viết:
    613
    Đã được thích:
    735
    Điểm thành tích:
    560
    viethung_9x, 21 Tháng ba 2011
    #2
  3. Offline

    phuc113

    • ÔI CÁI CUỘC ĐỜI NÀY

    • HOSTING - DOMAIN - VPS - THIẾT KẾ WEB
    Số bài viết:
    623
    Đã được thích:
    277
    Điểm thành tích:
    220
    Thấy hay hay, post cho vui ak mà, keke
    phuc113, 21 Tháng ba 2011
    #3
  4. Offline

    integer

    • Tiếu Ngạo Giang Hồ

    • :-?
    Số bài viết:
    1.695
    Đã được thích:
    1.313
    Điểm thành tích:
    900
    Tốt, rất đáng học hỏi. Chủ yếu dùng java script mà đẹp thế :)
    integer, 22 Tháng ba 2011
    #4
  5. Offline

    phuc113

    • ÔI CÁI CUỘC ĐỜI NÀY

    • HOSTING - DOMAIN - VPS - THIẾT KẾ WEB
    Số bài viết:
    623
    Đã được thích:
    277
    Điểm thành tích:
    220
    nhìn giống như flash như thạtlaf1 bức ảnh thui. hay wa
    phuc113, 22 Tháng ba 2011
    #5

Chia sẻ trang này

Advertising: Linux system admin | nukeviet | nukeviet 4 | Upload ảnh miễn phí