HTML5 Canvas捕获用于游戏开发的键盘、鼠标和触摸事件

学习如何处理键盘和鼠标事件,如何阻止 Web 浏览器的默认事件行为,以及如何向游戏对象的某种逻辑表示传播事件。此外,还将学习如何处理 iPhone 和 iPad 等移动设备上与设备无关的(device-agnostic)输入。

令拥有 Flash 或 Silverlight 背景的开发人员感到惊讶的是,为 HTML5 Canvas 编写的应用程序在处理用户输入方面并没有什么特立独行之处。实质上,从启用了 JavaScript 的 Web 浏览器诞生之初开始,HTML 用户输入就涉及到使用内置于浏览器中的事件处理系统;HTML5 在检测和处理用户输入方面没有任何特殊之处。例如,浏览器提供了低级反馈来表明用户单击的坐标 (x,y),就这么简单。

处理用户交互与其他任何低级游戏架构没什么不同。没有内置的抽象来通知您用户何时与已在 Canvas 上呈现的一个具体对象进行了交互。这对您希望处理这些事件的方式提供了强大的低级控制力度。只要您可以避免各种浏览器缺陷,最终就能根据一个独特应用程序来调优事件处理,从而实现最高效率 —而不是受到特定实现的禁锢。

在本文中,将会学习处理基于 HTML Canvas 的游戏中的用户交互的一些技术。文中的示例演示了如何处理键盘、鼠标和基于触摸的事件。向游戏对象传播事件的战略和移动兼容性也会有所涉及。

事件类型

用户交互完全由浏览器的传统事件监听器模型处理。HTML5 的出现并不新鲜;它采用了与自 Netscape Navigator 诞生初期就已经使用的事件模型。

实质上,可以将交互式应用程序或游戏视为处理用户输入的浏览器事件模型与处理图形输出的 Canvas 的结合。除非您亲自将它们结合在一起,二者之间没有逻辑关系。

您将利用事件监听器可附加到 <canvas>元素自身的事实。因为 <canvas>元素是一个块级元素,从浏览器的角度讲,这与将事件监听器附加到 <div>或其他任何块级元素上没有任何区别。

键盘事件

监听和处理的最简单的事件类型是键盘事件。它们不依赖于 Canvas 元素或用户的鼠标位置。键盘事件只需您在文档级别上监听按键、释放和按住事件。

监听键盘事件

事件监听器模型可能因为浏览器实现不同而各不相同,所以实现模型的最快捷的方式是使用一个库来规范化事件的处理。以下示例使用了 jQuery 绑定事件。这通常是最简单的开始方式,但考虑到 jQuery 在兼容遗留浏览器方面涉及的工作量水平,性能可能会受到影响。另一个流行的库(专为加速跨浏览器键盘事件处理而编写)是 Kibo。

清单 1 演示了对键事件的监听,以及如何基于按下的键而采取适当的措施。

清单 1. 处理键盘事件

$(document.body).on('keydown',
function(e) { switch (e.which) { // key code for left arrow case 37: console.log('left arrow key pressed!'); break; // key code for right arrow case 39: console.log('right arrow key pressed!'); break; } });

如果应用程序在一个 Web 浏览器的环境中运行,那么一定要牢记一些有意义的键盘组合键。尽管定义某些常见组合键的行为来替换它们的默认浏览器行为(比如 Ctrl+R)在技术上是可行的,但这种做法受到了强烈反对。

鼠标事件

鼠标事件比键盘事件更复杂。您必须知道 Canvas 元素在浏览器窗口中的位置,以及用户光标的位置。

监听鼠标事件

使用 e.pageX和 e.pageY特性,很容易获得鼠标相对于整个浏览器窗口的位置。在本例中,原点 (0,0) 将位于整个浏览器窗口的左上角。

当用户光标未在 Canvas 区域中时,您通常不会太关心用户输入。因此,最好考虑将原点 (0,0) 放在 Canvas 元素的左上角。在理想情况下,您希望在与 Canvas 区域相关的局部坐标系统内工作,而不希望在与整个浏览器窗口相关的全局坐标系统中工作。

鼠标事件战略

执行以下步骤,将全局窗口坐标转换为局部 Canvas 坐标。

计算页面上的 Canvas DOM 元素的 (x,y) 位置。 确定鼠标相对于整个文档的全局位置。 要将原点 (0,0) 放在 Canvas 元素的左上角,并有效地将全局坐标转换为相对坐标,需要了解第 2 步中计算的全局鼠标位置与第 1 步中计算的 Canvas 位置之间的区别。

图 1 给出了您需要捕获的有关全局坐标系统的信息示例。

图 1. 鼠标位置、全局坐标

图 2 显示了将鼠标位置转换为局部坐标后的结果。

图 2. 转换为局部坐标后的鼠标位置

清单 2 给出了确定局部鼠标坐标的方法。它假设您已经在标记中定义了一个 Canvas 元素,如下所示:<canvas id="my_canvas"></canvas>。

清单 2. 处理鼠标事件

var canvas = $('#my_canvas'); // calculate position of the canvas DOM element on the page var canvasPosition = { x: canvas.offset().left, y: canvas.offset().top }; canvas.on('click', function(e) { // use pageX and pageY to get the mouse position // relative to the browser window var mouse = { x: e.pageX - canvasPosition.x, y: e.pageY - canvasPosition.y } // now you have local coordinates, // which consider a (0,0) origin at the // top-left of canvas element });

时间: 2014-12-18

HTML5 Canvas捕获用于游戏开发的键盘、鼠标和触摸事件的相关文章

iOS开发中使用cocos2d添加触摸事件的方法_IOS

CCLayer类是用来接收触摸输入的.不过你要首先启用这个功能才可以使用它.你通过设置isTouchEnabled为YES来让层接收触摸事件: 复制代码 代码如下: self.isTouchEnabled = YES; 此项设定最好在init方法中设置.你可以在任何时间将其设置为NO或者YES. 一旦启用isTouchEnabled属性,许多与接收触摸输入相关的方法将会开始被调用.这些事件包括:当新的触摸开始的时候,当手指在触摸屏上移动的时候,还有在用户手指离开屏幕以后.很少会发生触摸事件被取消

【IOS-COCOS2D游戏开发之六】对触屏事件追加讲解,解决无法触发CCTOUCHMOVED事件[重要!]

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/453.html 上一章节中介绍了,如何利用两种方式对用户触屏进行监听,那么今天要重点讲解一个问题: 要讲的问题主要是在使用注册监听(事件分配方式监听触屏)中的问题,上一章节中说过,此种方式首先要注册:如下代码: 1 2 //注册独立触摸事件   [[CCTouchDispatcher sharedDispatc

HTML 5 2D 游戏开发:碰撞检测和 sprite 动画

碰撞检测和 sprite 动画是所有视频游戏的主要成分.Snail Bait(本系列文章中构建的游戏)也不例外 .图 1 显示了 Snail Bait 的跑步小人与左上角的蜜蜂碰撞后发生爆炸. 图 1. 碰撞检测的实际应用 开发:碰撞检测和 sprite 动画-unity2d sprite动画"> 在本文中,学习如何: 检测碰撞 将 HTML5 Canvas 上下文用于碰撞检测 将碰撞检测实现为 sprite 行为 处理碰撞 实现 sprite 动画,比如爆炸 碰撞检测过程 碰撞检测是一个

Foundation HTML5 Canvas中的2处错误

     最近公司项目需要使用HTML5 Canvas开发公司大厅展示系统,当然这个项目还在进行中,不过我在进行另外一个新项目,等项目结束时,我将分享项目代码.学习HTML5 canvas主要书籍是<Foundation HTML5 Canvas For Games and Entertainment>,已经有中文版,名叫<HTML5 Canvas基础教程>.英文说中的实例有2处错误.      第一处:Chapter4 Gradients小结中,实例代码: var gradien

【ANDROID游戏开发之八】游戏中添加音频-详解MEDIAPLAYER与SOUNDPOO!并讲解两者的区别和游戏中的用途!

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/312.html  ----------------------- 『很多童鞋说我的代码运行后,点击home或者back后会程序异常,如果你也这样遇到过,那么你肯定没有仔细读完Himi的博文,第十九篇Himi专门写了关于这些错误的原因和解决方法,这里我在博客都补充说明下,省的童鞋们总疑惑这一块:请点击下面联系进入阅读

浅析HTML5 Canvas入门教程及实例

什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 你可以通过多种方法使用Canva绘制路径,盒.圆.字符以及添加图像. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素. 注意: Internet Explorer 8 及更早 IE

9.2、Libgdx的输入处理之鼠标、触摸和键盘

(官网:www.libgdx.cn) Libgdx支持的最主要的设备是desktop或浏览器的鼠标支持,Android的触摸屏支持和键盘的支持.我们接下来了解一下. 键盘 用户按下或释放一个按键生成了相应的事件.每个事件包含了一个 key-code来识别是哪个按键按下或释放.这些key-code在不同的平台是不同的.Libgdx要做的就是隐藏不同系统之前的差别.可以查阅Keys类.你可以通过轮询来判断是哪个键被按下. 单独的key-code不能告诉我们用户输入了什么.这通常是组合键造成这种困扰,

jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介_jquery

触摸事件(touch)在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于30

HTML5 Canvas开发迷宫游戏例子

本文介绍如何使用Canvas画布制作一个简单的迷宫游戏:用户按下方向键时,笑脸图标会沿相应的方向移动(移动时有动画效果),遇到墙壁时(碰撞检测)就会停下来. 1,在线样例加载困难迷宫 加载简单迷宫 开发迷宫游戏例子-html5 canvas绘图例子"> 2,实现原理(1)迷宫的生成:我们这里是使用一幅迷宫图片,然后把整幅图绘制到画布上. (2)通过设置 window.onkeydown 的响应函数 processKey(),当用户按下方向键的时候,根据键码调整笑脸各方向上的速度. (3)d