Canvas special effects ---- bouncing box

Canvas Effects
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Canvas </ title>
    <style type="text/css">
        /*CSS source code*/
        body{
            background:#CFCFCF;
        }

    </style>
</head>
<body>
<!-- Do not add <body> tags to HTML snippets //-->
<div id="container">
    <canvas id="Gbtags"></canvas>
</div>
<script>
    /*Javascript code snippet*/
    window.onload = function()
    {
        // get element and declare 2d
        var canvas = document.getElementById("Gbtags");
        var ctx = canvas.getContext("2d")

        var W = 600, // set width
                H = 400; // set height

        // set canvas width and height
        canvas.width = W;
        canvas.height = H;

        /*=========== Box  ===========*/
        function Box(_x,_y)
        {
            this.x = _x;
            this.y = _y;

            // give the box speed
            this.xVel = 10 + Math.random()*20;
            this.yVel = 1;

            // width and height of the box
            this.width = 30
            this.height = 30;




            // random color 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)";

            ctx.font = 'bold 30pt "microsoft yahei"';
            ctx.fillStyle = this.rgba;
            ctx.fillText('Hello, geek tag', 100, 150);

            this.draw = function()
            {
                ctx.strokeStyle = this.rgba;
                ctx.strokeRect(this.x,this.y,this.width,this.height);
                this.update();
            }

            // handle our logic functions for our box
            this.update = function()
            {

                if(this.x < 0) {
                    this.x = 0;
                    this.xVel *= -1;
                }

                if(this.x > W - this.width)
                {
                    this.x = W - this.width;
                    this.xVel *= -1;
                }

                // check the top border
                if(this.y < 0) {
                    this.y = 0;
                    this.yVel *= -1;
                }

                if(this.y < H - this.height)
                    this.yVel += .25;

                // check the bottom border
                if(this.y > H - this.height)
                {
                    // Decrease the speed of the ball when it bounces off the bottom
                    this.xVel *= .5
                    this.yVel *= .5

                    this.y = H - this.height; // position it to 0
                    this.yVel *= -1; // enable him to bounce
                }

                // add movement speed to our x/y
                this.x += this.xVel;
                this.y += this.yVel;
            }
        }

        // make the box
        var boxes = [];

        // function to draw something on our screen :)
        function draw()
        {
            // Background color
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = "rgba(0,0,0,0.5)"
            ctx.fillRect(0,0,W,H);

            ctx.globalCompositeOperation = "lighter"

            for(i=0; i < boxes.length; i++)
                boxes[i].draw();

            update();
        }

        // our logic function
        function update()
        {
            for(i=0; i < boxes.length; i++)
                boxes[i].update();
        }

        // We specify to add a box every minute
        setInterval(function(){
            boxes.push( new Box(0,0))
        },1000);

        //set the interval so we can draw and then update our canvas
        //every 30ms
        setInterval(draw,30);
    }
</script>



</body>
</html>
Canvas special effects ---- bouncing box

Guess you like
