javascript - HTML 5 maze game - What to do after collision detection if the touch event continues? -

i working on maze game using html5 canvas , javascript (i prefer using jquery library coding). - the game mobile devices , totaly new using touch events

on canvas, adding maze image - black , whit gif labyrinth.

i going use trouch in order navigate through maze.

here have done:

1. add event listener touch:

   window.addeventlistener("touchmove", handlemove, false);

2. added function handle move:

   function handlemove(e){ e.preventdefault();

   // check touch position on canvas var checkx = event.targettouches[0].pagex - canvas.offsetleft; var checky = event.targettouches[0].pagey - canvas.offsettop;  var collision = checkcollision(checkx,checky);  if (collision == 0){     x = checkx;     y = checky;     draw(imgwidth,imgheight,ctx); } else {     // here problem - should do?      //because if touch event continues, collision       // function hit white color again      //and ball navigating through maze      // pass border. }        

   };

3. checking collision - here problem

what do when hit black border?

if user continues move , touch event continues, when hits white again, ball navigating through maze jumps on black border.

so, stop event... ideas?

here collision function:

function checkcollision(checkx, checky){         var collision = 0;         var imgd = ctx.getimagedata(checkx, checky, 15, 15);         pix = imgd.data;         (var = 0; n = pix.length, < n; += 4){             if (pix[i] == 0) {                 collision = 1;             } else if(pix[i] == 255 && pix[i + 1] == 0){                 winner = "yes";             }         }         //console.log("colision fromn function: "+collision);         return collision;     } 

here 1 idea:

i assume know current position of ball @ times , user touching screen move , not able stop touching, move finger new location, , begin touching again move ball point.

when checkcollision function returns 1, know position of collision. can save position , set flag prevents ball updating it's position unless touch event between ball , collision. prevent user passing through walls no matter direction of wall. this

var updateball = true; var collisionposx, collisionposy;  function handlemove(e) {    // collision check      if (collision == 0 && updateball == true) {      // update ball    }    else if (collision == 0 && /* touch between collisionpos , current ball position */ ){       updateball = true;    }    else if (updateball) {       collisionposx = checkx;       collisionposy = checky;       updateball = false;    }       } 

there difficulties in knowing how write "is between collisionpos , current ball position" check based on how game works , allow valid movements (such riding wall finger , going white further down path, teleport ball location because valid?). heck, doing kind of check won't work, structure of design know kind of check work.

again, 1 idea, take it's worth.