墙的碰撞检测，clitches虽然墙壁

Question

我在做一个应用程序的反应，和/ HTML5 /画布。在画布中，用户可以通过鼠标点击移动到不同的房间。这是有效的，我已经为房间的所有墙壁进行了碰撞检测（视图像RTS游戏一样是2D）。

现在的问题：当我撞墙时，我设置了user.collision = true;然后下一个鼠标点击将设置user.collision = false;，这将使我的角色再次移动。问题是我现在可以通过墙壁进行剪辑，如果再次单击它（通过它）。

有没有想过解决这个逻辑，我无法弄清楚，和我的研究并没有帮助我。

这里是我的碰撞检测功能：（所有的墙壁都在this.props.data）

collision: function(){ 
    for (var i = 0; i < this.props.data.length; i++){ 
    if (user.posX > this.props.data[i].x2 && user.posX < this.props.data[i].x1 && 
     user.posY < this.props.data[i].y2 && user.posY > this.props.data[i].y1){ 
     user.collision = true; 
    } 
    } 
}, 

这里是我的handleMouseClick功能：

handleMouseClick: function(event){ 

var rect = game.getBoundingClientRect(); 
     mouseClick.y = event.nativeEvent.clientY - rect.top; 
     mouseClick.x = event.nativeEvent.clientX - rect.left; 
     distance = Math.sqrt(Math.pow(mouseClick.x - user.posX, 2) + Math.pow(mouseClick.y - user.posY,2)); 
     user.directionX = (mouseClick.x - user.posX)/distance; 
     user.directionY = (mouseClick.y - user.posY)/distance; 
    if (user.collision = true){ 
     user.collision = false; 
    } 
}, 

这里是我的更新功能：

update: function(){ 
    context.canvas.height); 
     if (!user.collision){ 
     if(user.moving === true){ 
      user.posX += user.directionX * user.speed * elapsed; 
      user.posY += user.directionY * user.speed * elapsed; 
      this.collision(); 
      if(user.posX >= mouseClick.x -5 && user.posX <= mouseClick.x + 5 && user.posY >= mouseClick.y -5 && user.posY <= mouseClick.y + 5){ 
       user.moving = false; 
      } 
     } 
     } 
     this.drawUser(); 
     this.drawWalls(); 
    }, 

Answer 1

如何只恢复到先前的POS如果碰撞TES t失败？

update: function(){ 
    context.canvas.height); 
    var prevPosX = user.posX; 
    var prevPosY = user.posY; 
    if (!user.collision){ 
     if(user.moving === true){ 
      user.posX += user.directionX * user.speed * elapsed; 
      user.posY += user.directionY * user.speed * elapsed; 
      this.collision(); 
      if(user.collision) { // ooops ! 
       user.posX = prevPosX; 
       user.posY = prevPosY;     
      } 
      if(user.posX >= mouseClick.x -5 && user.posX <= mouseClick.x + 5 && user.posY >= mouseClick.y -5 && user.posY <= mouseClick.y + 5){ 
       user.moving = false; 
      } 
     } 
    } 
    this.drawUser(); 
    this.drawWalls(); 
}, 

注：这里错字

if (user.collision = true){