I am creating a new game engine for the Internet called Engine1. I have currently created several prototypes. So far, I could:
- Match transparent sprite pixels with a canvas.
- Bind events to opaque sprite pixels.
- Development of a gaming environment with fps installed.
- Animation of sprites when changing frame time.
- Movement of animated elements like
- frame for fame
- and with frame-based motion animations
I am pleased with my success, but it seems inconvenient to move on without consulting a DOM performance expert.
Currently, when an element is created, adding it to the DOM fragment I call "Shadow DOM". Each frame, this HTML code "Shadow DOM" is copied and pasted into the body of the page (or the current view port).
I set it this way because I can add everything to the page in one browser repeat stream.
I am concerned that the performance achieved will be offset by the need to overflow the contents of the browser, even if only parts of the page are changed.
In addition, event binding becomes much more complicated.
Any thoughts?
Should I use the Shadow DOM?
Is there a better way to render a large number of elements?
Is there a way to copy the differences from the Shadow DOM to the body of the browser?