Link to home
Start Free TrialLog in
Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America

asked on

word creation game - click on moving circle - HTML5 canvas / JavaScript

How do i set it up so I can click on a moving circle and the mouse down generates an event I can respond to?


$(function () {

    var i = 0;

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    

    var one = {
        x: 500,
        origX: 500,
        step: 7,
        y: 300,
        color: '#3B653D',
        useletter: 'G'        
    };

    var two = {
        x: 2800,
        origX: 2800,
        step: 7,
        y: 60,
        color: '#3B653D',
        useletter: 'T'        
    };

    _myCircleArray = [one, two];

    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    function drawTextBubble(myCircle, context) {
        //the circle
        context.beginPath();
        context.arc(myCircle.x, myCircle.y, 50, 0, Math.PI * 2, false);
        context.fillStyle = myCircle.color;
        context.fill();
        context.strokeStyle = '#FFF';
        context.stroke();

        //the letter inside the circle
        context.beginPath();
        context.fillStyle = '#FFF';
        context.fill();
        context.font = "40px Grunge Handwriting";
        context.fillText(myCircle.useletter, myCircle.x - 10, myCircle.y + 10);
        context.strokeStyle = '#FFF';
        context.stroke();
    }

    function animate(canvas, context, startTime) {
        var time = (new Date()).getTime() - startTime;
        context.clearRect(0, 0, canvas.width, canvas.height); // only clear once
        for (var a = 0; a < _myCircleArray.length; a++) {
            var myCircle = _myCircleArray[a];           
            myCircle.x = myCircle.x - myCircle.step;

            if (myCircle.x < -50) {
                myCircle.x = myCircle.origX;
            }

            drawTextBubble(myCircle, context);
        }
        requestAnimFrame(function () {
            animate(canvas, context, startTime);
        });
    }

    // wait one second before starting animation
    setTimeout(function () {
        var startTime = (new Date()).getTime();
        animate(canvas, context, startTime);
    }, 1000);

});

Open in new window



Program "letter bubbles" going from right to left across the screen during game play:

User generated image
Avatar of Tom Knowlton
Tom Knowlton
Flag of United States of America image

ASKER

The idea being to "capture" the letter (  "T" or "G" above ) to create words...
ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
greetings knowlton, , Looked at your question parts, and looked at your code, although you say -
"Program "letter bubbles" going from right to left across the screen during game play"
    and
"so I can click on a moving circle and the mouse down generates an event I can respond to"

Since you are using a Canvas, the HTML canvas is a single page element, so any and all of your moving circles, do NOT have any browser DOM identity, they are just unknown colors on the single canvas. So to detect a positional Click (on a mover circle) you will need to do the Math, to calculate the rectangles that all of the circles occupy at the time of click, and then test to see if the click point is inside of any of the circle "click area rectangles" at that time. However,since these are circles, you may want to NOT detect the corners of the click rectangle OUTSIDE of the circle, which requires even more math.
If your moving Circles, do not change their Y (horizontal) position, then you can use the "height" and add the Offset from top (the Y position) to get an unchanging Y click range for the rectangle, the math for the X click range, is more work, as you need to use the current X position for ALL movers and set the range by adding the circle width, and then use an IF test on ALL circle click rectangles, to see which rectangle (if any) has the click point in it's range (both X and Y).

I beleive if I were doing this I would Not use a Canvas, just a container div, and then use several mover <div> animated within the container <div>, that way you can just set the "onclick" (or the "onmousedown") for each of the mover <div>, so the browser does all of the position detection math and click point for you.
I beleive if I were doing this I would Not use a Canvas, just a container div, and then use several mover <div> animated within the container <div>, that way you can just set the "onclick" (or the "onmousedown") for each of the mover <div>, so the browser does all of the position detection math and click point for you


How long would it take you to create a small example I can test....like what Robert Schutt provided?
I'll see if I have time, but doing any movement game web interface is not an easy or fast development try.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you both!

Tom