Code သံုးၿပီး animation လုပ္ရေအာင္ 2

တင္ဆက္သူ Unknown ဤအခ်ိန္တြင္ 1:30 AM with No comments

ဒီတစ္ခါမွာေတာ့.. animation box ေလးေတြလုပ္ၾကရေအာင္...။ ပံုဆြဲစရာမလုိပါဘူး..။ code နဲ႔ပဲေရးသြားမွာပါ..။ ပထမဆံုးေအာက္က.. code ေတြကို.. copy ကူးလိုက္ပါ..။

<html>
<head>
<style>
body {margin:0px ; padding: 0px}
canvas{display:block}

</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
window.onload = function()
{
    // lets get the HTML canvas element so we draw on it
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d")
   
    var W = window.innerWidth,    // get the width of our window
            H = window.innerHeight;// get the height
           
            // set our canvas to our size of Width and height
            canvas.width = W;
            canvas.height = H;
           
            /*=========== Box class ===========*/
            function Box(_x,_y)
            {
                // the X/Y position
                this.x = _x;
                this.y = _y;
               
                // lets give it velocity X and Y
                this.xVel = 10 + Math.random()*20;
                this.yVel = 1;
               
                // the box width and height
                this.width = 20
                this.height = 20;
               
                // random colors for our box
                this.r = Math.round(Math.random()*255);
                this.g = Math.round(Math.random()*255);
                this.b = Math.round(Math.random()*255);
               
                this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";
               
                // lets make draw method for our box
                this.draw = function()
                {
                    ctx.strokeStyle = this.rgba;
                    ctx.strokeRect(this.x,this.y,this.width,this.height);
                   
                    this.update();
                }
               
                // function that handle our logics for our box
                this.update = function()
                {
                    // lets check if the ball get out of our screen and when
                    // it does that, make it bounce
                    // check the left window border
                    if(this.x < 0) {
                        this.x = 0;            // set its position to 0
                        this.xVel *= -1; // make it bounce
                    }
                   
                    // check the right border
                    if(this.x > W - this.width)
                    {
                            this.x = W - this.width;            // set its position to 0
                            this.xVel *= -1; // make it bounce
                    }
                   
                    // check the top border
                    if(this.y < 0) {
                        this.y = 0;            // this is what happen when u copy/paste
                        this.yVel *= -1; // make it bounce
                    }
                   
                    // the reason why we did this if function so the boxes dont
                    // try to add y by its velocity when its reach bottom
                    // cause it will cause it to spazz
                    // now we add gravity
                    if(this.y < H - this.height)
                        this.yVel += .25;
                   
                    // check the bottom border
                    if(this.y > H - this.height)
                    {
                            // when it bounce off the bottom decrease the ball speed
                            this.xVel *= .5
                            this.yVel *= .5
                           
                            this.y = H - this.height;            // set its position to 0
                            this.yVel *= -1; // make it bounce
                    }

// move add speed to our x/y
                    this.x += this.xVel;
                    this.y += this.yVel;
                }
            }
           
            // lets make array of boxes
            var boxes = [];
           
            // Function to draw stuff on our screen :)
            function draw()
            {
                // Background
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = "rgba(0,0,0,0.5)"
                ctx.fillRect(0,0,W,H);
               
                ctx.globalCompositeOperation = "lighter"
               
                // loop through the boxes and draw them
                for(i=0; i < boxes.length; i++)
                    boxes[i].draw();
               
                update();
            }
           
            // Function for our logic
            function update()
            {
                // loop through the boxes and draw them
                for(i=0; i < boxes.length; i++)
                    boxes[i].update();
            }
           
            // add box every minute we specify
            setInterval(function(){
                boxes.push( new Box(0,0))
            },1000);
           
            // set interval so we can draw then update our drawing
            // every 30 milisecond
            setInterval(draw,30);
}
</script>
</body>
</html>

notepad ထဲမွာ.. code ေတြကုိ.ထည့္လိုက္ပါမယ္..။ File > save ဆုိၿပီး.. box.html လို႔နာမည္ေပးၿပီး.. desktop မွာ သိမ္းလိုက္ပါ..။ desktop ေပၚက.. box.html ကုိ double click ႏွိပ္ၿပီးဖြင့္ၾကည့္လိုက္ပါ..။ box ေလးေတြ..က်လာတာကုိ..ေတြ႔ရပါလိမ့္မယ္...။ ဘာ ပံုမွမပါပါဘူး.. code နဲ႔ပဲေရးသြားတာပါ.. ^_^

ဝန္ခံခ်က္။ ။ Technological Villa မွ ကူးယူတင္ျပပါသည္။

Code သံုးၿပီး animation လုပ္ရေအာင္ 2

0 ထင္ျမင္ခ်က္:

Post a Comment

Post ဖတ္ႏိုင္ရန္အတြက္သင့္emailထားခဲ့ပါ။

Popular Posts

Random Post

ေနာက္ဆံုးတင္ထားသမွ်

Comment

Total Pageviews

လည္ပတ္သင့္ေသာ ေနရာမ်ား