牆的碰撞檢測，clitches雖然牆壁

我在做一個應用程序的反應，和/ HTML5 /畫布。在畫布中，用戶可以通過鼠標點擊移動到不同的房間。這是有效的，我已經爲房間的所有牆壁進行了碰撞檢測（視圖像RTS遊戲一樣是2D）。牆的碰撞檢測，clitches雖然牆壁

現在的問題：當我撞牆時，我設置了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(); 
    },

來源

2016-01-19 Modig

除非您發佈'React'代碼我建議去掉'React'標籤 - 這個現在似乎是一個純JS的邏輯問題。 –

我的代碼片段中有一些React代碼，並且所有代碼都在我的類中。 – Modig

如何向我們展示什麼'drawUser'和'drawWalls'做 –

如何只恢復到先前的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){

來源

2016-01-19 08:21:30 Ilya

這就像一個魅力！謝謝。 – Modig

OK，看到錯字 – Ilya

但是，如果用戶是足夠快的glicht仍然會發生（當用戶在一個時步通過牆）@Modig –

牆的碰撞檢測，clitches雖然牆壁

回答

相關問題