2D Processingjs 游戏中的碰撞
Collision in 2D Processingjs Game
我有这个 Javascript 使用 ProcessingJS 库的代码
// Game
var player = {
x: 50,
y: 100,
width: 30,
height: 30,
speed: 10.5,
score: 0
};
var food = {
x: 200,
y: 200,
width: 30,
height: 30,
speed: 10.5
};
var up = 38;
var down = 40;
var left = 37;
var right = 39;
draw = function() {
background(155, 154, 156);
fill(0, 255, 85);
rect(player.x,player.y,player.width,player.height);
fill(245, 3, 3);
rect(food.x,food.y,food.width,food.height);
text('Score: ' + player.score,50,50);
};
var collided = function(){
if (player.x < food.x + food.width &&
player.x + player.width > food.x &&
player.y < food.y + food.height &&
player.height + player.y > food.y) {
return true;
} else {
return false;
}
};
keyPressed = function(){
switch(keyCode){
case up:
player.y -= player.speed;
break;
case down:
player.y += player.speed;
break;
case right:
player.x += player.speed;
break;
case left:
player.x -= player.speed;
break;
default:
break;
}
if(collided()){
while(collided()){
if(/* condition */){
// Do What?
};
}
}
};
出于某种原因,我将一个对象命名为 "food",所以请不要在意。
我试图做到这一点,以便当玩家与 "food" 对象发生碰撞时,它将表现得好像 "food" 对象是一个固体对象并且将无法通过它(例如你正试图穿过一堵墙。)
我尝试从玩家的 X 位置减去 1,直到碰撞停止。我将播放器移动到与 "food" 对象的一侧发生碰撞,并且成功了。但是当我在物体的顶部或底部发生碰撞时,它会将玩家移动到物体的边缘。我不知道如何解决这个问题,所以帮助将不胜感激。
1) 我不会尝试猜测玩家应该回到哪里,而是通过在每个 keyPressed
的开头存储玩家位置开始
keyPressed = function(){
var oldX = player.x;
var oldY = player.y;
//do the other stuff
现在,如果发生碰撞,你可以用 player.x = oldX 等将他设置回原来的位置。当然,这有可能把他设置得太远。
2) 相反,您可以使用更接近您的方法的方法。你知道玩家来自哪个方向,因为 keyPressed 并且你知道你需要将他移回多远,因为你有 'food' 的坐标。我们可以跳过 "while(collided)if(condition)" 并直接将另一个开关放入 "if(collided)"
if(collided()){
switch(keyCode){
case up:
player.y = food.y + food.height;
break;
case down:
player.y = food.y - player.height;
break;
//etc.
3) 最后,可能是因为您想添加更多障碍并认为这是确保玩家不会与任何东西发生碰撞的最简单方法,所以您编写了连续签入代码。如果是这种情况,我建议您多了解一下 类 和对象的工作原理(如果您想自己编写所有代码)或查找碰撞库(如果您希望它更有效率) .如果您想扩展游戏范围或添加功能,这种硬编码的方法可能会让您日后头疼。
我有这个 Javascript 使用 ProcessingJS 库的代码
// Game
var player = {
x: 50,
y: 100,
width: 30,
height: 30,
speed: 10.5,
score: 0
};
var food = {
x: 200,
y: 200,
width: 30,
height: 30,
speed: 10.5
};
var up = 38;
var down = 40;
var left = 37;
var right = 39;
draw = function() {
background(155, 154, 156);
fill(0, 255, 85);
rect(player.x,player.y,player.width,player.height);
fill(245, 3, 3);
rect(food.x,food.y,food.width,food.height);
text('Score: ' + player.score,50,50);
};
var collided = function(){
if (player.x < food.x + food.width &&
player.x + player.width > food.x &&
player.y < food.y + food.height &&
player.height + player.y > food.y) {
return true;
} else {
return false;
}
};
keyPressed = function(){
switch(keyCode){
case up:
player.y -= player.speed;
break;
case down:
player.y += player.speed;
break;
case right:
player.x += player.speed;
break;
case left:
player.x -= player.speed;
break;
default:
break;
}
if(collided()){
while(collided()){
if(/* condition */){
// Do What?
};
}
}
};
出于某种原因,我将一个对象命名为 "food",所以请不要在意。 我试图做到这一点,以便当玩家与 "food" 对象发生碰撞时,它将表现得好像 "food" 对象是一个固体对象并且将无法通过它(例如你正试图穿过一堵墙。)
我尝试从玩家的 X 位置减去 1,直到碰撞停止。我将播放器移动到与 "food" 对象的一侧发生碰撞,并且成功了。但是当我在物体的顶部或底部发生碰撞时,它会将玩家移动到物体的边缘。我不知道如何解决这个问题,所以帮助将不胜感激。
1) 我不会尝试猜测玩家应该回到哪里,而是通过在每个 keyPressed
的开头存储玩家位置开始keyPressed = function(){
var oldX = player.x;
var oldY = player.y;
//do the other stuff
现在,如果发生碰撞,你可以用 player.x = oldX 等将他设置回原来的位置。当然,这有可能把他设置得太远。
2) 相反,您可以使用更接近您的方法的方法。你知道玩家来自哪个方向,因为 keyPressed 并且你知道你需要将他移回多远,因为你有 'food' 的坐标。我们可以跳过 "while(collided)if(condition)" 并直接将另一个开关放入 "if(collided)"
if(collided()){
switch(keyCode){
case up:
player.y = food.y + food.height;
break;
case down:
player.y = food.y - player.height;
break;
//etc.
3) 最后,可能是因为您想添加更多障碍并认为这是确保玩家不会与任何东西发生碰撞的最简单方法,所以您编写了连续签入代码。如果是这种情况,我建议您多了解一下 类 和对象的工作原理(如果您想自己编写所有代码)或查找碰撞库(如果您希望它更有效率) .如果您想扩展游戏范围或添加功能,这种硬编码的方法可能会让您日后头疼。