Я делаю приложение в React/html5/canvas. На холсте вы можете перемещаться в разных комнатах с помощью мышелов. Это работает, и я сделал обнаружение столкновения для всех стен для комнат (вид 2d, как игра RTS).
Теперь к проблеме: Когда я ударил стену, я установил user.collision = true;
И следующий mouseclick установит 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();
},
Как насчет того, чтобы просто вернуться к предыдущей позиции, если тест столкновения не удался?
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();
},
NB: опечатка здесь
if (user.collision = true){
React
кодReact
я бы порекомендовал удалить тегReact
- сейчас это кажется чисто логической проблемой JS.