如何将可点击的文本添加到JavaScript游戏中

时间:2012-09-27 01:17:21

标签: javascript html5

我正在制作一个javascript游戏,我希望能够添加一个主菜单,但我不知道exactley如何。我正在寻找一种方法来使filltext()可点击但无济于事。我已经查了一下,但找不到满足我需求的答案。游戏原型可以在这里查看:sketchy.idreesinc.com。有谁知道要实现这个?我使用的是javacript和HTML5的canvas元素,但我更喜欢使用javascript。谢谢!

1 个答案:

答案 0 :(得分:2)

首先要了解HTML和画布

DOM

HTML元素是DOM(文档对象模型)的一部分,它是网页的数据结构。 DOM元素可以有触发事件(如click),事件监听器会对这些事件做出反应。

浏览器

您的网络浏览器会将DOM元素转换为屏幕上的像素。它还处理输入并确定单击页面时要触发的元素事件。

画布

canvas元素允许您渲染位图图像。你基本上通过一些javascript调用在像素网格上设置颜色,以制作漂亮的图片。

这意味着什么

当您在HTML中创建链接元素(<a>标记)时,浏览器会呈现文本并将单击侦听器附加到元素,以便链接实际运行。

当您使用javascript在画布上绘制像素时,浏览器对DOM的理解将停止在画布上。浏览器知道DOM并且DOM知道画布,但它不跟踪画布中绘制的各个项目。

答案

您实际上无法将事件附加到画布中的文本,但有很多方法可以获得所需的单击文本的行为,发生的事情

一种方法是将单击事件附加到canvas,但不是一个总是运行此事件的简单事件侦听器,而是需要检查单击是否发生在文本上或其他位置上画布。

使用Event参数调用事件侦听器函数,该参数包含有关事件的信息。

要谷歌的东西

关于这些的一些快速阅读应该让你开始工作菜单。

  • 注册javascript事件监听器
  • javascript事件鼠标坐标