javascript - HTML 5 迷宫游戏 - 如果触摸事件继续，碰撞检测后要做什么？

Question

我正在使用 html5 Canvas 和 javascript 开发迷宫游戏(我更喜欢使用 jquery 库进行编码)。 - 该游戏适用于移动设备，我对使用触摸事件完全陌生

在 Canvas 上，我正在添加迷宫图像 - 黑白 gif 迷宫。

我将使用 trouch 在迷宫中导航。

这是我所做的:

1. 为触摸添加一个事件监听器:

   window.addEventListener("touchmove", handleMove, false);

2. 添加了处理移动的函数:

   函数 handleMove(e){ e.preventDefault();

   // Check the 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 IS THE PROBLEM - WHAT SHOULD I DO? 
       //BECAUSE IF THE TOUCH EVENT CONTINUES, THE COLLISION  
       // FUNCTION WILL HIT THE WHITE COLOR AGAIN 
       //AND THE BALL WHICH I AM NAVIGATING THROUGH THE MAZE WILL 
       // PASS THE BORDER.
   }       
   

   };

3. 检查碰撞 - 这是我的问题

遇到黑边怎么办？

如果用户继续移动并且触摸事件继续，当他再次击中白色时，我正在穿过迷宫的球会跳过黑色边框。

那么，我可以停止事件……有什么想法吗？

这是碰撞函数:

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

Answer 1

这是一个想法:

我假设你一直都知道球的当前位置，并且用户不断地触摸屏幕来移动并且不能只是停止触摸，将他们的手指移动到一个新位置，然后再次开始触摸以将球移动到那个点。

当checkcollision 函数返回1 时，您就知道碰撞的位置。您可以做的是保存该位置并设置一个标志，以防止球更新其位置，除非触摸事件发生在球和碰撞之间。这将防止用户穿过墙壁，无论墙壁的方向如何。它看起来像这样

var updateBall = true;
var collisionPosX, collisionPosY;

function handleMove(e) {
   // do collision check


   if (collision == 0 && updateBall == true) {
     // update ball
   }
   else if (collision == 0 && /* touch is between collisionPos and current ball position */ ){
      updateBall = true;
   }
   else if (updateBall) {
      collisionPosX = checkx;
      collisionPosY = checky;
      updateBall = false;
   }      
}

根据您的游戏运行方式和您允许的有效 Action (例如用手指骑在墙上然后进入白色在路径的更远处，这会把球传送到那个位置，因为它是有效的吗？)。哎呀，做那种检查可能行不通，但希望这种设计的结构能帮助您了解哪种检查行得通。

再说一次，这只是一个想法，所以请按它的值(value)接受它。