是否有可能使JQuery keydown响应更快？ [英] Is it possible to make JQuery keydown respond faster?
问题描述
我使用JQuery和HTML5 canvas标签来编写一个简单的页面，通过按下'w'向上，'s'向下，'a'向左，'d'向右移动画布上的形状。我有它的一切工作，但我想要的形状开始移动恒定的速度，打一个钥匙。现在有一种保持期，然后运动开始。如何让运动立即发生？
这是我的代码的重要部分：
script src =jquery.js>< / script>
< script src =JQuery.print.js>< / script>
< body>
< canvas id =myCanvaswidth =500height =200style =border：1px solid＃d3d3d3;>
您的浏览器不支持HTML5 canvas标签。< / canvas>
< br>< br>
开始导航< input type =textid =enter/>
< div id =soul2>
coords应该弹出这里
< / div>
< div id =soul3>
键应该弹出这里
< / 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]
if（event.which == 13）{
event.preventDefault（）;
}
//按w为北
if（event.which == 87）{
north ++;
flipednorth--;
}
//按s为南
if（event.which == 83）{
北 - ;
flipednorth ++;
}
//按d为东
if（event.which == 68）{
east ++;
}
//按a为西
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）;
}）;
$ $ b delete keys [event.which];
$（input）。css（background-color，＃D6D6FF）;
}）;
}）;
< / script>
请让我知道如果我不应该长时间张贴代码。
你缺少的是一个游戏循环。
按键或向上以决定是否和何时在画布上移动您的形状，您需要使用键事件来记录哪些键在任何给定时刻都关闭，然后检查键的状态从 setTimeout（） - 独立于关键事件运行的循环。
您已经开始使用键变量随时跟踪某个给定键是否已关闭：
// in keydown
keys [event.which] = true;
// in keyup
delete keys [event.which];
...除了事件定义 - 你需要使它成为事件处理程序的一个参数，并且你的代码也没有实际检查 keys 中的值。
这里是我所说的简化版本：
$（document）.ready （e）{
var keys = {};
$（input）。keydown（function（event）{
keys [event.which] = true;
}）; keyb（function（event）{
delete keys [event.which];
}）;
function gameLoop（）{
/ / w for north
if（keys [87]）{
north ++;
flipednorth--;
}
//按s为南
if （键[83]）{
north--;
flipednorth ++;
}
//等用于其他键
//移动代码对象和重绘画布在这里
setTimeout（gameLoop，20）;
}
gameLoop（）;
}）;
演示： http://jsfiddle.net/ktHdD/1/
gameLoop（）函数将运行20毫秒左右（你可以根据需要改变，但是这足够快，以合理平滑的动画）。每次运行它检查任何键是否关闭，如果是，调整相关的位置变量和重绘。如果你有其他对象自动移动（例如，在游戏中可能有坏家伙），你会更新他们在 gameLoop（）函数。 >
I am writing a simple page with JQuery and HTML5 canvas tags where I move a shape on the canvas by pressing 'w' for up, 's' for down, 'a' for left, and 'd' for right. I have it all working, but I would like the shape to start moving at a constant speed upon striking a key. Right now there is some kind of hold period and then the movement starts. How can I get the movement to occur immediately?
Here is the important part of my code:
<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>
please let me know if I shouldn't be posting code this lengthy.
What you're missing is a "game loop".
Instead of reacting directly to key down or up in deciding whether and when to move your shape around the canvas, you need to use the key events to keep track of which keys are down at any given moment, and then check the key state from a setTimeout()-based loop running independent of the key events.
You've started to do that with your keys variable keeping track of whether a given key is down at any moment:
// in keydown
keys[event.which] = true;
// in keyup
delete keys[event.which];
...except that event is not defined - you need to make it a parameter of the event handler, and also none of your code ever actually checks the values in keys.
Here's a simplified version of what I'm talking about:
$(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();
});
Demo: http://jsfiddle.net/ktHdD/1/
The gameLoop() function will run ever 20 milliseconds or so (you can vary this as needed, but that's fast enough for reasonably smooth animation). Each time it runs it checks if any keys are down and if so adjusts the relevant position variables and repaints. If you have other objects that move around automatically (e.g., in a game there might be bad guys) you'd update them in the gameLoop() function too.
这篇关于是否有可能使JQuery keydown响应更快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
