jQuery /如何检测一个键是否被按下/ POLL功能
JS - jQuery / How to detect if a Key is Pressed / POLL function
我正在用Javascript制作一款乒乓球游戏,有一个球在屏幕周围弹跳,你不能让它接触包装盒的下边界。(弹跳球不是问题,我已经编程了)
这里是一个代码,应该使球拍移动从左到右,当你按下箭头键…但是球拍所做的是看起来比原始位置向左或向右很多像素。我的意思是,它不能流畅地移动,它只是在左边或右边出现30或100像素。
function gameLoop() {
//**********DETECTS IF LEFT OR RIGHT KEYS ARE PRESSED************
$(document).keydown(function(e) {
if(e.keyCode == 37) { //LEFT
userBoxPosX -= userBoxSpeedX;
}
if(e.keyCode == 39) { //RIGHT
userBoxPosX += userBoxSpeedX;
}
});
//THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET
userBox.css('left', userBoxPosX + "px");
setTimeout(gameLoop, 50); //THIS FUNCTION CALLS ITSELF EVERY 50 milliseconds (20FPS)
}
知道我怎样才能使它流畅地移动吗?当你按下方向键时?
让我知道如果你需要更多的信息或需要我上传的项目,这样你就可以看到它的工作。
一个简单的解决方案如下:
$(document).keydown(function(e) {
if(e.keyCode == 37) { //LEFT
userBoxPosX -= userBoxSpeedX;
updatePosition();
}
if(e.keyCode == 39) { //RIGHT
userBoxPosX += userBoxSpeedX;
updatePosition();
}
});
function updatePosition() {
userBox.css('left', userBoxPosX + "px");
};
每50毫秒绑定一个处理程序,所以几秒钟后,您将有数百个处理程序绑定到keydown
事件。因此,当您按下一个键时,处理程序将连续运行数百次。
你应该在游戏循环之外建立处理程序。在循环中,需要使用setTimeout
在迭代之间将控制返回给浏览器。在等待超时期间,按键将触发处理程序。
我认为这应该是基本的结构:
var userBoxPosX = 0, userBoxLastPosX = null;
function gameLoop() {
if (userBoxPosX !== userBoxLastPosX) { // Has racquet been moved?
//THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET
userBox.css('left', userBoxPosX + "px");
userBoxLastPosX = userBoxPosX;
}
}
setInterval(gameLoop, 50); // Call main loop function every 50 ms (20 FPS)
$(document).keydown(function(e) {
if(e.keyCode == 37) { //LEFT
userBoxPosX -= userBoxSpeedX;
}
if(e.keyCode == 39) { //RIGHT
userBoxPosX += userBoxSpeedX;
}
});
我认为你可以这样实现20帧/秒的自动重复:
var userBoxDelta = 0;
function gameLoop() {
if (userBoxDelta != 0) { // is raquet moving?
//THE USERBOX IS A DIV THAT WE WILL USE AS RAQUET
userBoxPosX += userBoxDelta;
userBox.css('left', userBoxPosX + "px");
}
}
setInterval(gameLoop, 50); // Call main loop function every 50 ms (20 FPS)
$(document).keydown(function(e) {
if(e.keyCode == 37) { //LEFT
userBoxDelta = -userBoxSpeedX;
}
if(e.keyCode == 39) { //RIGHT
userBoxDelta = userBoxSpeedX;
}
});
$(document).keyup(function() {
userBoxDelta = 0;
}
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何检测是否有溢出
- jQuery中是否内置了任何字符串格式化函数
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 测试索引值是否等于某个数字的倍数
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 是否可以禁用jquery中的单个单选按钮
- 是否可以从父类访问子类的属性
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 如何让程序检查所选单词中是否有按键
- 用于检查数组中是否存在元素的javascript自定义方法
- 如何使用jquery确定用户是否年满18岁
- jQuery /如何检测一个键是否被按下/ POLL功能