[英]Kinetic.js Get position of a shape while undergoing a .move()
我正在开发一个小的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.