1

So I am trying to create a game where a square box is generated randomly in a canvas element. And when the user clicks on the box, the box should disappear and a new one should appear. There should also be a timer showing how long it has been since the box appeared (rounded to the nearest tenth of a second). The time should reset to 0 each time a new box appears. I also want to keep a score, with the score based on how long it took the user to click the box, shorter times leading to higher scores. The score should be updated each time the user clicks on a box.

And I only want 10 boxes to appear randomly one at a time and then stop after the last box is clicked.

Right now, I am stuck on how to capture the click event for the randomly generated boxes. I researched online and on StackOverflow but all of the answers were really complicated to follow and I couldn't find a way to apply those logic into what I am trying to accomplish.

So my problem currently is how would I capture the click event for the randomly positioned box and how can I make it disappear once someone clicks it?

Here is my code currently: http://codepen.io/developertenzin/full/ZQgxmZ/

HTML:

<canvas id="myCanvas" width=500 height=500>

</canvas>

CSS:

#myCanvas {
    margin: auto;
    display: block;
    border: 1px solid black;
}

JAVASCRIPT:

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

c.fillStyle = "black";
function makeBox() {
    setTimeout(function() {
        var top = Math.random();
        top = top * 500;
        var left = Math.random();
        left = left * 500;
        c.fillRect(top, left, 50, 50);
        createdTime = Date.now();
    }, 1000);
}

makeBox();

I thank you for your help in advance.

1 Answer 1

2

Something like this should work.

canvas.addEventListener('click',function(event)
{
    //remove the extra coords added on by the position of canvas
    var x=event.clientX-event.target.OffsetLeft;
    var y=event.clientY-event.target.OffsetTop;
    inBox(x,y);
});
function inBox(x,y)
{
   if ((y>top)&&(y<top+50)&&(x>left)&&(x<left+50))
   {
       //inside the bounds
   }
}
4
  • If the canvas element is inside another element that is not positioned at the top left of the page, you will need to take all of the parents' offsets into account as well.
    – Minifyre
    Feb 24, 2016 at 3:19
  • Ok so my understanding is that I would have to give the canvas a margin of 0. And I just write the code to make the box disappear on click within inbox function?
    – nastypluto
    Feb 24, 2016 at 3:48
  • It's also saying "y" is not defined. Still not working :(
    – nastypluto
    Feb 24, 2016 at 13:44
  • You could give the canvas a margin of zero & if it is in the top left corner of the screen, you could omit the offset parts. Also I fixed my answer. Previously the inBox function took event, but it needed x & and y- that's why they were undefined. @developertenzin
    – Minifyre
    Feb 24, 2016 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.