Game Development Reference
In-Depth Information
<body>
<div class="health-bar">
<span></span>
</div>
<h1 id="message"></h1>
<div id="table"></div>
<div id="bowl"></div>
<div id="bowl-top-faux-target"></div>
<div id="bowl-top" class="dragging-icon
bowl-closed"
draggable="true"
ondragstart="doOnDragStart(event)"
ondragend="doOnDragEnd(event)"></div>
<div id="bowl-top-target"
ondrop="startGame()"
ondragover="doOnDrop(event)"
ondragleave="doOnDragLeave(event)"></div>
<div class="dom-recs">
<svg class="hero-svg">
(…)
</svg>
<svg class="jelly-svg">
(…)
</svg>
</div>
</body>
Although we could have used data attributes instead of ID attributes for all of those
elements, there would have been no real benefit over using them over the IDs, just
as there is really no benefit in using IDs over data-attributes in this situation.
Note how there are two targets where the
bowl-top
can be dragged onto. Actually,
there is really only one, which is the element
bowl-top-target
. The other element
that looks like a target, which was cleverly given an ID of
bowl-top-faux-target
,
is only there for the visual effect. Since a real drop target (an element where a drag-
