HTML5迷宫游戏-如果触摸事件继续，碰撞检测后怎么办？

Question

我正在使用html5画布和javascript开发一个迷宫游戏（我更喜欢使用jquery库进行编码）这个游戏是为移动设备而设计的，我对使用触摸事件是完全陌生的

在画布上，我添加了迷宫图像-黑白gif迷宫。

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

以下是我所做的：

>

为触摸添加事件侦听器：

window.add事件监听器（触摸移动，句柄移动，假）；

添加了处理移动的功能：

函数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.
}       

};

检查碰撞-这是我的问题

当我碰到黑色边界时我该怎么办？

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

所以，我可以停止活动...有什么想法吗？

这里是碰撞功能：

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

您的另一个问题已删除，因此我将在此处回答：

我猜你是在问函数的链接，或者说它是如何工作的。

看一看:

//chaining basics
var obj = {
   a: function(){
        //do something...
        return this;
     },
   b: function() {//do somethingelse 
        return this;
     }
};

然后你可以把这样的东西叫做... obo. a（）. b（）；

因此，在您的示例中，需要执行以下操作：

function  makeObj(id){
   var ele = document.getElementById(id);
   this.red= function(){
      ele.style.backgroundColor='red';
        return this;
    };
    this.blue= function(){
      ele.style.backgroundColor='red';
        return this;
    };
  //and so on...
}

var p = new makeObj('paragraph1');

或者如果你像这样写makeObj函数，你可以像这样写

var p = makeObj('paragraph1'); //remember $ is just a character. Which you can use too.

function  makeObj(id){
   var ele = document.getElementById(id);
return {
   red: function(){
      ele.style.backgroundColor='red';
        return this;
    },
   blue: function(){
      ele.style.backgroundColor='blue';
        return this;
    }
  //and so on...
      };
}

现在您可以执行以下操作：

var p = makeObj('idofelem');
p.red();
p.red().blue();
p.blue():

Answer 2

这里有一个想法：

我假设您随时都知道球的当前位置，并且用户不断触摸屏幕以移动，但不能停止触摸，将手指移动到新位置，然后再次开始触摸以将球移动到该点。

当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;
   }      
}

根据您的游戏工作方式和您允许的有效运动（例如，用手指骑墙，然后沿着路径进入白色区域，这是否会将球传送到该位置，因为它是有效的？），了解如何编写“is between collisionPos and current ball position”（在碰撞位置和当前球位置之间）检查会有一些困难。见鬼，这可能是因为做这种检查不起作用，但希望这种设计的结构能帮助你知道什么样的检查会起作用。

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