个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 JQuery 和 HTML5 canvas 标签编写一个简单的页面，通过按“w”向上、“s”向下、“a”向左和“d”向右移动 Canvas 上的形状。我一切正常，但我希望形状在敲击键时开始以恒定速度移动。现在有某种保持期，然后运动开始。我怎样才能让运动立即发生？
这是我的代码的重要部分:
<script src="jquery.js"></script>
<script src="JQuery.print.js"></script>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br><br>
start navigating<input type="text" id = "enter"/>
<div id = "soul2">
coords should pop up here
</div>
<div id = "soul3">
key should pop up here
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//keypress movements
var xtriggered = 0;
var keys = {};
var north = -10;
var east = 10;
var flipednorth = 0;
$(document).ready(function(e){
$("input").keydown(function(){
keys[event.which] = true;
if (event.which == 13) {
event.preventDefault();
}
//press w for north
if (event.which == 87) {
north++;
flipednorth--;
}
//press s for south
if (event.which == 83) {
north--;
flipednorth++;
}
//press d for east
if (event.which == 68) {
east++;
}
//press a for west
if (event.which == 65) {
east--;
}
var msg = 'x: ' + flipednorth*5 + ' y: ' + east*5;
ctx.beginPath();
ctx.arc(east*6,flipednorth*6,40,0,2*Math.PI);
ctx.stroke();
$('#soul2').html(msg);
$('#soul3').html(event.which );
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
delete keys[event.which];
$("input").css("background-color","#D6D6FF");
});
});
</script>
如果我不应该发布这么长的代码，请告诉我。
最佳答案
您缺少的是“游戏循环”。
在决定是否以及何时在 Canvas 上移动图形时，您不必直接对按下或向上键作出 react ，而是需要使用按键事件来跟踪在任何给定时刻按下了哪些键，然后检查该键来自 setTimeout() 的状态独立于关键事件运行的基于循环。
您已经开始用您的 keys 做到这一点随时跟踪给定键是否按下的变量:
// in keydown
keys[event.which] = true;
// in keyup
delete keys[event.which];
...除了event未定义 - 您需要将其作为事件处理程序的参数，并且您的代码也没有实际检查 keys 中的值.
这是我所说内容的简化版本:
$(document).ready(function(e){
var keys = {};
$("input").keydown(function(event){
keys[event.which] = true;
}).keyup(function(event){
delete keys[event.which];
});
function gameLoop() {
// w for north
if (keys[87]) {
north++;
flipednorth--;
}
//press s for south
if (keys[83]) {
north--;
flipednorth++;
}
// etc. for other keys
// code to move objects and repaint canvas goes here
setTimeout(gameLoop, 20);
}
gameLoop();
});
演示:http://jsfiddle.net/ktHdD/1/
gameLoop()函数将运行 20 毫秒左右(您可以根据需要改变它，但对于相当流畅的动画来说，这已经足够快了)。每次运行时，它都会检查是否有任何键被按下，如果是，则调整相关的位置变量并重新绘制。如果你有其他自动移动的对象(例如，在游戏中可能有坏人)你会在 gameLoop() 中更新它们功能也一样。
关于javascript - 是否有可能使 JQuery keydown 响应更快？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13538168/
25
4
0
好吧，我知道这个问题已经被问了无数次了。但是，对于我在谷歌搜索中似乎无法找到的问题，我还有一个小补充。 我当然不是 FFMPEG 的专家……我一直在使用 FFMPEG 的标准加速/减速模板，我正在使用
考虑这三个文档... [ { _id: "...", _rev: "...", title: "Foo", body: "...
我想知道访问我的全局变量的最快方法...它们只会在 Beta 测试阶段发生变化。在我们上线之前。从那时起，它们将永远不会改变。 我认为从 web.config 中获取内容会产生开销，而且编写 App.
这个问题在这里已经有了答案: 11 年前关闭。 Possible Duplicate: Is there a performance difference between BETWEEN and IN
我很想知道对通常作为查询目标的数字列进行分区是否有性能优势。目前我有一个包含约 5000 万条记录的物化 View 。当使用常规 b 树索引并按此数字列搜索时，我得到的成本为 7，查询结果大约需要 0
我需要编写一个库，它执行许多远程 HTTP 调用来获取内容。我可以按照描述做here ，但是有没有更好的方法(在性能方面)如何做到这一点？如果我按照示例中所述进行操作，我总是会创建一个 URL 对象，
该代码非常不言自明。只是有很多我需要独立随机化的范围。例如，范围('W1:W4')不应与范围('W5:W8')混淆，因此我不能只是随机化范围('W1:W80')。任何帮助或建议都会很棒!多谢。目前，代
我正在使用 ADT 模拟器。我在我的模拟器中使用默认的 Android 虚拟设备。我创建了一个版本 4.0.3。 问题 太慢了。有时我在尝试更改 fragment 时会收到加载点击。 我使用的代码是有
我正在尝试获取一个包含三个表中的信息的数组。结果应该是一个数组，我可以在其中循环遍历第一个表、第二个表中的相关行以及第三个表到第二个表中的相关行。目前，我有三个独立的 SQL 查询，然后将它们重组为一
我已经学会了两种在服务器上上传图像的方法(可能还有更多..)。 1) 创建 NSData 并将其添加到请求正文中 2)创建字节数组并像简单数组一样以json形式发送 1) 创建 NSData 并将其添
我有一个 UItextview，我可以在里面写入数据类，我可以在我的 View 中的任何地方提供数据，在 ViewDidAppear 函数中我传递了我的数据，但它有点慢。文本在 0.2-0.3 秒后出
如何为 discoverAllContactUserInfosWithCompletionHandler 创建优先级高于默认值的 CKOperation？ 我找不到不使用 [[CKContainer
我在 unix 模块下编写了一个内核级函数，用于对系统负载进行采样。我在 clock.c 下的 clock() 中调用示例函数，以在每个时钟(例如，我的系统上每 10 毫秒)拍摄系统负载的快照。有没有
我正在制作一个应用程序，该应用程序将根据变量的值使用鼠标/键盘(宏)模拟操作。 这里有我制作的 de 扫描代码: void ReadMemory(int value){ DWORD p
我想知道在计算上调用嵌套在对象中的函数的最快方法是什么，所以我做了一个快速的 jsPerf.com 基准测试，其中我考虑了三种可能性——从数组中调用函数，从“核心”中调用函数对象和函数对象: var
我用 php 做了一个图像缩放器。调整图像大小时，它会缓存一个具有新尺寸的新 jpg 文件。下次您调用确切的 img.php?file=hello.jpg&size=400 时，它会检查是否已经创建了
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Which is best for data store Struct/Classes? 考虑我有一个 Em
我正在尝试为多组列自动计算每行的平均分数。例如。一组列可以代表不同比例的项目。这些列也被系统地命名 (scale_itemnumber)。 例如，下面的虚拟数据框包含来自三个不同比例的项目。(可能会出
所以我知道散列图使用桶和散列码等等。根据我的经验，Java 哈希码并不小，但通常很大，所以我假设它没有在内部建立索引。除非哈希码质量很差导致桶长度和桶数量大致相等，否则 HashMap 比名称-> 值
假设我有一个非常缓慢和大的 for 循环。 如何将其拆分为多个线程以使其运行速度更快？ for (int a = 0; a { slowMet
我是一名优秀的程序员,十分优秀！