cloning and clicking on a moving HTML5 Canvas element using Javascript

StackOverflow https://stackoverflow.com/questions/21172777

Question

I need to figure out how to make a canvas element become clickable as well duplicate the element on the click, with the same properties. I have tried a few tricks with finding the ball via logic and pointing to the radius and coordinates of the ball and creating a clone constructor/prototype but to no avail has it worked! Thank you for the help!

Code below:

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #balling {
            border:1px solid rgb(0,0,0);
        }

    </style>
</head>
<body>

    <canvas id="balling" width="500" height="400"></canvas>



    <!-- Javascript on the bottom to make page run faster -->
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript">

        var canvas = document.getElementById('balling');
        var context = canvas.getContext('2d');

        // The Properties of the Circle and Position within the Viewport
        var CircleOptions = {
        posBall: {
            x: 160, 
            y: 180
        },
            radius: 40,
            startAngle: 0, 
            endAngle: Math.PI * 2, 
            anticlockwise: false,
            radians: 0,
            xMove: Math.random(),
            yMove: Math.random(),
            speed:2,
            angle:80,
            velocityX:1,
            velocityY:1
        }; 

        //Math to make the ball move
        function moveBall() {
            CircleOptions.radians = CircleOptions.angle * Math.PI/180;
            CircleOptions.xMove = Math.cos(CircleOptions.radians) * CircleOptions.speed * CircleOptions.velocityX;
            CircleOptions.yMove = Math.sin(CircleOptions.radians) * CircleOptions.speed * CircleOptions.velocityY;
        }

        //Function to draw the ball
        function DrawOptions() {
        //Reset Canvas
            context.fillStyle = "white";
            context.fillRect(0, 0, canvas.width, canvas.height);

        //Drawing of the ball
            context.fillStyle = "rgb(142, 68, 173)";
            context.beginPath();
            context.arc(CircleOptions.posBall.x, CircleOptions.posBall.y, CircleOptions.radius, CircleOptions.startAngle, CircleOptions.endAngle, CircleOptions.anticlockwise);
            context.closePath();
            context.fill(); 


            }

        //finding the coordinates of the circle
        function CircleCoordinates(CircleOptions) {
            var left = CircleOptions.posBall.x - CircleOptions.radius,
            top = CircleOptions.posBall.y + CircleOptions.radius,
            right = CircleOptions.posBall.x + CircleOptions.radius,
            bottom = CircleOptions.posBall.y - CircleOptions.radius;
        }

        // Animate and call the function to move the ball
        setInterval(Move, 20);

        //Function call for the ball
        moveBall();

        //The function to make it move, reset canvas for movement and color/create shape of ball
        function Move() {
            //Function call for drawing and pinpointing the coordinates
            DrawOptions();
            CircleCoordinates(CircleOptions);


            //Power to make it move
            CircleOptions.posBall.x += CircleOptions.xMove;
            CircleOptions.posBall.y += CircleOptions.yMove; 

            //checks for ball hitting the Wall
            if(CircleOptions.posBall.x > canvas.width || CircleOptions.posBall.x < 0) {
                CircleOptions.angle -= 770;
                moveBall();
            } else if(CircleOptions.posBall.y > canvas.height || CircleOptions.posBall.y < 0) {
                CircleOptions.angle -= 2760;
                moveBall();
            } else if(CircleOptions.posBall.y == canvas.height || CircleOptions.posBall.y > canvas.width) {
                CircleOptions.angle += 90;
                moveBall();
            }
        }

        $('#balling').on('click', function(e) {
            var clickedX = e.pageX - this.offsetLeft;
            var clickedY = e.pageY - this.offsetTop;

            if (clickedX > CircleOptions.right && clickedX > CircleOptions.left && clickedY > CircleOptions.top && clickedY < CircleOptions.bottom) {
                alert ('clicked number ');
            }
        }); 

        //Clone prototype and constructor
        function Clone() {
            Clone.prototype = CircleOptions;
            var c = new Clone();
            if(CircleOptions.posBall.x < canvas.width || CircleOptions.posBall.y == canvas.height) {
                return c;
            }

        }

        //function call for clone
        Clone();




    </script>
</body>

A link to the fiddle to see the code live: http://jsfiddle.net/coder101/CMW24/

Was it helpful?

Solution

For cloning DOM nodes use cloneNode. For debugging the code use jsfiddle, so the community could help you in spotting the problem with clicks

You had few bugs in your code. The corrected version:

function CircleCoordinates() {
    CircleOptions.left = CircleOptions.posBall.x - CircleOptions.radius,
    CircleOptions.right = CircleOptions.posBall.x + CircleOptions.radius,
    CircleOptions.top = CircleOptions.posBall.y - CircleOptions.radius,
    CircleOptions.bottom = CircleOptions.posBall.y + CircleOptions.radius;
}

...

canvas.addEventListener('click', function (e) {
    var clickedX = e.pageX - this.offsetLeft;
    var clickedY = e.pageY - this.offsetTop;

    if (clickedX < CircleOptions.right && clickedX > CircleOptions.left && clickedY > CircleOptions.top && clickedY < CircleOptions.bottom) {
        alert('clicked number ');
    }
});

(Why do you need jQuery?)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top