Not Obvious to Me

‹prev | My Chain | next›

Tonight, I'd like to see if I can figure out what is going on with chatting in my (fab) game. Chatting works, but immediately after I say something, collisions no longer work:



My collision detection is rather convoluted at this point:

    var c_el = document.elementFromPoint(avatar.attr("cx") + 8,
                                         avatar.attr("cy") + 8);

    if (!self.initial_walk &&
        !self.mid_bounce &&
        c_el != self.avatar.node &&
        c_el != self.avatar.paper.bottom.node) {
      // console.debug(c_el);
      // console.debug(self.avatar);
      self.stop();
      self.bounce_away();
    }

So I have a few things to check. In the javascript console, I look my player up in the player_list and test those attributes:



Hrm... Both of those attributes are false, as they ought to be. So why is the player not colliding?

I try approaching the problem from the opposite direction. I am trying to find the colliding element with document.elementFromPoint. I add a player to the room at x-y 250,350 then try document.elementFromPoint(250 + 8, 350 +8) (the 8 is the offset of the room from the top and left of the document). It works before I chat, but fails after I chat.

I try manually simulating the chat event, but it always works. Until I use the chat built into the game. It's maddening.

I don't actually solve the problem until I record the video above. Until then I only scrolled the chat dialog into view when I wanted to chat. When I recorded the view above (at first), I scrolled into view prior to recording... and it always failed to collide players properly. At first I blamed the video recording software, but ultimately I realized the common theme to failure was scrolling. Whenever I chat, I have been scrolling the chat into the view port, which messes with the offset.

I am able to get things working—even with scrolling through judicious use of jQuery's offsetTop and offsetLeft:

    var c_el = document.elementFromPoint(avatar.attr("cx") + 8  - $(document).scrollleft(),
                                         avatar.attr("cy") + 8 - $(document).scrollTop());

Wish I would have thought of that sooner...

Day #141