Обнаружение столкновения со стеной, защелкивание через стены

0

Я делаю приложение в 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();
    },
  • 0
    Если вы не React код React я бы порекомендовал удалить тег React - сейчас это кажется чисто логической проблемой JS.
  • 0
    В моих фрагментах кода есть некоторый код React, и весь этот код находится внутри моего класса <App />.
Показать ещё 2 комментария
Теги:
html5-canvas

1 ответ

1
Лучший ответ

Как насчет того, чтобы просто вернуться к предыдущей позиции, если тест столкновения не удался?

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){
  • 0
    Это работает как шарм! Благодарю.
  • 0
    Хорошо, и увидеть опечатку
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню