javascript - 使用键盘按键导航网页(在内容脚本内)

Question

首先我想说的是，此时我真的不需要任何代码。最有可能的是，我只需要一个起点。

我正在尝试构建一个浏览器扩展(chrome)，它允许我使用键盘按键来导航一个特定页面。

此页面位于游戏中 ( http://www.galatium.net/Faerlyn/forest.php?view=explore )如果你想看，你必须注册，所以我只会描述它。

这是一个由可点击框组成的 3x3 网格(不是真正的按钮...)。中间的框是不可点击的。

游戏创建者使用 JS(onClick 事件)来导航区域(交互式森林)。

我想做的是将每个框的 onlick 事件绑定(bind)到键盘按键。

基本上我们有:

北=8
南=2
东=6
西=4
西北=7
西南=1
东北=9
东南=3

数字键盘方向

现在，通过各种研究，我了解到我需要使用内容脚本将我的 JavaScript 注入(inject)到我希望其运行的网页上。

问题是每个框都是由这行代码决定的:

<td bgcolor="#002900" style="cursor: pointer; background-color: rgb(0, 41, 0);" onmouseover="style.backgroundColor='#003300'" onmouseout="style.backgroundColor='#002900'" onclick="window.location='?action=move&amp;x=332&amp;y=96'">&nbsp;</td>

该行本身并不太复杂，但我习惯了 OOP，而且我不明白如何引用它。

这就是我的想法:

假设这是我的 JS 函数:

function DoSomething() {}

$(document).ready(function() {
    $("body").keydown(function(event) {
        if(event.keyCode == arrow.left) {
            DoSomething();
        }
    }
}

代码中不包含它，但会有一个 GET 来获取当前的 X 和 Y 值，然后根据所选方向加或减 1。

所以，DoSomething()将有一个名为“方向”的参数。

然后在按键事件中，我的函数将“单击”与我的函数的 X 和 Y 相匹配的框。

所以，对于北，首先我有一个找到 x=10 和 y=10 的 get 。然后知道我已经点击了“8”，它将设置 x=10 和 y=10+1。然后，该函数将找到参数与我的函数的参数匹配的框，然后“单击”它。

我这样做对吗？ (或者有更简单的方法吗？)

~哈姆扎

Answer 1

您正在使用 <table>在此表中有 3 <tr>在每个 <tr>有3个容器

为您提供 13 个可选目标。

使用 jQuery 你可以做几件事:

您可以为每个人分配一个唯一的 id或class

keypress() 操作/选择数字键盘上的 96 到 105 的键代码。您可以将操作映射到键盘。

不清楚你的行动是否会在移动中发生。

示例:您是否正在处理弹出到屏幕上的某些内容，然后您必须快速定向移动它？方向键，但没有提交按键。

示例 2:您有一个像拼图一样的可移动价格网格，但您必须在确定方向之前绑定(bind)选择，并取消选择以自由导航到另一 block 重新选择...移动...取消选择...移动。 ..选择。

示例 3:您需要执行示例 2 中的操作，但您必须更换图 block 并记住您的起始位置以填充已删除的图 block 。所以零件改变了位置。这意味着您将获得一组无法被破坏的碎片。他们只能改变位置。

通过按键和键映射以及唯一的 ID 或类以及选择/取消选择，您可以绑定(bind)事物的组合，但您需要确定事件最终结果。

如果您不能在表上使用唯一的 id 或类，您可以使用父级、同级、子级 jQuery 选择器。

下一步: <td> 里面有什么？它是图像还是背景颜色？您可以分配引用图像或颜色的 css 类/id。这样一来，您的辅助选择器就可以用于移动、删除、保留或销毁、附加。

您可以使用指定的类/id 或parent、sibling、child 来获取容器标签的内容。从那里你必须自己回答你正在尝试做什么......最终结果。一个人如何获胜或失败。