using touch to activate an event

Question

I am working on a game based off of this but trying to implement it to work on a Touch device. the code for if they are touching is still the same;

if (
    reggie.x <= (monster.x + 32)
    && ball.x <= (reggie.x + 32)
    && reggie.y <= (monster.y + 32)
    && ball.y <= (reggie.y + 32)
) {
    ++ballsCollected;
    reset();
}

to make it to where you do not need a directional pad on a touch device I am trying to figure out how to make it where if you clicked on ball it then adds one to ballsCollected. I've looked at using Touch Events but i am not sure how I would go about making it work.

if there is a way to move reggie by dragging him with your fingers to make the two objects connect and still add one that would be cool and add a bit of a challenge.

any help or point in the right direction would be helpful.

Answer 1

any help or point in the right direction would be helpful

There are many references out on the web. Have a look at

• W3 spec draft
• MDN reference
• html5rocks tutorial
• quriksmode.org: The touch action / Do we need touch events?
• jQuery mobile's events

Answer 2

use touchmove event instead of keydown if you want to use touch device.

     $("#game-container").bind("touchmove", function (event) {

          reggie.x = event.originalEvent.targetTouches[0].pageX;
          reggie.y = event.originalEvent.targetTouches[0].pageY;

          if (
      reggie.x <= (monster.x + 32)
      && monster.x <= (reggie.x + 32)
      && reggie.y <= (monster.y + 32)
      && monster.y <= (reggie.y + 32)
          ) {
              ++monstersCaught;
          reset();
        }

      });