【问题标题】:HTML5 / JS: have the cursor locked in a canvas elementHTML5 / JS:将光标锁定在画布元素中
【发布时间】:2014-07-16 01:00:56
【问题描述】:

所以我正在制作一个 html5 / js RTS 游戏。游戏可以全屏运行。现在的问题是,双屏玩家移动得太远时,光标会离开画布并跳到第二个屏幕。有什么好的方法,可以防止吗? 我知道,有this,但这似乎隐藏了光标,这不是我在 RTS 游戏中想要的。 Ofc 我可以绘制自己的光标,但问题是,然后绘制的光标将取决于帧率,帧率有时会下降一点,所以感觉比“正常”光标要流畅得多。那么,有没有办法将光标锁定在元素中而不隐藏它并且仍然可以移动但只是停在边界处?

【问题讨论】:

  • 在全屏模式下运行会阻止光标离开吗?
  • 不,它没有。通常 ppl 以全屏模式播放,所以如果你有一台显示器,那很好,但是当你有 2 台时,就不行了。
  • 伤心。我至少会通过在鼠标离开时将游戏淡化到 75% 的不透明度或在您允许的情况下暂停来给用户即时反馈。我还没有看到任何可以解决问题的方法。

标签: javascript html canvas cursor


【解决方案1】:

没有任何方法可以限制用户的鼠标移动。

咯咯……如果有可能,您可以想象广告商会将您的鼠标悬停在广告上的“立即购买”按钮上。 :-)

如果它对您的设计有意义,您可以让您的画布元素“捕获鼠标事件”。

捕获鼠标会使画布接收所有鼠标事件,即使鼠标物理上位于画布元素之外。也许这对你的设计有用——也许不会。

https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture

祝你的游戏好运!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-06-13
    • 2012-04-11
    • 2011-03-01
    • 2012-06-30
    • 2013-08-03
    • 2020-01-08
    • 1970-01-01
    相关资源
    最近更新 更多