0

I am developing a javascript game. It has a pretty complex UI requiring lot of user interaction to be able to make a move. I am now developing the AI for the game so that it can be played against a computer. I was thinking of programatically raising events using the dispatchEvent method to drive the UI when the computer is playing the game, but I run into a problem what if the user also starts interacting with the UI - that will completely mess up the game. So is there a pattern followed by people developing javascript games to take care of this problem?

Let's say I have a set of event handlers - onmousedown, onmousemove, onmouseup etc. Both human player and computer use these handlers to make a move. But human player relies on manually interacting with the app, whereas the computer invokes these handlers via the dispatchEvent method. When its the computer's turn, I need a way to tell js: look I don't want you to invoke these handlers on manual UI interaction. only invoke them in response to a dispatchEvent

morpheus
  • 18,676
  • 24
  • 96
  • 159
  • Related http://stackoverflow.com/questions/6674669/in-jquery-how-can-i-tell-between-a-programmatic-and-user-click – morpheus Nov 07 '15 at 23:59

2 Answers2

2

You could try attaching some meta data to the dispatchEvent that id's the event as being raised by the computer.

Jeffrey A. Gochin
  • 964
  • 6
  • 18
  • thanks. yes one could do this as a workaround but note the question asks I need a way to tell js: look I don't want you to invoke these handlers on manual UI interaction. only invoke them in response to a dispatchEvent. If one were to use some metadata, then all the event handlers will need their code modified to check for the metadata, vs. if there was to way to configure that event handlers should be invoked only in response to dispatchEvent then the event handler code does not need to be modified. – morpheus Jul 14 '15 at 19:53
  • elaborating further, I have about 20 UI event handlers in my code. If I use a property to distinguish between user generated vs code generated event, I will have to modify all these 20 event handlers and make sure I did not miss any. But if there were a way to tell the browser I want you to invoke only user events or only code generated events, then I don't have to make changes to the many event handlers and there is separation of concerns. – morpheus Jul 14 '15 at 20:07
  • Sounds like maybe a refactor is in order here. If you have that many event handlers you might want to create a wrapper class to help mitigate the complexity of the application. I guess what I am saying is you need to create (or download) a polyfill that emulates the solution @Oriol suggests. – Jeffrey A. Gochin Jul 14 '15 at 20:45
1

You can try checking isTrusted. According to MDN,

Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent)

Note some versions of IE may consider events created by a script as trusted.

But this should work, according to DOM4:

  • Fired events are trusted:

    To fire an event named e means that a new event [...] with [...] its isTrusted attribute initialized to true, is to be dispatched to the given object.

  • And dispatchEvent produces untrusted events:

    Initialize event's isTrusted attribute to false.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • thanks for the answer but as of today 7/14/15 latest version of chrome does not define isTrsuted property on the event object, so i think fallback is to define a custom property and set it to true. – morpheus Jul 14 '15 at 19:50
  • also see [this](https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/738En-eAgT4) link on lack of support for isTrusted in chrome – morpheus Jul 14 '15 at 22:08
  • Looks like Chrome finally added this around September in v46 of the browser. See these links for more info https://www.chromestatus.com/feature/6461137440735232, https://googlechrome.github.io/samples/event-istrusted/index.html, http://blog.chromium.org/2015/09/chrome-46-beta-flexible-animations-and.html – morpheus Nov 01 '15 at 21:27
  • Still its not an acceptable solution as in every event handler I have to check if ((isTrusted && !computers-turn) || (!isTrusted && computers-turn)) before executing code. What I want is to be able to set some property so that event handlers are invoked only when needed. – morpheus Nov 01 '15 at 21:35
  • @morpheus I guess you could do that check in a capture event listener at window, and stop the propagation of the event if it fails. – Oriol Nov 02 '15 at 01:12