I had an interesting code challenge where I needed to do a few non-gamey things with Phaser. One of them neeed me to control some DOM nodes in Phaser like sprites. As with most things, Phaser has out-of-the box support for that scenario.
The DOMElement is a game object that can control HTML elements. You need to include this configuration to work with them:
The docs explain how it works. Phaser puts a container div on top of the game canvas. This is to ensure consistency with sizing and scaling. I like this info because if you weren't using Phaser, you can use the same setup. The bit of magic remaining would be to map canvas coordinates to DOM coordinates relative to the parent div, as these objects are still rendered on the DOM.
From there, you can use
this.add.dom() to control a DOM element
domSprite = this.add.dom(50, 100, '#domID')
In my code, I had to extend it add some speed properties:
That's all there is to it! If you'd like a working example, check out this repl: https://repl.it/@MarcusSanatan/Control-DOM-Objects-in-Phaser.
Happy game deving!