KEYDOWN按下左侧的KEYUP
问题描述:
我有一个对象上canvas
,我想用键盘事件移动不更新,KEYDOWN按下左侧的KEYUP
我的事件函数如下
function onKeyDown(evt) {
if (evt.keyCode == 40) { downDown = true;}
if (evt.keyCode == 39) { rightDown = true;}
if (evt.keyCode == 38) { upDown = true;}
if (evt.keyCode == 37) { leftDown = true;}
}
和我onKeyUp
功能除与false
作为值相同
然后附上它作为
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
我有叫我的init内,intv = setInterval(draw, 10);
与下面的语句,除了-X方向(左下)
if (rightDown) { x += dx;}
if (upDown) { y -= dy;}
if (downDown) { y += dy;}
if (leftDown) {x -= dx;}
工作一切良好,平局功能。这样我就可以将物体向上,向下和向下移动。当按下左键时,对象继续向左移动。我的条件语句是否设置不正确?
完整的演示是在http://jsfiddle.net/avSvu/
答
function onKeyUp(evt) {
if (evt.keyCode == 40) { downDown = false;}
...
// v----- capital K ?
if (evt.KeyCode == 37) { leftDown = false;}
}
答
您的代码可以有你这样的改进不应该有充分的时间来检查的键码,你可以重复使用相同的功能翻转布尔标志。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<div id="out1"></div>
<div id="out2"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function(){
var downDown = false;
var rightDown = false;
var upDown = false;
var leftDown = false;
function onKeyUpDown(evt,isDown) {
var keyCode = evt.keyCode;
jQuery("#out1").html(keyCode);
if (keyCode == 40) { downDown = isDown;}
else if (keyCode == 39) { rightDown = isDown;}
else if (keyCode == 38) { upDown = isDown;}
else if (keyCode == 37) { leftDown = isDown;}
}
jQuery(document).keydown(function(evt){onKeyUpDown(evt,true);}).keyup(function(evt){onKeyUpDown(evt,false);});
window.setInterval(
function(){
var upDownTxt = upDown?"up":"-"; ;
var downDownTxt = downDown?"down":"-";
var leftDownTxt = leftDown?"left":"-";
var rightDownTxt = rightDown?"right":"-";
jQuery("#out2").html(upDownTxt + "<br/>" + downDownTxt + "<br/>" + leftDownTxt + "<br/>" + rightDownTxt);
},
100);
})();
</script>
</body>
</html>
答
在这里,我重新分解代码:
$(function() {
var x = 150,
y = 150,
dx = 2,
dy = 2,
canvas = $('#canvas'),
ctx = canvas[0].getContext('2d'),
width = canvas.width(),
height = canvas.height(),
keys = {},
intervalId = 0;
function circle(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
$(document).keydown(function(e) { keys[e.which] = true; });
$(document).keyup(function(e) { keys[e.which] = false; });
intervalId = setInterval(function() {
ctx.clearRect(0, 0, width, height);
x = x - (keys['37'] ? dx : 0) + (keys['39'] ? dx : 0);
y = y - (keys['38'] ? dy : 0) + (keys['40'] ? dy : 0);
circle(x, y, 10);
}, 20);
});
你能张贴演示?也许在http://jsfiddle.net/ – Soumya 2011-02-10 19:39:27
@ Soumya92 http://jsfiddle.net/avSvu/ – phwd 2011-02-10 20:00:01
愚蠢的小演示,我使用两个变量,不知道它是否有帮助...(http:// www。 jsfiddle.net/bradchristie/jL2u2/1/) – 2011-02-10 20:08:07