Tom Knowlton
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?
Program "letter bubbles" going from right to left across the screen during game play:
$(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);
});
Program "letter bubbles" going from right to left across the screen during game play:
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
"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.
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you both!
Tom
Tom
ASKER