HTML and CSS Reference
In-Depth Information
Wow, you created two game screens that dynamically resize with HTML, XML, and CSS.
Although it would be ideal to finish the game with these languages, it's not possible. We'll
have to rely on JavaScript to create game logic, collisions, and artificial intelligence (AI).
7.3. Adding JavaScript for interactivity
When you consider how easy it is to create vector assets with SVG, you might expect it to
have revolutionary JavaScript integration. Sadly, it doesn't. In fact, it can be clunky to ac-
cess and modify SVG because it relies heavily on the DOM. It would be nice to stick with
SVG tag attributes, but using the language at its full potential requires JavaScript (just like
HTML5 APIs).
In this section, you'll learn
• How to create an SVG JavaScript engine
• How to create a simple SVG design pattern
• How to dynamically generate elements
• How to properly get XML data through JavaScript with a naming scheme
• How to use CSS to simplify complicated path animations
Matters become further complicated because JavaScript needs extra configuration at times
to play nicely with XML. Because of these limitations, a clever design pattern is required
to program your game. Never fear. We've a couple of JavaScript solutions that will ride in
to save the day.
XML namespace issues
Before proceeding, we need to warn you about namespaces and JavaScript. Namespaces
are keys that define what kind of information you're asking the browser to interpret (in this
