[英]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.