27、HTML5 触摸坐标与游戏开发

HTML5 触摸坐标与游戏开发

在 HTML5 开发中，尤其是涉及到移动游戏开发时，触摸坐标的处理以及游戏的设计与实现是非常重要的部分。下面将详细介绍触摸坐标的相关属性以及一个传统二维太空射击游戏的开发要点。

1. 触摸坐标属性

触摸事件中的坐标属性对于确定触摸位置至关重要，不同的坐标属性适用于不同的场景。
- screenX 和 screenY
- screenX ：指相对于系统显示器原点，浏览器视口中被触摸点的水平坐标。计算时完全不考虑浏览器视口的原点，显示器左上角为点 (0, 0)，触摸点在其右侧的像素数即为该属性的值。
- screenY ：指相对于系统屏幕（显示器）顶部向下的坐标，与浏览器的位置无关。例如，屏幕高度为 800 像素，浏览器高度为 100 像素且位于屏幕顶部下方 100 像素处，触摸浏览器视口左上角和左下角中点时，screenY 坐标为 150。由于该坐标基于屏幕原点计算，所以 screenX 和 screenY 返回的值永远不会小于零。
- clientX 和 clientY
- clientX ：类似于 screenX，指相对于浏览器视口原点的触摸位置偏移量，与页面内的滚动无关。例如，触摸点在浏览器视口原点右侧 100 像素处，clientX 值为 100，即使页面向右滚动了 500 像素，触摸浏览器左边界右侧 100 像素处时，clientX 值仍为 100。
- clientY ：指相