13、深入理解 HTML5 特性及实现贪吃蛇游戏

深入理解 HTML5 特性及实现贪吃蛇游戏

1. HTML5 拖放功能

HTML5 的拖放功能将传统的拖放操作提升到了新高度。以往手动实现拖放功能虽不复杂，但 HTML5 的新 API 让我们能做的远不止让浏览器处理基本的拖放动作。它允许我们自定义拖放的具体方式、外观，以及指定可拖动对象携带的数据等，还无需担心不同平台和设备上底层事件的跟踪问题。

手动实现拖放行为步骤如下：
1. 监听要拖动元素的鼠标按下事件，按下时设置鼠标按下标志。
2. 鼠标抬起事件触发时，无论是否在要拖动的元素上，都取消鼠标按下标志。
3. 监听鼠标移动事件，检查鼠标是否按下。若鼠标按下标志已设置且鼠标在移动，则产生拖动动作。
4. 每次鼠标移动时更新可拖动元素的位置，鼠标抬起事件触发时设置元素的最终位置。

不过，浏览器提供的拖放 API 更加灵活高效。尽管最初很多开发者因觉得原生 HTML5 版本难用、有 bug 或不如其他库实用而继续使用 JavaScript 实现，但如今该 API 已得到广泛支持，十分完善，值得推荐。

使用拖放 API 的步骤如下：
1. 标记可拖动元素 ：通过将元素的 draggable 属性设置为 true 来标记元素为可拖动，示例代码如下：

<ul>
  <li draggable="true" class="block"
    ondragstart="doOnDragStart(event)"
    data-