Hydromel Posted April 25, 2017 Share Posted April 25, 2017 Hey everybody, excuse my poor english ! I was using a single JS file for my program structured like this : index.html with <div id="timediv"></div> script.js with my Phaser code including anim function called in ajax.js. This function was declared after the update in script.js. ajax.js with function refreshdiv() which call lance() which call anim() every 60 seconds. Everything was ok like this Now I want to use states. I made : bootState, loadState and the main state called scriptState. But where do I have to place anim() declaration now ? I tried different places (in scriptState, after update, in create, in update, in bootState init etc...) but I have always the same message : Quote Uncaught ReferenceError: anim is not defined at lance (ajax.js:115) at XMLHttpRequest.xmlHttp.onreadystatechange (ajax.js:58) Thanks a lot for your help ! Link to comment Share on other sites More sharing options...
MikeW Posted April 26, 2017 Share Posted April 26, 2017 If I understand what you are doing is you have your phaser game, and you have your ajax call that needs to access something called anim. If I were trying to fix it my next two questions would be when does anim have something in it. Does moving it scope wise to the very top fix things. Link to comment Share on other sites More sharing options...
megmut Posted April 26, 2017 Share Posted April 26, 2017 I think the best approach to do this, would be to use a customEvent. This would allow you to emit an event every 60 seconds, and like wise, any state can listen for that event regardless of scope. Thus reducing your binding to have scope of your game at all times. Below is an example. <head> <script> ajax stuff { success: function() { window.dispatchEvent(new CustomEvent('anim', { detail: null })); } } </script> </head> // inside any of your game states window.addEventListener('anim', function(e) { // do some animation things }); This will dispatch an event every time an ajax request is successful, and in side your game, we will listen for the same event to be triggered. CustomEvents are supported by every browser and device except for chrome on an old samsung and Internet explorer 9. So here is a polyfill you can use provided by the nice guys over at mozilla. Just paste this in the head of your html page and you will always have CustomEvents then (function () { if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); Hope this helps. Link to comment Share on other sites More sharing options...
Hydromel Posted April 27, 2017 Author Share Posted April 27, 2017 Hey MikeW, Ajax is calling every minutes anim function with arguments (from php request on a API). I tried to put anim function definition on top of ScriptState prototype but I've got the same error. Hey megmut, If I understand your answer, I have to create a new customEvent in Ajax.js, listen to this event in my scriptState and then where do I have to place anim fonction definition ? Thanks guys ! Link to comment Share on other sites More sharing options...
Recommended Posts