Untitled

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <title>...</title>
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <style>
        canvas {border:1px solid #eee;}
        .grey {background:#ccc; margin:2px; border:1px solid #aaa; padding:10px;}
        #demo strong {font-size:0.8em; color:#333;}
        #demo strong span {color:#663399}
    </style>

    <body>
        <canvas id="myCanvas" width="500" height="500" >
            tresc alternatywna
        </canvas>
        <script>

        var canvas = document.getElementById('myCanvas');
        var c = canvas.getContext('2d');
        var kola = [];
        var ilekul = 3;
        function kolo(can, _x, _y, _speed, _id)
        {
            this.x = _x;
            this.y = _y;
            this.id = _id;
            this.speed = _speed;
            this.przex = _speed;
            this.przey = _speed;

            this.drawkolo = function() {
                can.beginPath();
                can.fillStyle = 'black';
                can.arc(this.x, this.y, 40, 0, Math.PI * 2, true);
                can.closePath;
                can.fill();
            }


            this.ruch = function() {

                kolizje(this);

                this.x += this.przex;
                this.y += this.przey;
                this.drawkolo();
            }
        }

        function kolizje(kol)
        {


                /*  for (i=0; i<kola.length; i++) {
                        if( i != kol.id)
                        {
                            if(Math.sqrt(Math.pow(kol.x - kola[i].x , 2) + Math.pow(kol.y - kola[i].y , 2)) <= 80) {

                                kol.przex -= kola[i].przex;
                            }
                        }


                    } */


                if (kol.x < 40 || kol.x > 460) {
                    kol.przex = -kol.przex;
                }
                if (kol.y < 40 || kol.y > 460) {
                    kol.przey = -kol.przey;
                }


        }


        function draw() {
            c.clearRect(0, 0, 500, 500);
            for (i=0; i<kola.length; i++) {

                kola[i].ruch();
            }
        }


        for (i=0; i<ilekul; i++) {
            var new_x = 40 + Math.random()*420;
            var new_y = 40 + Math.random() * 420;
            var new_speed = Math.round(1 + Math.random()*3);
            kola.push(new kolo(c, new_x, new_y, new_speed, i));
        }

            setInterval("draw()", 10);

        </script>
    </body>
</html>