canhao

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.dom.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var lancou = false;
        var x = 310;
        var y = 520;
        var direcao;
        function setup(){
            direcao = createVector(mouseX,mouseY);
            createCanvas(800,600);
            rect(300,580,20,30);
        }
        function draw(){
            if(mouseIsPressed && lancou==false){
                direcao.x = mouseX;
                direcao.y = mouseY;
                x = direcao.x;
                y = direcao.y;
                ellipse(x,y,20,20);
                lancou = true;
            }
            if (lancou){
                background(255);
                y+=direcao.y/8;
                x+=direcao.x/8;
                rect(300,580,20,30);
                ellipse(x,y,20,20);
            }

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