Gab*_*abs 4 html javascript frame-rate canvas keylistener
当我移动物体时,它很慢并且不会在对角线上移动,只能向上,向下,向右和向左移动.
我该如何解决这个问题,这是一个好的开始方式,还是我应该这样做？
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
var object = {
height: 40,
width: 40,
x: 10,
y: 10,
color: "#FF0000"
}
document.addEventListener('keydown', function(event) {
//left
if(event.keyCode == 37) {
object.x -= 1;
}
//top
else if(event.keyCode == 38) {
object.y -= 1;
}
//right
else if(event.keyCode == 39) {
object.x += 1;
}
//bottom
else if(event.keyCode == 40) {
object.y += 1;
}
});
function renderCanvas(){
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 600, 600);
}
function renderObject(){
ctx.fillStyle = "#FF0000";
ctx.fillRect(object.x, object.y, object.width, object.height);
}
function run(){
renderCanvas();
renderObject();
}
setInterval(run, 10);
这是一个jsfiddle
我是javascript的新手,我真的需要帮助;)
小智 6
使用带有标志的标志或对象,按下和释放按键时更新标志:
var Keys = {
up: false,
down: false,
left: false,
right: false
};
然后更新关键事件:
window.onkeydown = function(e) {
var kc = e.keyCode;
e.preventDefault();
if (kc === 37) Keys.left = true; // only one key per event
else if (kc === 38) Keys.up = true; // so check exclusively
else if (kc === 39) Keys.right = true;
else if (kc === 40) Keys.down = true;
};
window.onkeyup = function(e) {
var kc = e.keyCode;
e.preventDefault();
if (kc === 37) Keys.left = false;
else if (kc === 38) Keys.up = false;
else if (kc === 39) Keys.right = false;
else if (kc === 40) Keys.down = false;
};
这将允许您检查同时按下的键(如果您想连续移动,则需要在循环中检查键对象的状态,否则您将得到重复延迟):
if (Keys.up) {
dy+=3;
}
else if (Keys.down) { // both up and down does not work so check excl.
dy-=3;
}
if (Keys.left) {
dx+=3;
}
else if (Keys.right) {
dx-=3;
}
使用数字键盘怎么样？
这些数字键已经标有上/下/左/右箭头键，因此使用 1、3、7、9 进行对角移动对于用户来说是可以理解和方便的。
为了加快移动速度，您可以在每次击键时添加超过 1 个像素。
要沿对角线移动，您需要同时更改 object.x 和 object.y 值。
// move 4 pixels with each key
var distance=4;
// for example, move diagonally up & left
object.x-=distance;
object.y-=distance;
这是示例代码和演示： http://jsfiddle.net/m1erickson/RnJLZ/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var distance=4;
var object = {
height: 40,
width: 40,
x: 10,
y: 10,
color: "#FF0000"
}
renderObject();
document.body.onkeydown=function(event){
switch(event.keyCode){
case 97: // 1
object.x-=distance;
object.y+=distance;
break;
case 98: // 2
object.x+=0;
object.y+=distance;
break;
case 99: // 3
object.x+=distance;
object.y+=distance;
break;
case 100: // 4
object.x-=distance;
object.y+=0;
break;
case 101: // 5
object.x+=0;
object.y+=0;
break;
case 102: // 6
object.x+=distance;
object.y+=0;
break;
case 103: // 7
object.x-=distance;
object.y-=distance;
break;
case 104: // 8
object.x+=0;
object.y-=distance;
break;
case 105: // 9
object.x+=distance;
object.y-=distance;
break;
}
renderObject();
}
function renderObject(){
if(ctx.fillStyle!=object.color.toLowerCase()){
console.log(ctx.fillStyle,object.color);
ctx.fillStyle=object.color;
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(object.x,object.y,object.width,object.height);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
18703 次 |
| 最近记录： |