我当时正在研究一个小的HTML5游戏，一个使用Kinetic.js的简单游戏，我以前从未使用过。我对HTML5 Canvas场景也很陌生。运行我的代码，以便当我按向右箭头键时，我在屏幕上移动了一小片太空飞船。所有其他按钮也以相同的方式工作，向上移动将其向上移动，向下移动将其向下移动，向下和向左按下则同时沿对角线向下移动等等。我遇到了一个我想绕过障碍的问题，但是我设置代码的方式（使用.move()函数，下面将其包括在内）我无法获得我的飞船坐标它会移动，只能在按下该键时向右移动，或者在释放后立即移动。有没有一种方法可以让我的代码运行，以便可以交叉引用它的坐标以及前面可能存在的任何障碍。
[这是我移动船的功能。 'rect'变量是飞船。
var velocity = 200;
//Move Animations
//Move Right Animations
var animRight = new Kinetic.Animation(function(frame) {
var dist = velocity * (frame.timeDiff / 1000);
rect.move(dist, 0);
}, layer);
//Move Left Animations
var animLeft = new Kinetic.Animation(function(frame) {
var dist = velocity * (frame.timeDiff / 1000);
rect.move(-dist, 0);
}, layer);
//Move Up Animations
var animUp = new Kinetic.Animation(function(frame) {
var dist = velocity * (frame.timeDiff / 1000);
rect.move(0, -dist);
}, layer);
//Move Down Animations
var animDown = new Kinetic.Animation(function(frame) {
var dist = velocity* (frame.timeDiff / 1000);
rect.move(0,dist);
}, layer);
//Key Listening Events
//Move Up Control
window.addEventListener('keypress', function(e) {
e.preventDefault();
if(e.keyCode==38) {
animUp.start();
}
});
window.addEventListener('keyup', function(e) {
e.preventDefault();
if(e.keyCode==38) {
animUp.stop();
}
});
//Move Right
window.addEventListener('keydown', function(e) {
e.preventDefault();
if(e.keyCode==39) {
animRight.start();
rect.setAnimation('accl');
}
});
window.addEventListener('keyup', function(e) {
e.preventDefault();
if(e.keyCode==39) {
animRight.stop();
rect.setAnimation('idle');
}
});
//Move Left
window.addEventListener('keydown', function(e) {
e.preventDefault();
if(e.keyCode==37) {
animLeft.start();
}
});
window.addEventListener('keyup', function(e) {
e.preventDefault();
if(e.keyCode==37) {
animLeft.stop();
}
});
//Move Up
window.addEventListener('keydown', function(e) {
e.preventDefault();
if(e.keyCode==38) {
animUp.start();
}
});
window.addEventListener('keyup', function(e) {
if(e.keyCode==38) {
e.preventDefault();
animUp.stop();
}
});
//Move Left
window.addEventListener('keydown', function(e) {
e.preventDefault();
if(e.keyCode==40) {
animDown.start();
}
});
window.addEventListener('keyup', function(e) {
e.preventDefault();
if(e.keyCode==40) {
animDown.stop();
}
});
检查动画循环内是否有碰撞。
//Move Right Animations
var animRight = new Kinetic.Animation(function(frame) {
rect.move(1, 0);
if(rect.getX()+rect.getWidth()>stage.getWidth()){animRight.stop();}
}, layer);
这里是代码和小提琴：http://jsfiddle.net/m1erickson/3CdBb/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x:100,
y:100,
width: 100,
height:100,
fill: 'red',
stroke: 'black',
strokeWidth: 1,
draggable: true
});
layer.add(rect);
layer.draw();
//Move Right Animations
var animRight = new Kinetic.Animation(function(frame) {
rect.move(1, 0);
if(rect.getX()+rect.getWidth()>stage.getWidth()){animRight.stop();}
}, layer);
animRight.start();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>